How to Display Discounts on Product Pages

Click the thumbnail above to watch a video of our founder demonstrating how to set up this feature.

You can improve customer experience by displaying discounted prices on product pages, collection pages, and the home page. This will reduce confusion and compel your customers to add more products to their cart.

The new version of our "discount on product page" (DOPP) feature is an easy way to achieve this:
It supports all features of the cart/checkout discounts
It automatically synchronizes with the cart/checkout discounts, so a few seconds after you save your discounts, they will apply on product and collection pages
It supports several themes out-of-the-box, and can work on any Online Store 2.0 themes, with a few tweaks.

Where to find these settings

When you look at the app sidebar in your Shopify admin dashboard, click the "Add to theme" link. That will take you to a page that guides you through the setup for this feature.

Checklist

Make sure your theme is supported
Add discount embed (required)
Add to product page
Add to collection page
Add to home page

The sections below will guide you through each of these.

Make sure your theme is supported

SUPER IMPORTANT. DO NOT SKIP THIS STEP, OR YOU WILL BE CONFUSED LATER.

Every Shopify theme is different, and some themes require more setup than others. Please read this article to make sure you follow the right setup for your specific theme:
Supported Themes

Add discount embed

Our "Discounts Embed" block is the foundation for displaying discounts on product and collection pages. It is responsible for calculating discounts, as well as holding other global settings.

Without adding the "Discounts Embed" block, you will not see discounts applied automatically on product or collection pages.

Settings available for the discount embed:
Theme type: Set this to the name of your theme, or the theme it's based on. For example, many themes are based on Dawn. Please read our "Supported themes" article for more information, especially if you don't see your theme name here.
Currency code enabled?: If enabled, then the prices displayed on the page will include the user's currency code. Example: $5.00 USD instead of $5.00
Discount description: This text will be shown below discounted prices. You can use variables to dynamically show the customer how much they saved. For more information on how to do this, read our "Discount Description Templates" article.
Discount description CSS: Optional CSS styles that will be added as the HTML style attribute of the discount description when added to your page. The discount description will also always have the CSS class regios-dopp-description.
Badge description: Show a badge with this text when a discount is applied. For more information on how to do this, read our "Discount Description Templates" article.
Badge CSS: Custom CSS rules (NOT full stylesheets) to apply to the badge.
Price on sale CSS class: If your theme type is "Other theme," then this CSS class will be added to the price container when discounts are displayed. If it's not set, we'll add the regios-dopp-generic-price--on-sale tag instead.
Sale price description: This HTML will be shown as the sale price (NO strikethrough). You can customize the text block, using a template. Defaults to '[sale_price]'.
Regular price description: This HTML will be shown as a strikethrough price. You can customize the text block, using a template. Defaults to '[regular_price]'.
Delay (ms): An optional amount of time to wait before updating prices on the page. Some themes completely replace the HTML in certain sections on the page when a new variant is selected, so this delay can be used to make sure the theme's scripts don't erase the displayed discount.
Customer metafields to check: If your discount configuration depends on customer metafields, list them here. Separate multiple metafields with commas. Example: my_namespace.my_key,my_other_namespace.my_other_key.
Calculate discount based on quantity: If checked, the discount will be calculated based on the value of the quantity input on the product page. If unchecked, the discount will be calculated based as if the quantity is 1.
Log level: Determines the amount of information that will be logged to the console. Use 'Warning' to see why your discounts aren't applying.
Feature Flag: This is an advanced setting. Use it to enable or disable experimental features. Separate flags with semicolons. Example: 'flag1;flag2'.

Add to product page

Settings available for the product page discount block:



Product: The product to base discount calculations on. Unless you only want only 1 specific product to display on every page, you need to set this to the "Product from current page" dynamic source.

Add to product recommendations

Settings available for the product recommendations block:



Product: The product to fetch related products for. You need to set this to the "Product from current page" dynamic source.
Number of products: The number of recommended products. This must be the same as in your theme/section settings.
Recommendation intent: The recommendation intent that is used to generate product recommendations. Learn more about recommendation intents.
Delay (ms): Wait this amount of time before fetching recommendations. This is useful for themes that load product data asynchronously. Default is 0. A good starting point if you're not sure what to put here is 250.
Unique Key: If you have multiple Collection Page Discount blocks on the same page, set this to a unique value for each block. Please follow this tutorial to learn how to set this up.

Add to collection page

Settings available for the collection page discount block:



Collection: The collection that contains the products to base discount calculations on. For most collection templates, you need to set this to the "Collection from current page" dynamic source.
Products per page: The number of products that are shown on the page. This must match the number of products that are shown on your collection page. Otherwise, you might notice some products missing discounted prices.
Unique Key: If you have multiple Recommendation Discount blocks on the same page, set this to a unique value for each block. Our app will look for an element with the data-regios-dopp-product-recommendations-block-key attribute set to this value, and will only apply discounts to products within that element..

"All" collection

If you use Shopify's built-in "all" collection, you will notice that no products on the /collections/all page receive a discount.

Shopify's built-in "all" collection, which includes all products in your store, unfortunately has some issues that prevent Liquid templates, like our "Collection page discount" block, from being able to detect all products within it. This is a limitation we cannot work around.

Instead of using the default "all" collection on your store, we recommend following these instructions to create a new "All" collection, that automatically includes all your products:

Create a new automated collection with the title "All".
For the condition, set "Inventory stock is greater than 0."
Save the collection.

Using Multiple Collection Page Discount Blocks Per Page

If you have multiple collections displayed on a single page, then you need to follow the instructions in this article to tell our app which collection grid corresponds to each collection.

Add to home page

Follow the same instructions as the collection page, but instead of a dynamic source, choose your "All" collection.

That's it! Now your website will display discounted prices throughout the buyer journey.

Add to search page

Settings available for the Search Page Discount block:

Products per page: The number of products that are shown on the page. This must match the number of products that are shown on your collection page. Otherwise, you might notice some products missing discounted prices.
Unique Key: If you have multiple Search Page Discount blocks on the same page, set this to a unique value for each block. Please follow this tutorial to learn how to set this up.

FAQ

How do I change the badge color?

You can change the "Badge CSS" setting of the "Discounts Embed." As an example, you could set it to background: red; color: white to change the label to red with white text.

Troubleshooting

If you're having any issues with this feature, read our "Troubleshooting Discounts on Product Pages" article.

Have any feedback for us?

We want to hear about your experience with our app! Leave a review on the Shopify App Store.

Updated on: 27/03/2025