How to design custom product labels and badges | Shopify

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

You need to follow the following steps:

• Go to store settings -> Custom Data
• Add Metaobject definition named as “Label” (Shown in figure below)
  • Add Single line text field named as “Title” it should use one value
  • Then add a color field named as “Color”
• Then add Products Metafield definition named as “Labels” (Shown in figure below)
  • Select the type as MetaObject and reference as Label metaobject
  • Select list of entries
• Then create 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>

• Then use the snippet to the product card and PDP gallery and style according to your needs or you can use the following styles:

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