Home

Customize your Square Online site elements

Who is this article for?
  • Sellers with online permissions. Set permissions in Square Dashboard.
  • Square Online Plus or Premium subscribers
  • About site elements

    When customers open a website for the first time, everything from colours, fonts and shapes can affect how they respond to its content. Site elements let you further customize your Square Online site, which include:

    • Badges: Customize your primary, secondary and tertiary item status badges to change how they look and where they should appear on your items. Badges quickly display item information such as “sale” or “low stock.”

    • Buttons: You can add primary or secondary buttons to different pages, and customize how they look and what they link to.

    • Spacing: Spacing refers to the space between margins, text, images and other elements on your site. You can use scales to customize both your site width and site margin.

    • Icon sets: Select from a variety of icon styles that best suit your brand. Icons represent elements like the shopping cart, customer accounts, site search, navigation and others.

    Before you begin

    You can customize your site elements from your Square Dashboard.

    Customize badges

    Enable badges

    1. Sign in to your Square Dashboard and click Sales channels > Online, then click Items > Item Preferences or Shared Settings > Item Preferences.
    2. Under “Item statuses,” select Edit to choose your badge options.
      • Toggle on Sale indicator to display a badge on items that are on sale.
      • Toggle on Low inventory indicator to display when an item’s inventory drops below your specified quantity. Be sure to enter a quantity of two or above.
      • Toggle on Out of stock indicator to display a badge on out of stock items. If you opt to display your out of stock items, you can select Out of stock indicator to display when an item’s stock drops to zero.
    3. Select Save when finished.

    You can also automatically display pre-order or discount badges when setting up pre-orders and discounts from your Item Library.

    Design badge appearance

    1. Sign in to your Square Dashboard and click Sales channels > Online > Website > Edit site.
    2. Click Site design and select Badges.
    3. Choose a colour, shape and the text font to be displayed on your Primary, Secondary and Tertiary badges.
    4. Select Item badge styles to apply the styles you’ve created to each of your enabled badge types. You can also change the position of your badges on individual pages to display below or above text, or on your item images.
    5. Publish your site to see the changes live.
    Please be advised that sellers operating in Canada may be liable for misrepresenting the nature of a Sale (i.e. using a fake regular price and then crossing it out, claiming the item is “marked down”) or for misleading urgency cues (i.e. when products are falsely labelled and advertised as “low inventory” or “selling fast”). Please familiarize yourself with the applicable legal requirements, including those relating to the advertising of sales prices, to ensure that you are in compliance.

    Customize buttons

    Design button appearance

    1. Sign in to your Square Dashboard and click Sales channels > Online > Website > Edit site.
    2. Click Site design and select Buttons.
    3. Customize Primary and Secondary buttons with colours, shapes, shadows and more.
    4. Publish your site to see the changes live.

    Add button links

    1. Sign in to your Square Dashboard and click Sales channels > Online > Website > Edit site.
    2. Select the button on your site to see button options in the editing panel.
    3. Select Add link to set up your link destination and click Save.
    4. Publish your site to see the changes live.

    Customize spacing

    1. Sign in to your Square Dashboard and click Sales channels > Online > Website > Edit site.

    2. Click Site design and select Spacing.

    3. With the sliders, adjust the Site width and Site margin, then click Done.

    4. Publish your site to see the changes live.

    Choose icon sets

    1. Sign in to your Square Dashboard and click Sales channels > Online > Website > Edit site.

    2. Click Site design and select Icon sets.

    3. Choose an icon set from the dropdown menu and click Done.

    4. Publish your site to see the changes live.

    Related articles

    Can't find what you need?