Adding product badges

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

  1. First of all, go the theme editor (read this article for more info)
  2. Choose /snippets/product-item.liquid, and identify the link declaration:

    <a class="product-item__link" href="{{ product.url | within: collection }}">
  3. 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; }
  4. 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"
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.