The shopping cart icon displays the number of items in a customer's cart and directs them to checkout. Here's how to customize it:

Version 7.1 Styling

1. Click [Edit] in the upper left corner
2. Hover over header and click [Edit Site Header]
3. Click [Add Element]
4. Toggle [Cart] on
5. Click the cart icon then the pencil icon
6. Choose your style:
   • Icon: Select cart, basket, or bag icon and set size
   • Text: Enter custom text (up to 10 characters)
   • Border: Choose shape and style (outline or solid)
7. Toggle [Show "0" in Cart] to display zero items
8. Click [Save]

Mobile Display

• Text cart icons show number of items
• Initially displays as "(0)"
• [Show "0" in Cart] toggle doesn't affect mobile

Template Variations

Classic Button Templates:

• Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Galapagos, Ishimoto, Momentum, Montauk, Native, Pacific, Supply, Wells, Wexley

Advanced Styling Templates:

• Brine, Skye, Tremont, Farro, York

Hiding the Cart Icon (Version 7.1)

1. Click [Edit]
2. Click [Edit Site Header]
3. Click [Add Element]
4. Toggle [Cart] off
5. Click [Save]

Note: When hidden, the cart appears at bottom when items are added. Color can be changed in site styles under [Colors] > [Buttons].

Important Considerations:

• Cart icons automatically appear when items are added
• Some templates display permanent header icons
• Express checkout disables cart display
• Only hide cart with express checkout or subscription products
• Template families like Brine, Farro, Tremont, and York offer additional styling options through site styles

Related Articles

Previous Articles