Shopify themes, liquid, logos, and UX
This is an accepted solution.
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:
Which theme you are using ?
How I can add free shipping badge to each products for empire theme
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
This is an accepted solution.
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:
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.
Did not work
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!
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
How do I see the video you're talking about?
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
Hey Amna, did you figure out the free shipping for your empire products?
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.
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!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024