Shopping cart icon display

Steps for styling or hiding your store's shopping cart icon.

Last updated February 23, 2024

All sites support a shopping cart icon that shows the number of items in a customer's cart and leads to the checkout page.

Style the icon

How you style the shopping cart icon depends on your site's version.

The shopping cart icon displays as a cart in the site header by default.

To enable and style the cart icon:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Add Elements.
  4. Switch the Cart toggle on.
  5. Click anywhere outside the editor.
  6. Click the cart icon in your header, then click the pencil icon.
  7. Select the Style.
    • If you choose Icon, select a cart, basket, or bag icon to appear in your header, then click Back to set the Cart icon size.
    • If you choose Text, custom text up to 10 characters appears instead of an icon, matching your navigation link styles.
  8. Under Border, enable a border surrounding the icon by choosing a border shape, then choose Outline or Solid to change the design. If you choose Outline, set the outline Thickness.
  9. To show 0 next to the cart before customers add anything, switch the Show "0" in cart toggle on.
  10. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Text cart icon on mobile devices

When your cart icon is set to Text, it appears as the number of items in the cart on mobile devices. The site will initially show "(0)" in the header as the cart icon. Changing the Show "0" in cart toggle doesn't affect how this appears on mobile devices.

The shopping cart icon display depends on your template. Keep in mind:

  • In most templates, the cart icon automatically appears on all pages after a customer adds an item to their cart.
  • In some templates, the icon is a permanent part of the header.
  • The cart doesn't display if Express Checkout is enabled.
  • If your cart isn't appearing, see our troubleshooting tips.

Display by template

These template families have the classic button:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford - But it displays below the header elements
  • Five
  • Flatiron - But it displays below the header
  • Forte - But it displays in the bottom-right corner
  • Galapagos
  • Ishimoto
  • Momentum - But it displays in the top-left if the navigation bar is at the bottom, or bottom-left if the navigation bar is at the top.
  • Montauk
  • Native
  • Pacific - But it's a rectangle and you can set the colors and font. The button looks the same on mobile (no navigation bar).
  • Supply - But it's a rectangle.
  • Wells - But it's a rectangle.
  • Wexley

These template families have advanced options:

  • Brine
  • Skye
  • Tremont
  • Farro
  • York

Tip

Other elements you can style include the Add to Cart button, the store page, and the Continue Shopping button.

Classic button

Most templates support the classic button, which displays the shopping cart icon in a black, pill-shaped button in the top-right corner. It automatically appears on all pages after a customer adds an item to their cart. It doesn't have style options.

classic-button-desktop.png

On mobile the classic button appears as a navigation bar at the bottom:

classic-button-mobile.png

Advanced style options

You can customize the shopping cart's style in the site styles panel in these template families:

Template family Computer display Mobile display

Brine

Displays as a cart, text, or bag in the header. Can be hidden. Learn more.

Separate mobile styles. Displays in the top or bottom navigation bar as a cart, text, or bag. Can be hidden. Learn more.

Farro

Displays as a cart, text, or bag in the header. Can be hidden. Learn more.

Separate mobile styles. Displays in the top or bottom navigation bar as a cart, text, or bag. Can be hidden. Learn more.

Pacific

Displays in a rectangular button in the top-right corner. Text only. You can customize the colors. Can't be hidden. Learn more.

Looks the same as a computer. Displays in the bottom-right corner. Can't be hidden. Learn more.

Skye

Displays as a bag icon in the top-right corner after you've added a store page to your site. Can't be hidden. Learn more.

Looks the same as a computer. Displays at the bottom in a navigation bar. Learn more.

Tremont

Displays as text with the navigation, or as a bag or cart icon in the top-right corner. Can be hidden. Learn more.

Looks the same as a computer. Displays in the top-right (icon) or below the navigation links when you tap the menu icon (text). If hidden on a computer, it's also hidden on mobile. Learn more.

York

Displays as a cart, text, or bag in the header. Can be hidden. Learn more.

Separate mobile styles. Displays below the navigation links when you tap the menu icon. Can be hidden. Learn more.

Hide the shopping cart icon

How you hide the shopping cart icon depends on your site's version.

To hide the icon from your site's header:

  1. Click Edit in the top-left corner of your site preview.
  2. Hover over the header and click Edit Site Header.
  3. Click Add Elements.
  4. Switch the Cart toggle off.
  5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

If you hide the shopping cart icon, a cart icon appears at the bottom of the page when someone adds a product to their cart. To change the icon's color:

  1. When editing a page, open site styles, then click Colors.
  2. Under Button, set the Background and Text colors. The shopping cart follows your site's default color theme.
  3. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

It's not possible to disable the icon or change its size and shape.

Without the shopping cart icon, customers won't be able to find the checkout page on their own. You should only hide it if you use Express Checkout, or only sell subscription products. In these cases, customers are taken to the checkout page automatically after selecting a product.

You can use the site styles tweak listed below to hide or show the shopping cart in these template families:

  • Brine - Cart Position
  • Farro - Cart Position
  • Tremont - Cart Link Display
  • York - Cart Position
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.