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

Not applicable

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

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7990 1560 1583

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

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Not applicable

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

 

Thank You!!

Dan-From-Ryviu
Shopify Partner
7990 1560 1583

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. 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anshul_arora
Navigator
424 121 84

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

gr_trading
Shopify Partner
1822 143 189

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

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

KabirDev
Shopify Partner
248 61 67

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

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com

epicbuilds
Visitor
2 0 0

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
Shopify Partner
1 0 0

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