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

Shopify Discussion
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