Shopify Product Badge Generator

{%- comment -%}
  Product badges: sale, sold out, new and tag-driven. Render inside a position:relative wrapper around your product image.
{%- endcomment -%}
{%- style -%}
  .ea-badges2{position:absolute;left:.5rem;top:.5rem;display:flex;flex-direction:column;gap:.25rem;z-index:2;pointer-events:none}
  .ea-badge{display:inline-block;padding:.25em .6em;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;background:#111;width:max-content}
  .ea-badge--sale{background:#b3352c}
  .ea-badge--soldout{background:#555}
  .ea-badge--new{background:#1c6b4a}
  .ea-badge[hidden]{display:none}
{%- endstyle -%}
{%- liquid
  assign ea_variant = product.selected_or_first_available_variant
  assign ea_show_sale = false
  if ea_variant.compare_at_price > ea_variant.price
    assign ea_show_sale = true
    assign ea_sale_percent = ea_variant.compare_at_price | minus: ea_variant.price | times: 100 | divided_by: ea_variant.compare_at_price
  endif
-%}
<span class="ea-badges2">
  {%- if ea_show_sale -%}
    <span class="ea-badge ea-badge--sale">-{{ ea_sale_percent }}%</span>
  {%- endif -%}
  {%- unless product.available -%}
    <span class="ea-badge ea-badge--soldout">Sold out</span>
  {%- endunless -%}
  <span class="ea-badge ea-badge--new" hidden data-new-badge data-created="{{ product.created_at | date: '%s' }}" data-days="14">New</span>
  {%- if product.tags contains "bestseller" -%}
    <span class="ea-badge" style="background:#111111">Bestseller</span>
  {%- endif -%}
  {%- if product.tags contains "limited" -%}
    <span class="ea-badge" style="background:#8a3b2b">Limited</span>
  {%- endif -%}
</span>
<script>
document.querySelectorAll('[data-new-badge]').forEach(function (el) {
  var created = Number(el.dataset.created) * 1000;
  var days = Number(el.dataset.days) || 14;
  if (Date.now() - created <= days * 86400000) el.hidden = false;
});
</script>