FROM CACHE - en_header

Add Free shipping below the price

Solved
emilianogr
Excursionist
21 0 6

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

 

free shipping.jpg

Accepted Solution (1)

Accepted Solutions
sarhov
Shopify Expert
489 85 167

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

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

View solution in original post

Replies 14 (14)
sarhov
Shopify Expert
489 85 167

@emilianogr 

 

Which theme you are using ?

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

Jasoliya
Shopify Expert
4532 586 1147

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
sarhov
Shopify Expert
489 85 167

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

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

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.

 

LeoT_
New Member
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
New Member
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
New Member
1 0 0

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

Marcoo
Excursionist
14 0 3

Did not work

Marcoo_0-1597214373270.png

 

amna
New Member
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
New Member
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.

Riyva
Tourist
8 0 2
Riyva
Tourist
8 0 2

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

beyondt
New Member
3 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!