How to Customize or Hide Your Site's Shopping Cart Icon

How to Customize or Hide Your Site's Shopping Cart Icon

By Michael Turner

February 21, 2025 at 01:16 AM

A shopping cart icon shows the number of items in a customer's cart and leads to the checkout page. Here's how to customize or hide it based on your site's version.

Styling the Cart Icon (Version 7.1)

  1. Click Edit in the site preview
  2. Hover over header and click "Edit site header"
  3. Click "Add elements"
  4. Toggle "Cart" option
  5. Click the cart icon and select the pencil icon
  6. Choose your style:
    • Icon: Select cart, basket, or bag icon
    • Text: Add custom text up to 10 characters
    • Margin: Enable border with outline or solid design
    • Show "0": Toggle display of zero items

Note: On mobile, text-style carts show the number of items, starting with "(0)".

Template-Specific Display

Classic Button Templates:

  • Adirondack
  • Avenue
  • Aviator
  • Bedford (below header)
  • Five
  • Flatiron (below header)
  • Forte (bottom right)
  • Galapagos
  • Ishimoto
  • Momentum
  • Montauk
  • Native
  • Pacific
  • Supply
  • Wells
  • Wexley

Advanced Options Templates:

  • Brine
  • Farro
  • Pacific
  • Skye
  • Tremont
  • York

Hiding the Cart Icon (Version 7.1)

  1. Click Edit
  2. Hover over header
  3. Click "Edit site header"
  4. Click "Add elements"
  5. Turn off "Cart" option

When hidden, a cart icon appears at bottom when products are added. To change its color:

  1. Open site styles
  2. Click Colors
  3. Adjust Button Background and Text colors

Important: Only hide the cart if using Express Checkout or selling subscription products exclusively, as customers won't find the checkout page independently.

Note: Customization options vary by template family. Some templates allow position adjustments through Site Styles, including Brine, Farro, Tremont, and York.

Related Articles

Previous Articles