How to Display Discounts on Product Pages
TO READ THE DOCS FOR THE "DISCOUNTED PRICE" APP BLOCK, CLICK HERE.
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.
Depending on which theme you are using, setup can be complex.
Fortunately, we offer complimentary onboarding on our Ultimate plan and higher.
Get in touch with us, and we'll completely handle the installation!
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.
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.
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.
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.
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.
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.
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.
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.
Settings available for the collection page discount block:
Screenshot of setting the "Collection" setting to a dynamic source
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.
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.
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.
If you're having any issues with this feature, read our "Troubleshooting Discounts on Product Pages" article.
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.
Want us to set this up for you?
Depending on which theme you are using, setup can be complex.
Fortunately, we offer complimentary onboarding on our Ultimate plan and higher.
Get in touch with us, and we'll completely handle the installation!
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
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.
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.
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.
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.
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.
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.
Add to collection page
Settings available for the collection page discount block:
Screenshot of setting the "Collection" setting to a dynamic source
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.
"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.
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.
Troubleshooting
If you're having any issues with this feature, read our "Troubleshooting Discounts on Product Pages" article.
Updated on: 03/05/2024
Thank you!