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

Technical Q&A
,
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