How to get custom header cart Icon to show on mobile - DAWN

Store Design
, , , , , , , ,

Topic summary

Custom cart icon on a Shopify Dawn theme displays on desktop but not on mobile.

  • Website URL shared; screenshots show desktop vs mobile header icons. Images are central to the issue.
  • Proposed fix: replace the SVG in both theme snippets: icon-cart.liquid and icon-cart-empty.liquid, since Dawn uses separate icons for empty and filled carts.
  • Technical context: Liquid is Shopify’s templating language. Header.liquid conditionally renders icons: if the cart is empty, it renders ‘icon-cart-empty’; otherwise, it renders ‘icon-cart’. SVG is the vector graphic used for the icon.
  • A participant noted the desktop icon did not appear changed either, suggesting edits may not be applied or only one snippet was updated.
  • Status: The original poster acknowledged awareness of the two icons but didn’t confirm a fix. No resolution reported; discussion remains open.
Summarized with AI on December 29. AI used: gpt-5.
1

Hi,I changed the cart icon to a custom one. but it seems to only render on desktop but not on mobiles. Does anyone know the solution to this problem? Thank you very much for your help !

Wesite URL: https://inkly.fr/

INKLY_0-1715681748727.png
INKLY_0-1715681748727.png1277×305 47.4 KB

INKLY_1-1715681789552.png
INKLY_1-1715681789552.png540×1148 279 KB

2

Hi there,

In the theme code, go to the ‘icon-cart.liquid’ and ‘icon-cart-empty.liquid’ and replace the SVG code. This should do the trick! Keep in mind that you have a different icon for an empty and a filled cart.

3

Hi, @INKLY

From my perspective, the desktop icon has not changed either.

AnneLuo_0-1715683634613.png
AnneLuo_0-1715683634613.png1238×356 72.9 KB

4

Hi @INKLY

In header.liquide there are two type of icon

if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif

one is for empty card another is with card. You have changed the item in cart icon :slightly_smiling_face: You need to change other one also.

It will solve your issues.

5

@ThomKnepper Thank you! I was aware of the different icon for an empty and a filled cart!