How to add .png icons to announcement bar?

[DavidCS]

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?

[ProtoMan44]

Hi @DavidCS 

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

[DavidCS]

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]

@DavidCS which theme is in use .

[DavidCS]

@ProtoMan44 I use ´Dawn´

[ProtoMan44 · 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"
},

2 . add code in liquid .

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

result is 

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

[DavidCS]

First of all thanks for the effort @ProtoMan44 ,

Ive implemented the code just as in the screenshots:

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

screenshots

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

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]

@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.