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

[bellat]

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! 

[Hardik29418 · 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 %}

 

[Hardik29418]

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.

[bellat]

Hi There, 

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

The password is Bellat

Appreciate you looking into it for me! 

[Hardik29418 · 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 %}

 

[bellat]

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! 

[Hardik29418 · 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 %}

[DBGG]

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]

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