How to add a free shipping badge to selected products in Sense Theme?

Solved

How to add a free shipping badge to selected products in Sense Theme?

bellat
Visitor
3 0 0

I have certain products with free shipping in my store. For these products I would like to add something that has a truck image (I already have this image as a png file) and text that says Free AU Shipping. I would like to be able to add it to the product card under the item name as well as under the price when you click through to the full product description. I have tried many of the other answers with codes however cannot get it to look how I want or when I did it was applying it to all products not just the ones I have tagged with free-shipping. Would appreciate any help! 

Accepted Solutions (2)
Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

Please go to your specific product and add "free-shipping" tag.

Please go to Admin panel -> Content -> Files and upload your PNG file here. After uploading, Copy the Image URL by clicking on the link icon.

Now, 
Please go to
1) Online store
2) Themes -> Edit theme
3) Snippets
4) card-product.liquid and find the highlighted code as shown in the Screenshot. Paste this code as shown in the screenshot.

{% if card_product.tags contains 'free-shipping' %}
          <div class="free-shipping-badge-parent">
            <img src="YOUR PNG IMAGE URL" style="width: 50px; height: 50px;"/>
          </div>
        {% endif %}


 Screenshot_120.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

Please go to Sections -> main-product.liquid and there, you can find for loop starting from line no 71 to 436 as shown in the screenshot. It is for displaying different elements like Price, title, and reviews. 

If you want to place free shipping below Price, then you can place the code in the {%- when 'price' -%}

Similarly, If you want to place free shipping below title, then you can place the code in the {%- when 'title' -%}

Please place below code.

{% if product.tags contains 'free-shipping' %}
          <div class="free-shipping-badge-parent">
            <img src="YOUR PNG IMAGE URL" style="width: 50px; height: 50px;"/>
          </div>
        {% endif %}

 

Screenshot_121.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 7 (7)

Hardik29418
Shopify Partner
2913 419 1081

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
bellat
Visitor
3 0 0

Hi There, 

Thank you! Website is https://thebambinoplace.com.au/

The password is Bellat

Appreciate you looking into it for me! 

Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

Please go to your specific product and add "free-shipping" tag.

Please go to Admin panel -> Content -> Files and upload your PNG file here. After uploading, Copy the Image URL by clicking on the link icon.

Now, 
Please go to
1) Online store
2) Themes -> Edit theme
3) Snippets
4) card-product.liquid and find the highlighted code as shown in the Screenshot. Paste this code as shown in the screenshot.

{% if card_product.tags contains 'free-shipping' %}
          <div class="free-shipping-badge-parent">
            <img src="YOUR PNG IMAGE URL" style="width: 50px; height: 50px;"/>
          </div>
        {% endif %}


 Screenshot_120.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
bellat
Visitor
3 0 0

You are a genius! Thank you so so much! If I wanted to add the same thing then to the actual product page (for example under the price) how would I go about that? I am so appreciative of your assistance! Screenshot 2023-09-14 194733.jpg

Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

Please go to Sections -> main-product.liquid and there, you can find for loop starting from line no 71 to 436 as shown in the screenshot. It is for displaying different elements like Price, title, and reviews. 

If you want to place free shipping below Price, then you can place the code in the {%- when 'price' -%}

Similarly, If you want to place free shipping below title, then you can place the code in the {%- when 'title' -%}

Please place below code.

{% if product.tags contains 'free-shipping' %}
          <div class="free-shipping-badge-parent">
            <img src="YOUR PNG IMAGE URL" style="width: 50px; height: 50px;"/>
          </div>
        {% endif %}

 

Screenshot_121.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
DBGG
Excursionist
19 0 0

Can you help me - I have a premium Theme "X" theme. I want to add a next day delivery image below the add to cart/buy now button. I tried following the above and it doesnt match the options I have in my theme

LetsGetDigital
Shopify Partner
46 0 51

Simply add an HTML block below the 'Buy buttons' block in your theme customisation. 

 

Screenshot 2024-06-05 at 13.01.35.png

Let's Get Digital (dot net)