Solved

How to add .png icons to announcement bar?

DavidCS
Tourist
5 0 3

I´m trying to get an announcement bar like on the shop www.petroled.co 

I want to add a DHL icon with the text `Free DHL shipping`and so on for my shop. When trying to edit the announcement bar in the editor (I use the Dawn theme) I can only write a text and I also cannot just drag and drop in the icons.

Is there a free solution to this, maybe with a Shopify App?

Accepted Solution (1)
ProtoMan44
Shopify Partner
146 13 23

This is an accepted solution.

hi @DavidCS .
go to announcment bar section code 
put these code :

1. create custom image field
{
"type": "image_picker",
"id": "image",
"label": "add image icon"
},

ProtoMan44_0-1705039884132.png

2 . add code in liquid .

{%- if section.blocks.first.settings.image != blank -%}
{{ section.blocks.first.settings.image | img_url: "30x30" | img_tag }}
{%- endif -%}

ProtoMan44_1-1705039917630.png




result is 

ProtoMan44_2-1705039976490.png

if you find your solution then please hit like and mark solved 😊

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Replies 7 (7)

ProtoMan44
Shopify Partner
146 13 23

Hi @DavidCS 

 

You need to edit announcements bar section code, must be add a customization field for add a image in announcements bar.

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
DavidCS
Tourist
5 0 3

Hey @ProtoMan44 ,

first of all thanks for your solution. I´m an absolute beginner to Shopify and I have no experience in CSS code. Could you maybe go in depth more how to add a customization field to the announcement bar in the code? If not possible to explain further I'll probably figure it out in a few hours but it would be appreciated to get further assistance in this.

ProtoMan44
Shopify Partner
146 13 23

@DavidCS which theme is in use .

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
DavidCS
Tourist
5 0 3

@ProtoMan44 I use ´Dawn´

ProtoMan44
Shopify Partner
146 13 23

This is an accepted solution.

hi @DavidCS .
go to announcment bar section code 
put these code :

1. create custom image field
{
"type": "image_picker",
"id": "image",
"label": "add image icon"
},

ProtoMan44_0-1705039884132.png

2 . add code in liquid .

{%- if section.blocks.first.settings.image != blank -%}
{{ section.blocks.first.settings.image | img_url: "30x30" | img_tag }}
{%- endif -%}

ProtoMan44_1-1705039917630.png




result is 

ProtoMan44_2-1705039976490.png

if you find your solution then please hit like and mark solved 😊

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
DavidCS
Tourist
5 0 3

First of all thanks for the effort @ProtoMan44 ,

Ive implemented the code just as in the screenshots:

SCR-20240112-mepe.png

 

SCR-20240112-mfei.png

 

In my editor it then looked like this and I added a .png image of a return icon for example.

screenshots

DavidCS_0-1705063290284.png

But after saving everything nothing has changed on the announcement bar...

Bildschirmfoto 2024-01-12 um 13.34.16.png

Maybe you know what went wrong here. Is it maybe better to implement that code to the single announcements so I can have more icons in the announcement bar? 

 

 

DavidCS
Tourist
5 0 3

@ProtoMan44 Nevermind, ignore my reply 🙂 I did implement the code wrong first. This time I did it right and it worked right away. Thank you so much for helping me out as I´m an absolute beginner.