Hey Shopify Community,
I am trying to add a shipping icon to my announcement bar. I have tried to find anything helpful but wasn’t successful.
https://fishermans24.myshopify.com
PW: ticrab
The announcement bar says “Free shipping” and I want a shipping icon next to it.
What are the steps to take?
Thank you for your help
You can include Font Awesome on your theme for icons. Go into your theme.liquid in your Layouts folder in Online Store > Themes > Actions > Edit Code
Open the file and look for the closing head tag and place this before it:
<script src="https://kit.fontawesome.com/f7cf0a6419.js"></script>
//place this script above the closing head tag
</head> // <---- This is the ending head tag
Then open your header.liquid file in your sections folder and ctrl + f for “announcement-bar__message”. You should see this line:
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
change that to this:
<p class="announcement-bar__message">{{ section.settings.message_text | escape }} <i class="fas fa-truck"></i></p>
Now there should be a little truck at the end of your message.
Hello friend, i use the minimal theme and i basically just want to remove all text and replace with the 3 icons. Person icon for account, basket and magnifying glass for search. This is my current lay out, how can i change this?
Thank you! Worked just fine!
Where can I find the other Icons of that font style? Would like to add cart icon as well
You can just search through font awesome. Here’s the page with the truck:
https://fontawesome.com/icons/truck?style=solid
Just find the icon you like and you can place it anywhere on your site with the tags, and put the class that they provide you on the site in the class field.
Thank you for this. It Worked for my debut theme. For those are are wondering the truck will be at the end. Im excited about this. wooot wooot !
Hi,
Your solution worked but now I am unable to change the text colour of the announcement bar message.
I have selected different colour in the header-announcement bar section but it is still black.
I think it is because an icon has been added to the announcement bar.
Can you advise?
Thanks,
Eric
Thanks for the solution.
I inserted that code into “announcement-bar.liquid” Section.
My header has come out looking like this, with the truck icon sitting above the text. Any ideas?
Hi @Roy37 ,
You will need to adjust the display css for this. Do you mind sharing your website so we can take a look?
Hello Guys, i cant find this line in my header.liquid file
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
Can you help me out please?
Thank you in advance!