Add Shipping ICON to Announcement Bar in Shopify

Add Shipping ICON to Announcement Bar in Shopify

Are you trying to add a shipping icon to your Shopify online store announcement bar? In this tutorial, I am going to show the easy process to Add shipping ICON to the Announcement bar.

I am going to use Font Awesome for Icon. So first of all You have to 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.

If my solution helped you, please click on the like button and Subscribe to My Channel!
If you’d like to make any edits to your store, please send me a personal message and we can discuss what you’d like to accomplish 😀

Shopify Expert
Shopify Expert

Leave a Reply