Add Free shipping below the price

Solved
Highlighted
Excursionist
21 0 4

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

 

free shipping.jpg

0 Likes
Highlighted
Shopify Partner
482 86 134

@emilianogr 

 

Which theme you are using ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Shopify Expert
3899 559 935

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 give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Partner
482 86 134

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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
Highlighted
Tourist
4 0 1

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.

 

Highlighted
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!

0 Likes
Highlighted
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

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
Excursionist
14 0 3

Did not work

Marcoo_0-1597214373270.png

 

0 Likes
Highlighted
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

0 Likes