Hide Shopping Cart Icon Until Item is Added - Dawn Theme

Store Design
, , , ,

Topic summary

Goal: Hide the shopping cart icon in the Dawn (Shopify) theme header until at least one item is added to the cart.

Proposed solutions:

  • CSS approach: Add display: none; for the empty cart icon selector in base.css (e.g., .icon.icon-cart-empty { display: none; }).
  • Liquid approach: In header.liquid, wrap the cart element in a conditional so it appears only when cart.item_count > 0.

Implementation notes:

  • Edit files via Online Store → Themes → Actions → Edit code.
  • Liquid is Shopify’s templating language; cart.item_count checks the number of items currently in the cart.

Outcome:

  • The requester confirmed the change “did the trick,” indicating a successful fix. The specific method used was not explicitly stated.

Status:

  • Resolved. No disagreements or outstanding questions.

Central assets:

  • Code snippets (CSS selector for the empty cart icon and a Liquid conditional) are key to understanding and implementing the solution.
Summarized with AI on January 22. AI used: gpt-5.
1

I am using the Dawn theme. I would like to hide the shopping cart icon from the header until a user actually adds one or more items to the cart. Is this possible and, if so, what code should I add?

2

Hi @M3P-Music

You can do that by adding this CSS code at the bottom of your base.css file

.icon.icon-cart-empty { display: none; }
3

Hello @M3P-Music ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to header.liquid file

You can structure the code like this:

{% if cart.item_count > 0 %}
  
  Cart
{% endif %}

Save and test

Hope this can help.

Transcy

4

Yes! Thank you. That did the trick.

1 Like
5

Happy I could help.