How to add free shipping below product price?

Solved

How to add free shipping below product price?

emilianogr
Excursionist
21 0 6

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

 

free shipping.jpg

Accepted Solution (1)

sarhov
Shopify Partner
504 85 164

This is an 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:
8EVnYhu

View solution in original post

Replies 14 (14)

sarhov
Shopify Partner
504 85 164
Riyva
Tourist
8 0 2

E6B1E928-38C0-48DD-83DF-A849AA6FF8F0.png

Riyva
Tourist
8 0 2

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

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

sarhov
Shopify Partner
504 85 164

This is an 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:
8EVnYhu

skymc
Tourist
4 0 2

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
Excursionist
14 0 3

Did not work

Marcoo_0-1597214373270.png

 

LeoT_
Visitor
3 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

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

amna
Visitor
2 0 0

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
New Member
9 0 0

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

Alexm24
Visitor
1 0 0

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
New Member
4 0 0

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!