By default, your site header includes a shopping cart icon and a cart confirmation (mini cart) that appears when shoppers add items.

To edit the mini cart:

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, then click Cart.
4. Under Add to cart confirmation, select an option to turn the mini cart on or off:
   • Badge and button – (Recommended) Displays the mini cart window. This setting is on by default. Its color automatically contrasts with your background to stay visible.
   • Button only – A brief “Added!” message appears on the button. Select this option to disable the mini cart.
5. Click Save to save your changes.

Style the cart icon

To edit the shopping 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, then click Cart.
4. Click the pencil icon.
5. 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.
   • The icon or text color follows your site's navigation link color.
6. 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.
7. To show 0 next to the cart before customers add anything, switch the Show "0" in cart toggle on.
8. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Display the cart icon as text 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.

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

Advanced style options

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

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