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)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay