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

Shopify Product Labels with Metaobjects: Advanced Color-Coded Badges, No App

We will create custom product labels and badges in Shopify without any app using metaobjects and metafields, giving you full colour control with a colour picker and 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:

Need help setting this up? View my Shopify services, I can implement this and other custom features for your store.

Reviews

☆☆☆☆☆ No reviews yet