Add Free shipping below the price

Solved
Highlighted
Tourist
21 0 2

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

 

free shipping.jpg

0 Likes
Highlighted
Shopify Partner
468 85 109

@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
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Shopify Expert
2930 499 673

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted

Success.

Shopify Partner
468 85 109

@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
Messenger: @sarhov
Telegram: @sarhov
1 Like
Highlighted
New Member
4 0 0

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.

 

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