How to add "New" badge for product on refresh theme

[dngmanblack]

Hi! I want to add “new” badge like “sale” badge but I have no idea how to do that. Anyone can helps me? I use refresh theme

[KabirDev]

To add a “New” badge alongside the “Sale” badge in your Shopify store using the Refresh theme, you’ll typically need to edit the theme’s Liquid files. The general steps include:

1. Edit Product Template: Access the product template Liquid file (like product.liquid or a relevant snippet) in your theme.

2. Add Logic for ‘New’ Badge: Implement a condition to check if a product is new (based on criteria like the date added) and display a “New” badge. This might involve adding a new div or span with a class for styling.

3. Style the Badge: Use CSS to style the “New” badge, similar to how the “Sale” badge is styled.

If you’re not comfortable editing theme files, consider consulting with a Shopify expert.

[dngmanblack]

I want to add “New” badge by tag

[KabirDev]

In that case, the process will be almost same. You can utilize the below liquid code to the correct liquid file like product-card.liquid

{% if product.tags contains 'New' %}
  New
{% endif %}

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open card-product.liquid file, find this line of code around line 122 of file

Add this code right after and save file

{%- if card_product.tags contains 'New' -%}
  New
{%- endif -%}

[Niki_K]

Hi @dngmanblack ,

if you haven’t solved the “New” tag issue yet, I can recommend following one of my articles, where I explain how to add product labels on the product page as well as collection page (on product cards). I used Dawn theme when writing the guide, but the logic is the same.

Here’s the link: How to add a custom label to the main product image on a product page, collection page and a featured collection?

Hope this helps!

[dngmanblack]

It’s worked! But it just appeareed on collection page. How to show it on every product that I gave them a tag. And can you show me how to custom this code to (padding, color. etc…)

[dngmanblack]

I’m so sorry, but I have no experience about coding

[Dan-From-Ryviu]

You can make it appear in the product by adding code to price.liquid, find this line of code

{%- if show_badges -%}

Add this code under

{%- if product.tags contains 'New' -%}
      New
    {%- endif -%}

You can custom color, padding by adding inline CSS example like this

{%- if product.tags contains 'New' -%}
      New
    {%- endif -%}

[dngmanblack]

Hi Dan!

I appreciate your hard work for helping me, I want this “new” badge position above price

[martijn18]

When you do this, the badge appears immediately behind the price (see example). How can I add a little space in between?

[Dan-From-Ryviu]

Hi @martijn18

Please add this additional code after style="

margin-left: 8px;

So it will look like this

[gr_trading]

Hi @dngmanblack ,

Please refer the below video for step-by-step guide to implement the same.

How can I add multiple badges on a product | Dawn customization | free code