Show product trust badges based on tags

Highlighted
New Member
14 0 0

Hello,

It seems there is not option to display trust badges on top of product images. I believe this is a must have feature and I am not willing to pay an X amount each month for this(I believe I am not the only one!). I have found a way to display a trust badge to all product photos. Can someone take it from here and add a logic to display different badges based on tags?  

Below my solution so far which works great in Supply theme and I believe in every other theme:

  1. Go to Snippets and then product-grid-item.liquid
  2. Find the Div with class="grid-item" (should be on top of the file)
  3. Add style="position: relative" so your Div tag should look like : 
    <div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}" style="position: relative">

     

  4. Right before the Div with class <div class="product-item--price"> add the following div: 
     <div class="round-promo">
          <img class="img-fluid d-block mx-auto" style="opacity:0.95" src="https://a.fsdn.com/allura/p/warranty-query/icon?1452585959" alt="">
      </div>

Then go to:

  1. Assets - theme.scss.liquid
  2. On the bottom of the file add:
.round-promo {
    position: absolute;
    top: -5px;
    right: -10px;
    z-index: 10;
}

And you are done!

The result should look something like this:

I use a 75*75 image in the printscreen, change the image as you want. You might need to adjust top-right values per your needs. This badge will be displayed in all collections and not in products pages. I will send an update for adding a badge to the product page as well.

Now as mentioned can someone take it from here and create a logic for displaying different badges accoring to product tags? 

Thanks

 

0 Likes
Highlighted

Hi John,

Try to put this code. In this case, you list all your trust badge titles and the code checks if they are in a product tag. If so, the code adds it to an image title.

{% comment %}
Set the extension of your trust badge files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}

{% assign my_vendor = 'BudgeName1,BudgeName2,BudgeName3,BudgeName4,BudgeNameN' | split:"," %}

{% for v in my_vendor %}
  {% assign vend = v | strip %}
    {% for tag in product.tags %}
      {% if product.tags contains vend %}
           <img class="img-fluid d-block mx-auto" style="opacity:0.95" src="{{ vend | append: '.' | append: file_extension | asset_url }}" />
          {% break %}
      {% endif %}
    {% endfor%}
{% endfor%}

Add all the trust badge titles (the same as product tags) to this line:

 {% assign my_vendor = 'BudgeName1,BudgeName2,BudgeName3,BudgeName4,BudgeNameN' | split:"," %}


And add images to this badge to Assets (For example, 'BudgeName1.png'. You can change image extension too)

genovawebart-add-trust-badge-img

Hope it helps!)

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
14 0 0

Hello Arthur,

Your solution worked like a charm! Thank you! :)

 

0 Likes
Highlighted
New Member
1 0 0

at the risk of resurrecting a dead thread, is there anyone that can explain how to apply this functionality to the venture theme, it seems quite similar as far as .liquid files etc. but not the same and im terribly new to this scripting language

 

Thanks,

Tim

0 Likes