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 (near the price or title).

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 product price or title is rendered.
3. Add the same line where you want the badge to appear:

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

Step 3: Test your sale badges

1. Open a collection page on your storefront.

   Refresh the page and check a product that is on sale.

   Make sure the badge:

   • Appears in the right spot
   • Shows only once per product

If you see two sale badges on the same product, remove any older Disco sale badge snippet or integration from that template and keep only the pe-manual-sale-tag-integration   snippet render.

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.