Cart Icon Customization Guide: Display and Style Settings

Cart Icon Customization Guide: Display and Style Settings

By Michael Turner

February 20, 2025 at 11:31 PM

The cart icon appears in your site header, displaying the number of items and linking to checkout. Here's how to customize it:

Version 7.1 Customization Steps:

  1. Click "Edit" in the upper left corner
  2. Hover over header and click "Edit site header"
  3. Click "Add elements"
  4. Enable "Cart"
  5. Click the cart icon and select the pencil icon
  6. Choose your style:
    • Icon: Select cart, basket, or bag + adjust size
    • Text: Add custom text (up to 10 characters)
  7. Optional: Add border (outline or solid) and toggle "Show '0' in cart"
  8. Click Save or Exit and Save

Arrow indicates cart with item

Arrow indicates cart with item

Mobile Display:

  • Text style shows item count (e.g., "(0)")
  • Bottom navigation bar for classic button

Black cart icon

Black cart icon

Template Support:

Classic Button Templates (Limited Customization):

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

Advanced Options Templates (Full Customization):

  • Brine, Skye, Tremont, Farro, York

Hide Cart Icon:

  1. Click "Edit"
  2. Edit site header
  3. Click "Add elements"
  4. Disable "Cart"
  5. Save changes

Note: When hidden, a bottom cart icon appears after adding products. Colors can be customized in Site Styles > Colors > Button settings.

Important: Only hide the cart if using Quick Checkout or subscription-only products, as customers need it to find the checkout page.

Related Articles

Previous Articles