How-to: Setup Sale Badges on Product and Search page

This guide walks you through integrating a custom snippet to display manual sale badges on your Shopify store.

1. Create the Snippet File

1. Navigate to your Shopify admin dashboard.
2. Go to Online Store > Themes > Actions > Edit Code.
3. Under the Snippets folder, click Add a new snippet.
4. Name the snippet: pe-manual-sale-tag-integration
5. Paste the following code into the new snippet file and save:

{% if product %}
<div 
  sale-tag-slug="{{ product.handle }}" 
  data-handle="{{ product.handle }}"
  data-price="{{ product.price }}"
  data-price-min="{{ product.price_min }}"
  data-price-max="{{ product.price_max }}"
  data-price-varies="{{ product.price_varies }}"
  data-compare-at-price="{{ product.compare_at_price }}"
  data-compare-at-price-min="{{ product.compare_at_price_min }}"
  data-compare-at-price-max="{{ product.compare_at_price_max }}"
  data-compare-at-price-varies="{{ product.compare_at_price_varies }}"
  {% for field in product.metafields.discoapp %}
  data-{{ field | first }}="{{ field | last }}"
  {% endfor %}
  >
</div>
{% endif %}

2. Update card-product.liquid

1. Locate the card-product.liquid  file under the Snippets folder.
2. Add the following line above the card__badge  section:

{% render 'pe-manual-sale-tag-integration', product: card_product %}

3. Update product-thumbnail.liquid

1. Open the product-thumbnail.liquid  file under the Snippets folder.
2. Add the following line below the product-media-container  section:

{% render 'pe-manual-sale-tag-integration', product: product %}

4. Save and Preview

1. Save all changes.
2. Preview your store to confirm that the manual sale badges are displaying correctly on product cards and thumbnails.

This integration ensures dynamic sale badge display based on product data and metafields.