Need Help With Your Shopify Store?

I'm a Shopify expert developer working as a solo specialist. When you reach out, you work directly with me, no project managers or middlemen.

If you need help with Shopify development, improving conversions, or increasing your store’s average order value, feel free to message me on WhatsApp for a quick response.

We can work through Upwork or you can pay securely via Payoneer.

Message me on WhatsApp

Create Custom Product Labels and Badges in Shopify Without Any App

We will create custom product labels and badges in Shopify without any app using metafield and metaobject with a few lines of code.

Steps

1. Go to store settings → Custom Data

2. Add Metaobject definition named as Label

   • Add Single line text field named as Title (should use one value)
   • Then add a color field named as Color

3. Add Products Metafield definition named as Labels

   • Select the type as MetaObject and reference as Label metaobject
   • Select list of entries

4. Create a snippet named as: product-label.liquid

   • Use the following snippet:

   {% assign labels = product.metafields.custom.labels.value %}
   
   <div class="product-labels">
     {% for label in labels %}
       {% assign background_color = label.color %}
       {% assign color_string = "" | append: background_color %}
       {% assign text_color = color_string | color_lighten: 100 %}
       <small class="product-label" style="background-color: {{ background_color }}; color: {{ text_color }};">
         {{ label.title }}
       </small>
     {% endfor %}
   </div>

5. You can render the badge using this line in product-media-gallery.liquid:

   {%- render 'product-label', product: product -%}

6. You can paste this css in product-media-gallery.liquid:

   
   <style>
     media-gallery, .product__media-wrapper {
       position: relative;
     }
     .product-labels {
       position: absolute;
       top: 0;
       right: 0;
       z-index: 10;
       display: flex;
       flex-direction: column;
       align-items: end;
       gap: 5px;
     }
     .product-label {
       padding: 2px 5px;
       text-transform: uppercase;
       text-align: center;
       font-weight: bold;
       width: fit-content;
     }
   </style>

7. In the card-product.liquid, you can render like this:

   {%- render 'product-label', product: card_product -%}

8. and you can use following css in card-product.liquid:

   <style>
     .product-card-wrapper {
       position: relative;
     }
     
     .product-labels {
       position: absolute;
       top: 0;
       right: 0;
       z-index: 10;
       display: flex;
       flex-direction: column;
       align-items: end;
       gap: 5px;
       
     }
     .product-label {
       padding: 2px 5px;
       text-transform: uppercase;
       text-align: center;
       font-weight: bold;
       width: fit-content;
     }
   </style>

Video Tutorial

Watch the step-by-step video tutorial here:

Need Help With Your Shopify Store?

I'm a Shopify expert developer working as a solo specialist. When you reach out, you work directly with me, no project managers or middlemen.

If you need help with Shopify development, improving conversions, or increasing your store’s average order value, feel free to message me on WhatsApp for a quick response.

We can work through Upwork or you can pay securely via Payoneer.

Message me on WhatsApp