How do I resize the cart icon in the Refresh theme?

Technical Q&A
,

Topic summary

A user needs to enlarge the cart icon in Shopify’s Refresh theme after adding the word “Cart” next to it caused the icon to shrink.

Proposed Solutions:

  • Add font-size property to the <p> tag containing “Cart” text to adjust text size independently
  • Apply padding-left: 10px and margin-top: -5px to the cart text element to create spacing and vertical alignment with the icon
  • Insert custom CSS in theme.liquid file before the </body> tag to target and resize the cart icon specifically

Key Technical Details:

  • The issue involves modifying cart-icon-bubble.liquid and header.liquid files
  • Solutions focus on CSS adjustments (padding, margin, font-size) rather than changing icon rendering
  • Multiple responders suggest code snippets with inline styling

Status: Multiple solutions provided but no confirmation from the original poster on which approach resolved the issue.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi

I need to increase the size of the cart icon in the Refresh theme. I have added the word “Cart” next to the icon and unfortunately the icon has shrunk. I have used the following in cart-icon-bubble.liquid and also header.liquid:

{%- liquid
if cart == empty
render ‘icon-cart-empty’
else
render ‘icon-cart’
endif
-%}
{{ ‘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 -%}

Cart

2

Hi @MLMC ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
{{ '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 -%}

Cart

In the modified code, I have added a font-size property with a value of 20px to the p tag that displays the word “Cart”. You can adjust the value of font-size to increase or decrease the size of the text as desired.

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Thanks @PageFly-Victor . If I reduce the font size it will increase the logo size but I want to just increase the logo size and leave the font size as is. I’m thinking it might be a padding issue but not sure how to correct this?

4

If you want to increase the size of the cart icon without affecting the font size of the “Cart” text, you can adjust the padding and/or margin of the cart icon element to make it appear larger.

{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
{{ '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 -%}

Cart

In the modified code, I have added a padding-left property with a value of 10px to the p tag that displays the word “Cart”. This moves the text away from the cart icon and creates some extra space around the icon. I have also added a margin-top property with a value of -5px to move the text slightly upward, so that it is vertically centered with the icon. You can adjust the values of padding-left and margin-top as desired to achieve the desired appearance.

5

Hello @MLMC ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677551956124.png
GemPages_0-1677551956124.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677551978493.png
GemPages_1-1677551978493.png1506×873 74.2 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

If you are looking for an easy way to resize your cart icon in the Refresh theme, then this article is for you. We will show you how to do it in just a few simple steps. After following our instructions, you’ll be able to change the size of your cart icon to better match the rest of your website. So, if you’re ready to learn how to resize your cart icon, then read onhttps://prnt.sc/xeKM5qibM8I6