How to add labels like NEW , BEST SELLER to my products page

Shopify Discussion

Topic summary

A user wants to display product labels (like “NEW” and “BEST SELLER”) on their Shopify store’s product pages. They’ve already added tags to products but the labels aren’t appearing.

Solutions offered:

  • App-based approach: Multiple free Shopify apps recommended for adding product badges without coding (Product Labels & Badges, BSS Product Labels, Magic Badges, etc.)

  • Code-based solutions:

    • Edit main-product.liquid or card-product.liquid files
    • Use Liquid code to check for product tags and display custom HTML badges
    • Add CSS styling to position and format the labels
    • One advanced solution uses JSON metadata for dynamic, customizable badges with configurable colors and text

  • Built-in option: Edit Default Theme Content under Online Store > Themes to set a universal “On sale” label (applies to all sale items)

Additional requests:

  • One user asks how to create dynamic sale labels showing discount amounts (e.g., “Save $300”)
  • Another seeks help scoping badges to specific tags rather than date-based logic

The discussion remains open with various technical approaches shared, ranging from no-code apps to custom Liquid/CSS implementations.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Is there any way to add labels like New , Best Seller to my products page in my website like this

I have added the tags New and Best Seller to the products , but still it is not showing. Please do assist.

SITE URL :: https://itpp637zlcr0qbo1-71493648693.shopifypreview.com

Label.jpg
Label.jpg1802×445 59.5 KB

2

Hi @Anonymous

You can use an product labels app or customize your code to do that.

If you do not know how to code, you can find an app from here

https://apps.shopify.com/search?q=product%20label

3

Can you share the code for that or tell me where to edit the code .

Thank You!!

4

I can’t give you the code but I can tell your steps.

Add tag new or best-seller for products that you want to show badge, go to your product list liquid file, add code to check if product contain those tags, add custom HTML badge and then you need to add customize CSS code to make badge appear in place that you want.

5

Hello @Anonymous ,

I understand that you are looking to display the New & Best seller labels/badges on the products listed on Product Listing page.

Shopify App store provides some of the Free app for implementing the labels/badges on the products.

Kindly take a look and let me know if it helps you.

Thank you.

6

Hi @Anonymous

Edit your main-product.liquid file put the below code to show the tag.

{% for t in product.tags %}

{% if t contains ‘bestseller’ %}

Bestseller

{% endif %}

{%

endfor %}

You can place multiple if statement for different tags.

Hope this will help…

7

For anyone looking for a solution for new label without any app, you can check this video https://youtu.be/xGVtvlJT8Y4?si=bphndAZeAoiJTU7a

1 Like
8

Hi There,

it may be a bit to technical for you but I solved this issue by using JSON meta-data on the product.

The metadata is setup as folllows:

[
  {
    "LABEL_BG_COLOR": "#E40E3A",
    "TEXT_COLOR": "#FFFFFF",
    "TEXT_VALUE": "AMD Radeon"
  },
  {
    "LABEL_BG_COLOR": "#F16911",
    "TEXT_COLOR": "#FFFFFF",
    "TEXT_VALUE": "AMD Ryzen"
  },
  {
    "LABEL_BG_COLOR": "#000000",
    "TEXT_COLOR": "#FFFFFF",
    "TEXT_VALUE": "WiFi"
  }
]

I then loop through this JSON metafield from the ‘card-product.liquid’ file:

{% assign label_data = card_product.metafields.custom.labels %}
      {% for label in label_data.value %}
        
      
        
          {{ label['TEXT_VALUE'] }}
        
      

      {% endfor %}

This way I can dynamically add, change and remove badges from my products. I can even manage the badge’s background-color, text-color and text alll from the product view.

You can see the output of my code here: https://epicbuilds.nl/collections/game-pc

Hope this helps.

Regards,

Tom

9

can you explain more how can i create app to do that

10

Go to Online Store > click on Themes > click the three dots to the left of Customize > Edit Default Theme Content

Under Products, look for “On sale” and enter the label you’d like to appear.

Note: this will apply the same label to every item that’s on sale. If you want to apply unique labels, you’d want to edit the product image so that the label appears on the image or you’ll need to find an app.

11

Hi @Anonymous

Please refer to the below video to implement the badges on product as well as product card.

Hope this will help.

{% for t in product.tags %}

{% if t contains ‘bestseller’ %}

Bestseller

{% endif %}

{%

endfor %}

You can place multiple if statement for different tags.

Hope this will help…

12

how to add compare price as a sale label like when i put 300 discount price. The sale label should be save300 and so on with other products.

13

Hi @truelady ,

You can put this text as badge text if you are using our code to enable badge. Request you to refer below URL.

Code is free to use

https://youtu.be/ezjrJZs4x1c

14

'm hoping you can help me scope the badge to show up just for products with a specific tag, as opposed to based on a dynamic date.

As of right now, I have

{% assign current_timestamp = ‘now’ | date: ‘%s’ %}
{% assign product_created_timestamp = card_product.created_at | date: ‘%s’ %}
{% assign days_old = current_timestamp | minus: product_created_timestamp | divided_by: 86400 %}
{% if days_old < 30 %}

New for 2025
{% endif %} in card-product.liquid

and

/NEW FOR 2025/
.new-label {
position: absolute;
top: 20px;
right: 20px;
background-color: #F86166;
color: #fff;
z-index: 10;
border-radius: 4rem;
display: inline-block;
font-size: 1.2rem;
line-height: 1;
text-transform: uppercase;
padding: 0.5rem 1.3rem 0.6rem;
text-align: center;
word-break: break-word;
}

in base.css