Automatic Discount Not Showing on Product & Collection Pages

[naveen.raj]

Hi,

Can anyone help me display automatic discounts on the product and collection pages? Currently, the discount only shows in the cart. I’d like the discounted price to be visible on the product and collection pages as well.

Thanks in advance!

[Shadab_dev]

What theme are you using??

[ericjackson11k]

@naveen.raj What you’re experiencing is standard for Shopify’s automatic discounts by default, they only apply at checkout, so the discounted price doesn’t show on product or collection pages.

To display discounted prices upfront, you have a few options:

Use an app – Shopify apps like Discounted Pricing Display, Bold Discounts, or Ultimate Special Offers can automatically show the discounted price on product and collection pages.

Create a manual sale – Instead of using automatic discounts, you can set the product’s Compare at price to the original price and the regular price to the discounted amount. This will make the sale price visible on all pages.

Custom coding – A Shopify developer can modify your theme to fetch automatic discounts and display them on product and collection pages. This requires coding knowledge and may vary depending on your theme.

The easiest method for most stores is using an app or the manual sale approach.

[Maximus3]

Shopify Discounts do not appear on product or collection pages.

What you’re probably looking for is called Compare-at Price and can be found when editing the product in Admin. Sale apps also use this feature.

[dmwwebartisan]

@naveen.raj In Shopify, automatic discounts only calculate at checkout/cart by default, so they don’t show on PDP (Product Detail Page) or PLP (Collection / Product Listing Page) unless you implement a workaround. Below are the practical, production-ready options, from simplest to most robust.

• Use a Shopify app – Apps like Discounted Pricing Display, Bold Discounts, or Ultimate Special Offers can automatically show discounted prices across your product and collection pages without extra setup.

• Set up a manual sale – Instead of relying on automatic discounts, you can enter the original price in the Compare at price field and set the current price as the discounted amount. This ensures the sale price is visible everywhere in your store.

• Custom theme coding – A Shopify developer can customize your theme to pull in automatic discount data and display it on product and collection pages. This option requires coding and depends on your theme’s structure.

For most Shopify stores, using an app or setting up a manual sale is the simplest and fastest solution.

Add a price placeholder in your product & collection card
Product page (main-product.liquid)
<span class="original-price">{{ product.price | money }}</span>
<span class="discounted-price" data-product-id="{{ product.variants.first.id }}"></span>

Collection page (card-product.liquid)
<span class="original-price">{{ card_product.price | money }}</span>
<span class="discounted-price" data-product-id="{{ card_product.variants.first.id }}"></span>

JavaScript to fetch automatic discount from cart

Add this to theme.liquid before </body>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const priceElements = document.querySelectorAll('.discounted-price');

  for (const el of priceElements) {
    const variantId = el.dataset.productId;

    try {
      // Add product to cart silently
      await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: variantId,
          quantity: 1
        })
      });

      // Fetch cart with discounts applied
      const cartRes = await fetch('/cart.js');
      const cart = await cartRes.json();

      const item = cart.items.find(i => i.variant_id == variantId);

      if (item && item.final_line_price < item.original_line_price) {
        el.innerHTML = Shopify.formatMoney(item.final_line_price, "{{ shop.money_format }}");
        el.previousElementSibling.classList.add('strikethrough');
      }

      // Remove product from cart
      await fetch('/cart/change.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: variantId,
          quantity: 0
        })
      });

    } catch (e) {
      console.error('Discount fetch error', e);
    }
  }
});
</script>

Optional CSS

.original-price.strikethrough {
  text-decoration: line-through;
  opacity: 0.6;
}

.discounted-price {
  color: #d60000;
  font-weight: bold;
  margin-left: 6px;
}

[naveen.raj]

Horizon - https://avyannadecore.com pasword nds2.0

[naveen.raj]

Thank you for the reply. The code is not working on Horizon – https://avyannadecore.com (password: nds2.0).

[dmwwebartisan]

@naveen.raj

Have you applied the discount directly on the site from the admin panel? If so, for which product or collection have you applied it? And is there any bug in the code that was provided?

[tobebuilds]

Hi naveen.raj,

I understand how frustrating it can be when automatic discounts aren’t showing where you want them. Unfortunately, pricing and discounting are two totally separate systems in Shopify. Discounts don’t kick in until items are added to the cart.

You only have two real options here:

1. (Not recommended) Use the compare-at-price. The biggest issue with that is that the compare-at-price isn’t an actual discount and often leads to double discounts. Furthermore, since it’s not a real discount, no strikethrough will show in the cart/checkout.
2. Use an app built for this exact purpose.

To display those discounts on your product and collection pages, I recommend using our app, Regios Discounts (Built for Shopify, 4.7 stars, 123 reviews). With this app, you can display discounts on product/collection/search/home pages in the Horizon theme.

Feel free to reach out if you have any questions. I’m happy to answer.

Best,
Tobe Osakwe