Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Shopping cart icon display

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

  • 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.
Note: If your cart isn't appearing, see our troubleshooting tips.

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

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 Products Page, and the Continue Shopping link.

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 desktop. 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 Products Page to your site. Can't be hidden. Learn more.

Looks the same as desktop. 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 desktop. Displays in the top-right (icon) or below the navigation links when you tap the menu icon (text). If hidden on desktop, 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

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
Was this article helpful?
16 out of 101 found this helpful