Adding A New Badge based on Tags - Dawn Theme - Shopify 2.0

[MrGrif]

Hi everyone,

I have been attempting to add a badge based on tags. I had previously done this in the Debut theme, but have begun upgrading to Dawn for Shopify 2.0 and cant seem to get the code to work correctly on Dawn theme.

This was to add a badge based on a tag given to a product, in my case "NEW" would be added to the product card for products that are tagged with NEW. 

Within Dawn Theme Code editor I have tried.

In > product-card.liquid

Within the div : <div class="card.inner">

<div class="card__badge--new">
  {% for tag in product.tags %}
    {%- if current_tags contains 'NEW' -%}
      <span> NEW! </span>
     {% endif %}
   {% endfor %}
</div>

With CSS within component-card.css

.card__badge--new {
 background: black;
 color: white;
 border: 2px solid var( — color-base-background-1);
 margin-top: 1em;
 padding: 0.3em 0.5em;
 z-index: 9;
 position: relative;
 font-size: 0.875em;
}

I did notice within the product-card.liquid there was no link to the component-card.css stylesheet - im not sure if this was required, but I also added along side the current stylesheet code, the component-card.css stylesheet link at the top.

{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}

 

To further develop the "NEW" badge - I would of liked to of done it with a timer and publishing date, so the product would contain new for 2 - 3 weeks after publishing but disappear after that. That would reduce maintain of removing badges on now, old stock. Though I haven't gotten to that point just yet, I cant even get the current tag to appear in the browser yet! 

Any help or guidance would be appreciated. 

[MrGrif · Accepted solution]

Hey, I think i have figured it out as its now working for me on the product collection/grid now.

In product.card.liquid

On line 89 after the sold out / sale badge logic.

I wrote:

<div>
 {%- if product_card_product.tags contains "NEW" -%}
  <span class="card__badge--new">NEW</span>
 {%- endif -%}
</div>

and for the css in component-card.css at the bottom of the file.

.card__badge--new {
  position: absolute;
  display: inline-block;
  line-height: 1;
  text-align:center;
  font-size: 1.2rem;
  left: 1rem;
  top: .5rem; 
  background-color: black;
  color:white;
  padding: .6rem 1.3rem;
}

Remember that i also linked in css file in product-card.liquid using the below at the top of the file underneath the other stylesheet link.

{{ 'component-card.css' | asset_url | stylesheet_tag }}

 

Let me know if this works for you!

[jason3w · Accepted solution]

For the Dawn theme, we need the following code replacement. 

<div>
            {%- if card_product.tags contains "NEW" -%}
  			<span class="card__badge--new badge badge--top-left">NEW</span>
 			{% endif %}
		  </div>

[user14]

I'm in the same boat. I can't figure out to have it on top of the image.

[MrGrif]

hey,

Did you manage to get the badge to appear based on a tag? Could you share your logic code info...? Thanks!

[MrGrif · Accepted solution]

Hey, I think i have figured it out as its now working for me on the product collection/grid now.

In product.card.liquid

On line 89 after the sold out / sale badge logic.

I wrote:

<div>
 {%- if product_card_product.tags contains "NEW" -%}
  <span class="card__badge--new">NEW</span>
 {%- endif -%}
</div>

and for the css in component-card.css at the bottom of the file.

.card__badge--new {
  position: absolute;
  display: inline-block;
  line-height: 1;
  text-align:center;
  font-size: 1.2rem;
  left: 1rem;
  top: .5rem; 
  background-color: black;
  color:white;
  padding: .6rem 1.3rem;
}

Remember that i also linked in css file in product-card.liquid using the below at the top of the file underneath the other stylesheet link.

{{ 'component-card.css' | asset_url | stylesheet_tag }}

 

Let me know if this works for you!

[coffeetablemags]

Hi @MrGrif,

thank you so much for your code!

It works perfectly fine. But there only on the desktop. When I switch to mobile, there is no badge, but a “new” underneath the picture. You can have a look at my online shop:

www.coffeetablemags.de

Do you have a solution for this problem, so the badge looks the same on any device?

Many thanks!

Best,

Thorsten

[MrGrif]

Hi Thorsten, looks like you resolved that.

[Nico38]

possible tutorials step by step ?

[jason3w · Accepted solution]

For the Dawn theme, we need the following code replacement. 

<div>
            {%- if card_product.tags contains "NEW" -%}
  			<span class="card__badge--new badge badge--top-left">NEW</span>
 			{% endif %}
		  </div>

[Miche88]

Thanks a lot, this works!

[MrGrif]

see @VUMODigital solution on badges for Dawn themes using the most recent version (v.5 at time of this post released on April 19th 2022)

You may not receive an option to update your theme if you have used custom code in your theme. You will need to "Add New Theme" and start from scratch to work on the latest version of DAWN

[dmadrid6891]

Looks like it's broken again with v.6. I can't style the badge 😞 The badge displays with plain text only.

[MrGrif]

Hi, have not tried 6.0 but do ensure that the style sheet is linked and labelled corectly in the header of the page and the css style is within that file that you have linked . Let us know if that helps!

[VUMODigital]

Hi again,

I recently updated a Dawn theme to v6.0.2 and transposed the same code I used above - all working as expected.

Kindest

Monty 

[KFORREST]

Can the first solution be implemented for the Supply Theme and if so, which files?  I tried but had a hard time figuring out which file needed to be changed. Thanks.

[Rosierose]

Hi, I tried entering this. and had no luck. perhaps it is because I entered the first part in card-product.liquid which is slightly different form what you had, but the closest I could find.

[tatumutv]

I'm having similar issues. The badge is working and showing up but only on the first product on the page with "More Options" but I have about 10 other products on the page where the badge doesn't show up. Can anyone help? Thank you!

[MrGrif]

Hey,

So the above worked based on a tag the the product would have .

In my case, I would tag a product with NEW (Case Sensitive) and any product with that tag would display the badge.

Does your other products have the tag you have chosen and are the tags correctly cased? i.e. new is now the same as NEW in my case. 

[VUMODigital · Accepted solution]

Hi there,

A great question and I've been working on this v recently to find a revised solution for the most recent update to Dawn 2.0.

Here we go:

1. Head to theme/edit code
2. Locate card.product (you'll find it in snippets) - this is different to product.card (which I suspect was in earlier versions, but just a guess)
3. Locate <div class="card__badge {{ settings.badge_position }}"> (around line 90)
4. Before the div ending with {%- endif -%}, add the following code to a fresh line above

            {%- elsif card_product.tags contains 'framed' -%}
              <span class="card__badge--framed">{{ 'Framed' }}</span> 

• You should replace 'framed' with the tag that you wish to pick up in the logic.  
• You should also replace 'Framed' (on the second line between the double curly braces)  with the actual text that you want to appear in the badge.
• Once done, save the file.  Your code should look similar to this

<div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>       
            {%- elsif card_product.tags contains 'framed' -%}
              <span class="card__badge--framed">{{ 'Framed' }}</span>            
            {%- endif -%}
          </div>

• Now open the base.css file within the theme code

Add the following code to the bottom of the file.  Be sure to make sure that the class is the same as in the liquid code you entered above (in this case it is .card__badge--framed).  This code is based on what you originally wrote 🙂

.card__badge--framed {
  position: absolute;
  display: inline-block;
  line-height: 1;
  text-align:center;
  font-size: 1.2rem;
  left: .5rem;
  top: .5rem; 
  background-color: #9fb18e ;
  color:white;
  padding: .6rem 1.3rem;
}

• Style as you wish
• Now check that the products you have tagged with the term above are now showing the badge (head to a collection to view this).
• For a live example, head to mapelio.com (I've added the badge 'Framed' to denote that a product is delivered framed)

Hope this helps

Monty

[johnlemon]

Big thanks to @VUMODigital ! Finally got it working again after upgrading to Dawn 5.0!! The older version is not working with it some how. I  added your last code to component-card.css instead of base.css and it works fine as well.

[VUMODigital]

Hi John,

Delighted to hear that it worked for you!

Kindest regards

Monty - VUMO Digital

[petitlaurierco]

@VUMODigital 

Hi !! I tried your proposed solution and had to make a few changes because it wasn't properly working for me. Now, I have a few problems I don't know if you can help me with:

1- The badge isn't at the top left like I wanted

2 - It says ''translation missing''

Here's the code I used :

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- elsif product_card_product.tags contains 'Nouveauté' -%}
<span class="badge badge--top-left color-{{ 000000 }}">{{ 'Nouveauté' | t }}</span>
{%- endif -%}
</div>

Can you advise on what the issues might be?

thank you!

[hypnotize]

Hi. How are you?

I did the same as you wrote here, now its showing in my products the badge, but do you know how I can change the back colour? I add one photo, for you see how it is showing, but I can't see very well.

If you can help me I appreciate.

Thanks

[missjo13]

Very helpful, thanks Monty!!

[missjo13]

Is there a way to add badges on the image on the individual product page (not on the collection page)?  I've managed to add text into the product image thumbnail, but ideally I would like for a badge to sit within a the top-lefthand corner of the image so I can format this badge.  I'm using theme Dawn 5.0.  Thanks!

[mrprompts3]

Thank you so much for this input. You saved me!!!! 

[attractswimwear]

Hey VUMODigital!

I've been trying to solve this issue for a while and your solution has done it! I'm ecstatic. Thank you. I'm wondering though. How do you adjust its position? Is there a way to match the spacing of the built-in badges in terms of the location on the image from the top and left edges of the product card? 

[VUMODigital]

Hi Attractswimwear,

Thanks for your kind reply and yes, you will be able to move the location of the badges by making adjustments to the css code in the solution above.

Let me know how you get on!

Kindest regards

Iain

[attractswimwear]

Hey VUMODigital, I figured out how to move it around. I'm now trying to figure out how you can add the badge to the Product page as well. The default Sale or Sold Out Badge does this in the default theme.

[VUMODigital]

Hi there,

Really pleased to hear that you were able to reposition the badge.

Regarding adding badges to the product page, I'm afraid that this solution only covers the collection grid and it would require custom code to add badges to individual images on a product page.

If that is something you need help with, please email me via the link in this footer and we can get a quote over to you for the work.

Kindest regards

Iain 

[attractswimwear]

How do you add the badge to the product page as well? Thanks for your help in advance!

[Waseem25497]

This worked, but it just shows up as text. How do I put the text in a label? like a white colour label background? Thank you

[VUMODigital]

Hi Waseem,

To style the badge, you'll need to jump into your css files and change the background-colour of the element to #ffffff.

Kindest regards

Iain

[Waseem25497]

Thank you but this doesn't work. It stays black, even the font size will not change and line height does nothing, I am not updated to the latest dawn as my landing page breaks if I update

[Stef90]

Hii code works great, but when I have a product with multiple badges (like on sale that is a standard Dawn badge and a badge bases on tags) only one will appear, the standard dawn badge. 

[KabirDev]

You can check this video https://youtu.be/xGVtvlJT8Y4?si=bphndAZeAoiJTU7a to add new tag in the product cards.

[DChronicles]

I have the same problem however, we are using a custom theme. Any insights? I can't find the product.card.liquid on the theme.

[missjo13]

I ended up giving up and installing a badges app to support my needs

[KFORREST]

https://community.shopify.com/c/shopify-design/using-metafield-to-define-a-badge-on-product-grid-in-...

Hopefully this helps. Support should be able to identify if this code can
be used for your theme and which file.

[DChronicles]

Thank you so much! Will give it a try.

[gr_trading]

Hi @MrGrif ,

We came with another easy solution for adding multiple tags without editing too much code in the theme.

Hope this will help others too.