Shopify Wishlist Tutorial | Guest, Logged In & Shareable Wishlist Setup

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

Go to store settings → Custom Data
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
Add Products Metafield definition named as Labels
- Select the type as MetaObject and reference as Label metaobject
- Select list of entries

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>

You can render the badge using this line in product-media-gallery.liquid:
```
{%- render 'product-label', product: product -%}
```

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>

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

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

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:

Reviews

☆☆☆☆☆ No reviews yet

How to design custom product labels and badges in Shopify

Create Custom Product Labels and Badges in Shopify Without Any App

Steps

Video Tutorial

Reviews