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

[Anonymous]

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

[Dan-From-Ryviu]

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

[Anonymous]

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

Thank You!!

[Dan-From-Ryviu]

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. 

[truelady]

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.

[gr_trading]

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

[Anshul_arora]

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.

- https://apps.shopify.com/product-labels-badges
- https://apps.shopify.com/product-labels-by-bss
- https://apps.shopify.com/product-labels
- https://apps.shopify.com/product-labels-badges-samita
- https://apps.shopify.com/magic-badges-myshopkit

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

Thank you.

[gr_trading]

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

[KabirDev]

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

[epicbuilds]

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 %}
        <style>
          .card__badge {
            justify-self: center;
          }
          .badge {
            border-radius: 5px;
            font-size: 1.75rem;
          }
        </style>
      <div class="card__badge">
        <span class="badge" style="color: {{ label['TEXT_COLOR'] }}; background-color:  {{ label['LABEL_BG_COLOR'] }}">
          {{ label['TEXT_VALUE'] }}
        </span>
      </div>
      {% 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

[newbie203312]

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

[vecksel]

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.

[gr_trading]

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