Change cart to icon on mobile view and text on desktop (Dawn theme)

Store Design
,
1

Hi,

I have requirement that the cart on the desktop view would be a text “CART”, and on the mobile view it would be the icon cart. How can I achieve this by changing the liquid and CSS?

Also, there also some changes need to be done on the javascript cause once the cart bubble counter is updated, it would display either text or mobile. I am stuck on how to figure this out.

Your help is highly appreciated. Thanks

2

Hello @noraziz ,
As this will require some coding.
So, i can help you with this.

3

If you are a developer then look for media queries to change the “CART” text to icon. Most themese support this out of the box, I wonder you are eaither building on a custom theme or you messed up some code somewhere.

If you are not a developer you can hire me or an other developer who can do this for you. It’s theme specific and will involve coding.

4

Hi,

I have found the solution. Here is the code snippet.


           
      
            Cart
    
            
               
            
            
            {{ 'templates.cart.cart' | t }}
            {%- if cart != empty -%}
              

                {%- if cart.item_count < 100 -%}
                  {{ cart.item_count }}
                {%- endif -%}
                {{ 'sections.header.cart_count' | t: count: cart.item_count }}
              

            {%- endif -%}