Customize your Square Online site elements
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
- Sign in to Square Dashboard and go to Online.
- Click Items > Item Preferences.
- 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.
- 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.
- Sign in to Square Dashboard and go to Online.
- Click Website > Edit site.
- Click Site design and select Badges.
- Choose a colour, shape and the text font to be displayed on your Primary, Secondary and Tertiary badges.
- 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.
- Publish your site to see the changes live.
Customize buttons
- Sign in to Square Dashboard and go to Online.
- Click Website > Edit site.
- Click Site design and select Buttons.
- Customize Primary and Secondary buttons with colours, shapes, shadows and more.
- Publish your site to see the changes live.
- Sign in to Square Dashboard and go to Online.
- Click Website > Edit site.
- Select the button on your site to see button options in the editing panel.
- Select Add link to set up your link destination and click Save.
- Publish your site to see the changes live.
Customize spacing
Sign in to Square Dashboard and go to Online.
Click Website > Edit Site.
Click Site design and select Spacing.
With the sliders, adjust the Site width and Site margin, then click Done.
Publish your site to see the changes live.
Choose icon sets
Sign in to Square Dashboard and go to Online.
Click Website > Edit Site.
Click Site design and select Icon sets.
Choose an icon set from the dropdown menu and click Done.
Publish your site to see the changes live.