Shopify themes, liquid, logos, and UX
Good day everyone,
Can some one please help me change the icon for the card and account login please ?
I umploaded both images as pngs to my assets Cart: carto.png Login: login.png
I can't seem to find where i need to change the source for them in header.liquid
I am using Prestige theme
Website ulr: https://luxury-cartell.myshopify.com/
Password: stoyol
Thank you very much in advance!
Solved! Go to the solution
This is an accepted solution.
Hey @NZA,
Try this:
Step: 1
Navigate to Online Store > Click on Actions dropdown > Click on Edit Code > Open header.liquid under sections
Step: 2
Under header.liquid search for {%- render 'icon' with 'account' -%} and replace it with the below code
<img src="{{ 'login.png' | asset_img_url }}" alt="Account Icon" />
Step: 3
Under header.liquid search for {%- render 'icon' with 'cart' -%} and {%- render 'icon' with 'cart-desktop' -%} and replace it with the below code
<img src="{{ 'carto.png' | asset_img_url }}" alt="Cart Icon" />
Let me know if it works for you.
Thanks!!
This is an accepted solution.
Hey @NZA,
I'm glad it worked. Let's try this. Please paste the below code into the last line of theme.css file and let me know if it works.
You can also try changing the 25px to more or less.
.Header__Icon img {
max-width: 25px;
}
Thanks!!
This is an accepted solution.
Hey @NZA,
Try this:
Step: 1
Navigate to Online Store > Click on Actions dropdown > Click on Edit Code > Open header.liquid under sections
Step: 2
Under header.liquid search for {%- render 'icon' with 'account' -%} and replace it with the below code
<img src="{{ 'login.png' | asset_img_url }}" alt="Account Icon" />
Step: 3
Under header.liquid search for {%- render 'icon' with 'cart' -%} and {%- render 'icon' with 'cart-desktop' -%} and replace it with the below code
<img src="{{ 'carto.png' | asset_img_url }}" alt="Cart Icon" />
Let me know if it works for you.
Thanks!!
@Amarjyoti Thank you very much the icon show up but they are way too big (Example Below)
How can i made the size smaller ?
Thank you very much for your time!
This is an accepted solution.
Hey @NZA,
I'm glad it worked. Let's try this. Please paste the below code into the last line of theme.css file and let me know if it works.
You can also try changing the 25px to more or less.
.Header__Icon img {
max-width: 25px;
}
Thanks!!
Thank you so much !
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024