change cart icon and quantity bauble to text

[alant]

Hello,

Could anyone support with the following please - I would like to change cart icon and quantity bauble to text so it will show as for example CART (1). I would like it to be changed for both desktop and mobile. I would appreciate if anyone could help!

My store: https://iivq075qsobcx70p-78805696849.shopifypreview.com

[BSSCommerce-HDL · Accepted solution]

Hi @alant, You can try following steps. Remember to backup your theme before. 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file header.liquid

Step 3: Edit the code according to the following sample:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a#cart-icon-bubble {
    width: auto !important;
    text-decoration: none !important;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Abdosamer · Accepted solution]

@alant , To change the cart go to icon-cart-bubble.liquid , replace the whole code with this :

<span class="">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
  <div class="">
    {%- if cart.item_count < 100 -%}
      <span aria-hidden="true">({{ cart.item_count }})</span>
    {%- endif -%}
    <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
  </div>
{%- endif -%}

[Abdosamer]

@alant , we will need to edit the header.liquid file , go to that file and search for this : header__icon , then send a screenshot of the result so I can tell you what to change

[alant]

Hi there,

Thanks for that! Please see the screenshoot attached.

[Abdosamer · Accepted solution]

@alant , To change the cart go to icon-cart-bubble.liquid , replace the whole code with this :

<span class="">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
  <div class="">
    {%- if cart.item_count < 100 -%}
      <span aria-hidden="true">({{ cart.item_count }})</span>
    {%- endif -%}
    <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
  </div>
{%- endif -%}

[BSSCommerce-HDL · Accepted solution]

Hi @alant, You can try following steps. Remember to backup your theme before. 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file header.liquid

Step 3: Edit the code according to the following sample:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

Thanks! That almost worked - is it a way for everything to be in one line and without the underline? 

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a#cart-icon-bubble {
    width: auto !important;
    text-decoration: none !important;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

Worked! Amazing, thank you!

[BSSCommerce-HDL]

@alant, No problem. Have a good day 😁

[alant]

Can I just check - when I add a thing to the basket the icon changes to the bag instead of word CART. Could you support please? 

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file cart-icon-bubble.liquid

Step 3: Edit the code according to the following sample:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍