Theme Debut: Add shipping ICON to Announcement bar.

Highlighted
Tourist
7 0 0

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

0 Likes
Highlighted
Shopify Partner
1445 195 522

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.

 

If my solution helped you, please like and accept as solution!
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 :D
Highlighted
Tourist
12 0 1

 

 

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?

Highlighted
Tourist
7 0 0

Thank you! Worked just fine! 

Where can I find the other Icons of that font style? Would like to add cart icon as well

0 Likes
Highlighted
Shopify Partner
1445 195 522

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 <i class=""></i> tags, and put the class that they provide you on the site in the class field.

If my solution helped you, please like and accept as solution!
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 :D
Highlighted
New Member
2 0 0

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 !

0 Likes