How-to: Add Sale badge integration manually

Sometimes sale badges do not appear or line up correctly because each Shopify theme is built a little differently.

When that happens, we can add a small snippet to your theme to tell Disco exactly where to place the sale badge.

Step 1: Create the snippet file

1. In your Shopify admin, go to:

   Online Store > Themes > Actions > Edit code

2. In the Snippets folder, click Add a new snippet.
3. Name the snippet: pe-manual-sale-tag-integration   
4. Paste this code into the new snippet file and click 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 %}

Step 2: Choose where the sale badge should appear

You will now tell your theme where to “render” this snippet.

Most merchants add it:

• On collection / category pages (product cards in a grid), and
• On the main product page (on main product image).

A. Add the snippet to product cards (collection pages)

1. In the code editor, look for the file that controls product cards.

   Common filenames include:

   • product-card.liquid   
   • card-product.liquid   
   • product-grid-item.liquid   
   • A section like main-collection-product-grid.liquid   
2. Open the file and find the area where the product image is shown.
3. Just above or below the product image, add:

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

4. Click Save.

B. (Optional) Add the snippet to the main product page

If you also want sale badges on the product details page:

1. In the code editor, open your main product template.

   Common filenames include:

   • main-product.liquid   
   • product-template.liquid   
   • product.liquid   
2. Find the section where the main product image is rendered.
3. Add the same line where you want the badge to appear:

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

If you follow these steps and sale badges still do not appear, contact Disco support and let us know which theme you’re using and where you placed the snippet.