8 Simple Steps to add Shipping Truck Icon in the Announcement Bar in Shopify - Made4uo - Great Gift Deals

8 Simple Steps to add Shipping Truck Icon in the Announcement Bar in Shopify

Hi, 

Follow the steps below. No need to have coding experience.

 

 1. Go to Shopify (make sure you are in admin). Then Online Store > Themes > Actions > Edit Code

2. Open theme liquid

3. Find the end of the head. It should be like this "</head>"

4. Place the code right above the "</head>"

 <script src="https://kit.fontawesome.com/f7cf0a6419.js"></script>


//place this script above the closing head tag
</head> // <---- This is the ending head tag

5. Then, open the Section folder and click header.liquid

6. Find announcement-bar__message

7. Replace this code:
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

To this code:

 <p class="announcement-bar__message"><i class="fas fa-shipping-fast"></i> {{ section.settings.message_text | escape }} </p>



You should also replace after the "endfor" code with this code

{% endfor %}<p class="announcement-bar__message"><i class="fas fa-shipping-fast"></i> {{ section.settings.message_text | escape }} </p>

8. Click SAVE both the theme.liquid and the header.liquid

 

Click if you want different icons.

 

Let me know if you have questions and I will try to answer. 

 

Thank you!!!(",)

 

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Adding a Gallery Section for Shopify Website

Add your images as a gallery using grid. This should work in most of the shopify theme.

Update your Product Page to Shopify 2.0 - Just like Dawn

Not ready for Dawn Theme but would like to update your Debut theme's product page just like Dawn?...

1 comment

Hello! Thank you so much for making these videos. I am a real noob, but managed so easily to use your content!

I was wondering if you know how to connect products – i will explain.
I have the same necklace in gold and silver. I want both of the variants to appear on both “necklesses” and “all jewelry” in the menu. At the same time I want to show both options when entering one of the products. So when you press gold, you will only see photos of gold, and the info for gold, and when pressing silver, the oposite.

I hope I explained my self ok.

Crossing fingers that you can help!

Thank you so much :-)

Vilde F

Leave a comment