Add Free shipping below the price

[emilianogr]

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

[sarhov]

@emilianogr 

Which theme you are using ?

[Riyva]

 

[Riyva]

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

[Jasoliya]

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

[sarhov · Accepted solution]

@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:

[skymc]

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

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</a> 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.

[Marcoo]

Did not work

[LeoT_]

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!

[ashsexberg]

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

[bawse_mann]

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

[amna]

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

[adunnis]

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

[Alexm24]

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.

[beyondt]

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!