Customize your store's shopping cart icon

false

Customize your store's shopping cart icon

Last updated October 15, 2026 15:48

Style the look and feel of your store's shopping cart icon, or hide it from your site header.

Every site has a shopping cart icon that shows the number of items in a customer's cart and leads to the checkout page.

Also try: Customize your checkout experience or Styling your checkout page.

Style the shopping cart icon

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

Style the shopping 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. The icon or text color follows your site's navigation link color.
  6. Icon: Choose a cart, basket, or bag icon, then click Back to set the Cart icon size.
  7. Text: Custom text up to 10 characters appears instead of an icon, matching your navigation link styles.
  8. Under Border, choose a border shape, then choose Outline or Solid. If you choose Outline, set the outline Thickness.
  9. To show “0” next to the cart before customers add anything, switch on the Show ”0“ in cart toggle.
  10. Click Save to save your changes and keep editing, or click Exit, then Save to close the editor.

Style the mini cart

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:
  5. 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.
  6. Button only: A brief “Added!” message appears on the button. Select this option to disable the mini cart.
  7. Click Save to save your changes.

Customize the mini cart icon’s color

To change the mini shopping cart 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 icon follows your site's default color theme.
  3. Click Save to save your changes and keep editing, or click Exit, then Save to close the editor.

How do I 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.

Note:

  • In most templates, the cart icon automatically appears on all pages after a customer adds a product 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.

How does the Shopping cart display by template?

These template families have the classic button:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford (button displays below the header elements)
  • Five
  • Flatiron (button displays below the header)
  • Forte (button displays in the bottom-right corner)
  • Galapagos
  • Ishimoto
  • Momentum (button 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 (button is a rectangle and you can set the colors and font. The button looks the same on mobile—no navigation bar.)
  • Supply (button is a rectangle.
  • Wells (button is 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.

Style options for the Classic button in version 7.0

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.

The shopping cart icon is highlighted in the top-right corner of a site's header.

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

The classic shopping cart icon is highlighted in mobile view.

Style options for the Advanced button in version 7.0

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

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, then Save to close the editor.

Note: 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. You can’t disable the floating cart 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 these site styles tweak 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?

Yes No

164 out of 1032 found this helpful

Yes No

Customize your store's shopping cart icon