Adding an INFO icon in the announcement bar.

badinfo
Tourist
7 0 2

Hi,

I would love to know how I could add an INFO icon in my announcement bar like on this website: www.shop.maribe-creations.de

Screenshot 2021-05-09 at 17.38.54.png

My store:

alphapaw.nl

Theme: Boost

Replies 2 (2)

RajatWeb
Shopify Partner
197 46 62

Hi @badinfo,

Please add '<svg class="c-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>' code in header.liquid file

Like: 

<div class="announcement-bar__content container"> <svg class="c-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>  <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Free Shipping in the Netherlands &amp; Belgium!</font></font></div>

Also  Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

svg.c-icon {
    width: 1.2rem;
    vertical-align: middle;
}
If helpful then please Like and ✔️ Accept Solution.
Do you need custom changes on store ? please send me a personal message and we can discuss.
Email: rajatsharma.web@gmail.com
Skype: rajatsharma.web
RajatWeb
Shopify Partner
197 46 62

Hi @badinfo,

See attached screenshot.

Screenshot 2021-05-09 at 9.40.43 PM.png

 

Thanks

If helpful then please Like and ✔️ Accept Solution.
Do you need custom changes on store ? please send me a personal message and we can discuss.
Email: rajatsharma.web@gmail.com
Skype: rajatsharma.web