"Refresh" theme: Trying to add "Cart" text next to the cart icon

[CozyCampfire]

I’m in the process of customizing the new “Refresh” store 2.0 theme, and I want to add text that explicitly says “Cart” next to the cart bag icon in the top right. I feel that the bag icon alone is too ambiguous.

I found the location in the code where this cart/bag icon is rendered, which is in “header.liquid” around line 592.

There is already hidden “Cart” text in the code rendered right after the bag icon which says:

{{ 'templates.cart.cart' | t }}

This text displays the text “Cart” but is visually hidden. I removed the “visually-hidden” class, which then shows the text “Cart” next to the icon, however, as soon as I add a product to the cart, or remove something, it reverts back to the bag icon alone. I’m assuming that there is JavaScript modifying this somewhere and reverting it back. I am not experienced with JavaScript at all. If anyone has any idea where this could be happening and how to prevent it I would be extremely grateful because I am stumped and I really need this text to display.

Thank you very much.

[Niraj_singh]

Hello @CozyCampfire

Please use below code on assets → base.css at the bottom show Cart text next to bag icon in refresh theme

[made4Uo]

Hi @CozyCampfire ,

That is because there is javascript that replaces the icon. Please do the following instead.

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Go to Section folder, and open the header.liquid file
3. Find the icon-cart, then replace the code below with the word CART. Make sure to SAVE

{%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}

See image for location reference

Code should look like this

4. Next, open the cart-icon-bubble.liquid, still at the Section folder

5. Replace the code below with the word CART. Just like what we did in the header.liquid. Make sure to SAVE

{%- liquid
  if cart == empty
    render 'icon-cart-empty'
  else
    render 'icon-cart'
  endif
-%}

See highlighted code for reference.

Code should look like this.

[CozyCampfire]

Thanks very much for your detailed response, this worked perfectly.

[greenvalleycode]

This solution does not work for me. When I change the code as suggested, the cart icon disappears completely and only shows the text “CART”. What am I doing wrong?