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 !
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024