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 :

  {% for tag in product.tags %}
    {%- if current_tags contains 'NEW' -%}
       NEW! 
     {% endif %}
   {% endfor %}

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.

[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]

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:

 {%- if product_card_product.tags contains "NEW" -%}
  NEW
 {%- endif -%}

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!

[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.

[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

[jason3w]

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

            {%- if card_product.tags contains "NEW" -%}
  			NEW
 			{% endif %}
		  

[MrGrif]

Hi Thorsten, looks like you resolved that.

[Nico38]

possible tutorials step by step ?

[Miche88]

Thanks a lot, this works!

[VUMODigital]

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
   (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' -%}
              {{ 'Framed' }}

• 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

            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}       
            {%- elsif card_product.tags contains 'framed' -%}
              {{ 'Framed' }}            
            {%- endif -%}
          

• 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

[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

[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 :

{%- if product_card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%} {{ 'products.product.on_sale' | t }} {%- elsif product_card_product.tags contains 'Nouveauté' -%} {{ 'Nouveauté' | t }} {%- endif -%}

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