DEV Community

Saad Saif
Saad Saif

Posted on

How to design custom product labels and badges | Shopify

WATCH THE VIDEO HERE:

How to design custom product labels and badges | Shopify

CODE SNIPPET IS HERE:

{%- 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>
Enter fullscreen mode Exit fullscreen mode

NEED HELP?

You can reach me at my email address: saadgfx97@gmail.com

checkout my original post on my blog

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay