More from Martin Sojka

Shopify Liquid: Dynamic Free Shipping Bar Automatically generate two-word slugs in Ruby on Rails Storing & querying IP addresses efficiently in Ruby on Rails Detecting and storing user's timezone in Ruby on Rails automatically

RSS

Custom product badges based on tags in Shopify Liquid

27 views

0 comments

                  <div class="product-card">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
    {% render 'product-badge', product: product %}
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </a>
</div>

                  {% if product.tags contains "bestseller" %}
  <span class="badge badge-bestseller">Bestseller</span>
{% elsif product.tags contains "new" %}
  <span class="badge badge-new">New Arrival</span>
{% elsif product.compare_at_price > product.price %}
  <span class="badge badge-sale">Sale</span>
{% endif %}

This setup separates the product badge logic into its own snippet product-badge.liquid, making it reusable across different sections like product listings and featured collections. The product-card.liquid section renders the badge alongside the product info.

Martin Sojka

More from Martin Sojka

Custom product badges based on tags in Shopify Liquid

0 Comments

More from Martin Sojka