Minimal Theme Insert and image into announcement bar

Solved
ElsieWolfe
Excursionist
20 0 4

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

 

Thanks Will

KetanKumar
Shopify Partner
20698 2148 7848

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
0 Likes
ElsieWolfe
Excursionist
20 0 4

Thank you 

www.elsiewolfe.com

0 Likes

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!
0 Likes
ElsieWolfe
Excursionist
20 0 4

Hi, sorry password is "cuisto".

Yes happy with coding.

Thanks Will

0 Likes
ElsieWolfe
Excursionist
20 0 4

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

Thanks Will

0 Likes
KetanKumar
Shopify Partner
20698 2148 7848

@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
0 Likes
ElsieWolfe
Excursionist
20 0 4

Can you please elaborate?

0 Likes
KetanKumar
Shopify Partner
20698 2148 7848

@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
0 Likes

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!
0 Likes