Shopify themes, liquid, logos, and UX
Hi All, does anyone have any code to add a New Zealand Flag into my announcement bar in minimal theme?
Thanks Will
Solved! Go to the solution
This is an accepted solution.
@ElsieWolfeI choose to dissent from the general attitude here (I'll do it for you for a price.) I'll do it for you for free!
Go to Settings > Files, and add your flag image there (make sure the image is small, ideally 100 pixels in width - big images will slow down your website!).
Copy the URL. You'll need the URL later.
Go to your Themes page, and click Actions > Edit Code.
Open the file Sections > header.liquid.
Press Ctrl-F to open the Find panel and search for "{{ section.settings.header_text | escape }}" . There are two lines, probably line 68 and line 136. Start with the first line - this is for the desktop website.
Where do you want the flag?
If you want it on the left, put this code on the left of the {{. Add a space between the > and the {{.
If you want it on the right, put this code on the right of the }}. Add a space between the }} and the <.
<img style="max-width: 30px" src="URL">
Replace "URL" with the actual image URL you had copied before.
It would look something like this:
For Left side:
<img style="max-width: 30px" src="https://cdn.shopify.com/s/files/ ... ... ... "> {{ section.settings.header_text | escape }}
For right side:
{{ section.settings.header_text | escape }} <img style="max-width: 30px" src="https://cdn.shopify.com/s/files/ ... ... ... ">
You can adjust 30px to higher or lower number depending on how big you want your flag. Be sure to always format it with px: like 25px, 40px, etc (no space in between!)
Now copy what you did and paste it in the second line 136 as well. This is for the mobile website.
Click Save on top right. Test your website.
Enjoy!
Note: This will permanently put the flag there, and you can't change it via Customize theme. To remove it, you'll need to edit the code again.
Hello, @ElsieWolfe
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
You'll also need to share your website password (NOT shopify account password but the one to enter the website) so that we can see the website.
Adding images will require some code editing. Are you willing to undertake that challenge?
Hi, sorry password is "cuisto".
Yes happy with coding.
Thanks Will
it can be done some customization.
Can you please elaborate?
How?
This is an accepted solution.
@ElsieWolfeI choose to dissent from the general attitude here (I'll do it for you for a price.) I'll do it for you for free!
Go to Settings > Files, and add your flag image there (make sure the image is small, ideally 100 pixels in width - big images will slow down your website!).
Copy the URL. You'll need the URL later.
Go to your Themes page, and click Actions > Edit Code.
Open the file Sections > header.liquid.
Press Ctrl-F to open the Find panel and search for "{{ section.settings.header_text | escape }}" . There are two lines, probably line 68 and line 136. Start with the first line - this is for the desktop website.
Where do you want the flag?
If you want it on the left, put this code on the left of the {{. Add a space between the > and the {{.
If you want it on the right, put this code on the right of the }}. Add a space between the }} and the <.
<img style="max-width: 30px" src="URL">
Replace "URL" with the actual image URL you had copied before.
It would look something like this:
For Left side:
<img style="max-width: 30px" src="https://cdn.shopify.com/s/files/ ... ... ... "> {{ section.settings.header_text | escape }}
For right side:
{{ section.settings.header_text | escape }} <img style="max-width: 30px" src="https://cdn.shopify.com/s/files/ ... ... ... ">
You can adjust 30px to higher or lower number depending on how big you want your flag. Be sure to always format it with px: like 25px, 40px, etc (no space in between!)
Now copy what you did and paste it in the second line 136 as well. This is for the mobile website.
Click Save on top right. Test your website.
Enjoy!
Note: This will permanently put the flag there, and you can't change it via Customize theme. To remove it, you'll need to edit the code again.
Your the man, thank you.
Is it possible to make that image have a link also, when you add it to the announcement bar. I've tried using <a href> but doesn't seem to work
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