Add a custom badge based on Product Tags

Matthew_Hapgood
New Member
8 0 0

Hi guys. 

I want to add a badge overlay for my products entitled 'Web Exclusive' . I've been trawling the forums for a solution but my coding skills are pretty much zero and now I am stuck. 

Basically I want to use the same badge as the 'Sale' one (same style as my theme etc) but change the text to match whatever I specify in the product tag box - in this case, 'Web Exclusive' - there will never be an instance when a web exclusive product will be on sale (I hope).

I'm guessing I can add a snippet in product-grid-item.liquid  

Any help would be greatly appreciated! 

Cheers, Mat

0 Likes
Jason
Shopify Expert
10037 119 1872

Hey Matthew,

It's possible that product-grid-item.liquid is the file you need to edit but without extra details, more specific advice will be hard to give. The forum members would really want to know what theme is in use (and ideally, also be able to see the site in action). Your store is locked at the moment so that makes trying to figure those things out harder.

What theme are you using?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Matthew_Hapgood
New Member
8 0 0

Hi Jason. 

Thanks for the speedy reply! I am using the Minimal theme and my storefront password is 'blohlt'

The site is still in development though! 

Thanks again, Mat

0 Likes
Jason
Shopify Expert
10037 119 1872

For that theme you should see something that looks like this in product-grid-item.liquid:
(do note that your version might be different so be don't look for an exact match)

{% if on_sale and settings.collections_show_sale_circle %}
  <span class="badge badge--sale">
    <span class="badge__text">{{ 'products.product.sale' | t }}</span>
  </span>
{% endif %}

You should be able to adjust the conditional statement - and by that I mean the if statement:

{% if on_sale and settings.collections_show_sale_circle %}

{% endif %}

So that it's more like this:

{% if on_sale and settings.collections_show_sale_circle %}
   ...(your existing code)
{% elsif product.tags contains 'Web Exclusive'%}
  <span class="badge badge--sale">
    <span class="badge__text">Web Exclusive</span>
  </span>
{% endif %}

If you're not 100% confident with editing you can always duplicate theme and test these edits in that first. Saves breaking the main theme during testing times.

Cheers,
Jason.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Matthew_Hapgood
New Member
8 0 0

Thanks Jason. I am a complete beginner so may need a little more hand-holding! 

Here goes...

some existing code is this....

{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

So I have edited it for my 'web exclusive' tag


{% assign web_exclusive = false %}
{% assign webexlusive_text = 'products.product.webexclusive' | t %}
{% if product.tags contains 'Web Exclusive'%}
  {% assign web_exclusive = true %}
{% endif %}

then I get stuck!

So I copied this bit,
      {% if on_sale and settings.collections_show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>

and edited it a bit...             
                {% if web_exclusive and settings.collections_show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text">Web Exclusive</span>{% endif %}{{ 'products.product.webexclusive' | t }}</span>

And now I'm super stuck! 

0 Likes
smallwallets
Tourist
4 0 0

Thank you for sharing  Jason, this has solved an issue I have been working on which is great.

0 Likes
maximus1
Tourist
4 0 2

Thank you Jason! Very helpful.

0 Likes