Adding product badges

This article is for vintage Shopify themes (version up to 1.2.0)

From version 2.0.0, we've added the possibility to add custom unique badges for each product, just using metafields. Read here for more details →

If you wish to add product badges to the Highlight's product items, you can do so through a bit of simple customizations.

First of all, go the theme editor (read this article for more info)

Choose /snippets/product-item.liquid, and identify the link declaration:

<a class="product-item__link" href="{{ product.url | within: collection }}">

Right after this line of code, insert the following:

{%- unless product.available -%}
  <div class="product-badge text-size--smaller sold"><span>SOLD OUT</span></div>
{%- else -%}
  {%- if product.compare_at_price > product.price -%}
    <div class="product-badge text-size--smaller sale"><span>SALE</span></div>
  {%- elsif product.tags contains 'preorder' -%}
    <div class="product-badge text-size--smaller preorder"><span>PREODER</span></div>
  {%- elsif product.tags contains 'new' -%}
    <div class="product-badge text-size--smaller new">NEW</div>
  {%- endif -%}
{%- endunless -%}

Next, edit /assets/theme.css and right at the end of the file, paste the following code:

.product-badge {
    margin-bottom: 1em;
    font-weight: var(--font-weight-body-bold);
}

If you want to edit the colors of inidividual badges, you can do so as well, by using and editing this code:

.product-badge.sold { color: red; }.product-badge.sale { color: blue; }.product-badge.new { color: black; }.product-badge.preorder { color: grey; }

Save both files!

How does this work

"Sold out" will appear if a product has an inventory of 0
"Sale" will appear when the compare-at-price is higher than the product's base price
"Preoder" will appear when the product is tagged with "preorder"
"New" will appear when the product is tagged with "new"