How to add free shipping below product price?

Store Design
1

Hello, How can I add this exactly as the image?

free shipping.jpg
free shipping.jpg999×386 19 KB

2

@emilianogr

Which theme you are using ?

3

Follow this:

  1. Section->product-template.liquid->find {% if product.compare_at_price_max > product.price %} and paste bellow code after this condition
<div class="free_ship"><img width="50px" src="https://cdn0.iconfinder.com/data/icons/e-commerce-69/512/delivery-512.png"><span style="font-size: 20px;padding-left: 5px;">Free Worldwide Shipping</span></div>

Note: Change image with your image and text

4

@emilianogr

You need the following code.

<div class="free-shipping">
  <img src="https://cdn.shopify.com/s/files/1/1010/7028/files/1628840-delivery-truck-free-icon-delivery-truck-png-png-512_512_preview_100x.png?3464" alt="" class="free-shipping__img">
  <span class="free-shipping__text">FREE Worldwide Shipping</span>

  <style scoped>
    .free-shipping{
      padding-top: 10px;
      padding-bottom: 10px;
      text-align: center;
    }
    .free-shipping__img{
      vertical-align: middle;
      max-width: 40px;
      display: inline-block;
      margin-right: 5px;
    }
    .free-shipping__text{
      vertical-align: middle;
      display: inline-block;
      font-size: 17px;
    }
  </style>
</div>

Check my video where I am showing where to put it.

The result is going to be as in the next screenshot:

8EVnYhu
8EVnYhu565×220 8.66 KB

2 Likes
5

I used a combination of the above and this post: https://community.shopify.com/c/Shopify-Design/Remove-texts-quot-shipping-calculated-at-checkout-quot-in/td-p/485302/page/2

Simplest way for me was to edit the language:

  1. Go to Online Store > Actions > Edit Languages > Products > Shipping policy html field

  2. Remove the text (probably <a href={{link}}">Shipping calculated at checkout)

  3. Add:

<img width="**50px**" src="**icon url**"> FREE Worldwide Shipping

**Change the values between " " to your personalized settings. You can upload an icon of a truck into your files (Settings > Files) and grab the url from there.

2 Likes
6

This worked really well for my site! Thank you for the solution. I was just wondering, how could I browse more emoji-type images like the delivery truck you have here? I see the the link points to a shopify related URL so there must be more of them.

Thanks!

7

Hey There

Thanks this was really helpful.

Can you help me with some code to only display this on products above a certain price?

Thanks for your help

Ash

8

How do I see the video you’re talking about?

9

Did not work

Marcoo_0-1597214373270.png
Marcoo_0-1597214373270.png510×196 12.3 KB

10

is the method the same for the empire theme, I have tried to do but can you pls guide where I can add the same code, it would be very helpful for me thnkz

11

Hey Amna, did you figure out the free shipping for your empire products?

12

Works Great for me!

How can we add another 2 badges in line with the first one?

Where can we find photos for badges like that one with the truck?

Thanks.

13

E6B1E928-38C0-48DD-83DF-A849AA6FF8F0.png
E6B1E928-38C0-48DD-83DF-A849AA6FF8F0.png1242×2688 346 KB

14

How I can add free shipping badge to each products for empire theme

15

Hello! Thank you so much- this code worked. The only issue is that it is showing up for ALL of the products in our catalog. Some of our products DO NOT include free shipping. How can we have it so the badge only shows up for those products that include free shipping? Thank you!