Solved

Minimal Theme Insert and image into announcement bar

ElsieWolfe
Excursionist
24 0 6

Hi All, does anyone have any code to add a New Zealand Flag into my announcement bar in minimal theme?

 

Thanks Will

Accepted Solution (1)
Arundas
Shopify Partner
72 3 96

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.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ElsieWolfe
Excursionist
24 0 6

Thank you 

www.elsiewolfe.com

Arundas
Shopify Partner
72 3 96

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?

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!
ElsieWolfe
Excursionist
24 0 6

Hi, sorry password is "cuisto".

Yes happy with coding.

Thanks Will

ElsieWolfe
Excursionist
24 0 6

Hello, our URL is www.elsiewolfe.com and password is "cuisto".

Thanks Will

KetanKumar
Shopify Partner
36839 3635 11972

@ElsieWolfe 

it can be done some customization.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ElsieWolfe
Excursionist
24 0 6

Can you please elaborate?

KetanKumar
Shopify Partner
36839 3635 11972

@ElsieWolfe 

How?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Arundas
Shopify Partner
72 3 96

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.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!
ElsieWolfe
Excursionist
24 0 6

Your the man, thank you.

JamesFawdry
Visitor
1 0 0

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