How can I add 'New' badges in Refresh Theme like Sale badges?

[erinnorris]

Our company is using Refresh Theme and we want to add "New" badges matching the style of the Sale badges on products we tag "new." 

I have tried adding an elsif to the card-product liquid file in the card__badge div after line 339 (in the same section as the Sold Out and Sale badges) using the logic

{%- elsif card_product.tags contains "new" -%}
<span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme}}">New</span>

however this is not working. 

Can anyone help me correct this code or edit the correct file? 

[PaulNewton · Accepted solution]

Using the dawn reference

https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L123 

The code should look like this

{%- if card_product.available == false -%}
  <span
    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
    class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
  >
    {{- 'products.product.sold_out' | t -}}
  </span>
{%- elsif card_product.tags contains "new" -%}
  <span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme}}">New</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
  <span
    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
    class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
  >
    {{- 'products.product.on_sale' | t -}}
  </span>
{%- endif -%}

Beyond that you'd have to provide more line of code for context or someone would have to debug it.

If you need this customization finalized then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

[erinnorris]

Thanks so much! I just got these working on the product cards. I was using the correct snippet of code (that matches the one you shared), but there turned out to be a second block of code impacting the badges around line 122 in the product-card.liquid file that needed to be modified instead of the one at line 339 that I'd been working with before.

They're currently only displaying on the cards, which I'm happy with, I'll be working on getting them to display on the product detail pages as well.

[erinnorris]

These forum posts have been super helpful, so I'm sharing my product page solution for Refresh in case anyone is looking for it: 

In price.liquid below the last endif but above the closing div tag

{%- if product.tags contains "new" -%}
    <span class="badge price__badge-new color-{{ settings.sale_badge_color_scheme }}">
      New
    </span>
  {%- endif -%}

In component-price.css add ".price .price__badge-new," to the list of variables on line 57 and 60. 

In component-card.css add (anywhere) 

.card-information .price .badge {
  display: none;
}

This will style the badges exactly like the sale badges. If you want to give the "new" badges their own styling, you can duplicate the "badge" class in base.css, rename it something like "badge-new", and edit the attributes as you wish. then change all three instances of the class "badge" to your styled "badge-new" class

(That is, change to class="badge-new badge... in both price.liquid and card-product.liquid and change to .card-information .price .badge-new in component-card.css). 

[HELDERWRLD]

Hello @PaulNewton 

Do you know how can i make it like this? Please, I want to add badges on my products exactly like the zegna site.

my store: https://diversusoficialsite.myshopify.com/
password: diversusoficial

[PaulNewton]

Hi @HELDERWRLD along with being a badge customization , it's also like a product-subtitle customization for the product description page.

If you need this customization done for you then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[HELDERWRLD]

my store: https://diversusoficialsite.myshopify.com/
password: diversusoficial

My theme is Dawn, can you help me please?