Discounted Price Block
IMPORTANT: This feature has several limitations.
To get updates about the new version, which will address these limitations, upvote and comment on this thread in our public feedback board.
Watch this video tutorial to see our founder walk you through setting up our "Discounted price" app block:
You can compel your customers to add products to their cart by showing discounted prices on product pages.
Regios Automatic Discounts provides a "Discounted price" app block that you can easily add to your online store. This doesn't require any coding, and if you uninstall the app, the app block will automatically be removed completely from your theme.
For immediate help, read these articles:
"Discounted Price" block FAQ
"Discounted Price" block troubleshooting guide.
If you still need assistance, our support team is available to help you get the app block working in your store.
Click the chat icon button at the bottom right of the page to get in touch with us.
First, go to the discount settings page of an existing discount. Make sure you have saved all changes to your discount. Then, scroll down to the "Display on product page" card, and click on the "Embed in your theme" button. This will take you to our "Add to theme" page.
Click on the "Open theme editor" button at the top right of the page. This will open your current theme's product page in the Theme Editor, and it will also add a new "Discounted price" app block to your page.
Open your product page template in the Theme Editor.
In the "Product information" section, click "Add block." If your theme doesn't have a "Product information" section, then look for another "Add block" button in the "Template" section.
Search for "Discounted price," where you will find our app block.
Add it to your template.
Drag the "Discounted price" app block until it is below the default "Price" block in your page hierarchy. We recommend also hiding the "Price" block, so that you can use our "Strikethrough price" feature to automatically cross out the original price and promote your discount offer.
Click on the "Discounted price" app block in the page hierarchy to reveal its settings.
Our app block has many settings to allow a high degree of customization:
Product: This should be autofilled from the product page, but you can optionally override it if you always want to show a specific product's price.
Type: Determines whether to apply a percentage or fixed amount discount to the on-page price.
Percentage/amount: Either the percentage to discount the price by, or the amount to subtract from the price, depending on the discount type.
You can limit the discount to only be shown to specific customers on the product page. For all other customers, the app block will be hidden, unless you have "Show original if discount doesn't apply" checked (explained in the "Strikethrough price" section).
Only customers with specific tags can see this: If checked, then only customers with the tags you specify will see discounted prices from this app block.
Customer tags: A list of customer tags to limit the discount visibility to, separated by commas. All leading and trailing whitespace will be stripped. Example: "tag1, tag2, tag3"
Only apply discount to products in this collection: If set, then the discount will be only be applied if the product is in this collection.
Don't apply discount to products already on sale: If checked, then don't discount the prices of products that have a compare at price greater than the sale price (not the discounted price).
Several of the available settings allow you to control the appearance of elements on the page:
Show badge?: If checked, this badge will be displayed.
Badge BG color: Background color for the badge.
Badge FG color: Foreground color for the badge.
Badge default text for compare at price: If the product isn't eligible for a discount, but has a compare at price, display this text in the badge. Leave blank to hide the badge.
Custom badge CSS: Optional list of CSS rules (not full styles) to apply to the badge. This will become the HTML style attribute. Example: "color: red; font-weight: bold;"
You can automatically cross out the original price, and display the discounted price next to it. This element uses the same HTML as the compare-at price in Shopify's Dawn theme.
When the strikethrough price element is enabled, you can hide the original "Price" block to draw focus to your discount and encourage more add to carts (ATCs).
Show strikethrough price?: If checked, this strikethrough price will be displayed.
Show original price if discount doesn't apply: If this is checked and the customer is not eligible for the discount, then the original price will be shown, like how it appears by default in Dawn. You must check this box on at least 1 "Discounted price" block, if you have hidden the original "Price" block on your page.
Currency code enabled? If this is checked, then the currency code will be displayed next to the price. If unchecked, then only the price will be displayed.
You can also display text to the user that explains which customers can receive the discount. This text includes the discounted price.
Show text?: If checked, this text will be displayed.
Text before price: Optional text to display before the discounted price.
Text after price: Optional text to display before the discounted price.
Custom text CSS: Optional list of CSS rules to apply to the text. Example: "color: red; font-weight: bold;"
When the app block is added to your page, it will have an HTML ID starting with shopify-block-regios_discounts_product_page_extension_.
We recommend using the [id^="shopify-block-regios_discounts_product_page_extension_"] .price CSS selector to style the displayed HTML.
Here is an example CSS style you can use as a starting point to further customize the appearance of the app block.
It should be added to a .css file in your theme, NOT in the app block settings itself.
We want to hear about your experience with our app! Leave a review on the Shopify App Store.
To get updates about the new version, which will address these limitations, upvote and comment on this thread in our public feedback board.
Watch this video tutorial to see our founder walk you through setting up our "Discounted price" app block:
You can compel your customers to add products to their cart by showing discounted prices on product pages.
Regios Automatic Discounts provides a "Discounted price" app block that you can easily add to your online store. This doesn't require any coding, and if you uninstall the app, the app block will automatically be removed completely from your theme.
Need help?
For immediate help, read these articles:
"Discounted Price" block FAQ
"Discounted Price" block troubleshooting guide.
If you still need assistance, our support team is available to help you get the app block working in your store.
Click the chat icon button at the bottom right of the page to get in touch with us.
How to Embed the App Block in Your Theme
Option 1: Through the App
First, go to the discount settings page of an existing discount. Make sure you have saved all changes to your discount. Then, scroll down to the "Display on product page" card, and click on the "Embed in your theme" button. This will take you to our "Add to theme" page.
Add to Theme Page
Click on the "Open theme editor" button at the top right of the page. This will open your current theme's product page in the Theme Editor, and it will also add a new "Discounted price" app block to your page.
Option 2: Through the Theme Editor
Open your product page template in the Theme Editor.
In the "Product information" section, click "Add block." If your theme doesn't have a "Product information" section, then look for another "Add block" button in the "Template" section.
Search for "Discounted price," where you will find our app block.
Add it to your template.
Adding the block to your template
Drag the "Discounted price" app block until it is below the default "Price" block in your page hierarchy. We recommend also hiding the "Price" block, so that you can use our "Strikethrough price" feature to automatically cross out the original price and promote your discount offer.
Click on the "Discounted price" app block in the page hierarchy to reveal its settings.
Available Settings
Our app block has many settings to allow a high degree of customization:
Basic Settings
Product: This should be autofilled from the product page, but you can optionally override it if you always want to show a specific product's price.
Discount Value
Type: Determines whether to apply a percentage or fixed amount discount to the on-page price.
Percentage/amount: Either the percentage to discount the price by, or the amount to subtract from the price, depending on the discount type.
Visibility
You can limit the discount to only be shown to specific customers on the product page. For all other customers, the app block will be hidden, unless you have "Show original if discount doesn't apply" checked (explained in the "Strikethrough price" section).
Only customers with specific tags can see this: If checked, then only customers with the tags you specify will see discounted prices from this app block.
Customer tags: A list of customer tags to limit the discount visibility to, separated by commas. All leading and trailing whitespace will be stripped. Example: "tag1, tag2, tag3"
Only apply discount to products in this collection: If set, then the discount will be only be applied if the product is in this collection.
Don't apply discount to products already on sale: If checked, then don't discount the prices of products that have a compare at price greater than the sale price (not the discounted price).
On-Page Elements
Several of the available settings allow you to control the appearance of elements on the page:
Badge
Show badge?: If checked, this badge will be displayed.
Badge BG color: Background color for the badge.
Badge FG color: Foreground color for the badge.
Badge default text for compare at price: If the product isn't eligible for a discount, but has a compare at price, display this text in the badge. Leave blank to hide the badge.
Custom badge CSS: Optional list of CSS rules (not full styles) to apply to the badge. This will become the HTML style attribute. Example: "color: red; font-weight: bold;"
Strikethrough price
You can automatically cross out the original price, and display the discounted price next to it. This element uses the same HTML as the compare-at price in Shopify's Dawn theme.
When the strikethrough price element is enabled, you can hide the original "Price" block to draw focus to your discount and encourage more add to carts (ATCs).
Show strikethrough price?: If checked, this strikethrough price will be displayed.
Show original price if discount doesn't apply: If this is checked and the customer is not eligible for the discount, then the original price will be shown, like how it appears by default in Dawn. You must check this box on at least 1 "Discounted price" block, if you have hidden the original "Price" block on your page.
Currency code enabled? If this is checked, then the currency code will be displayed next to the price. If unchecked, then only the price will be displayed.
Text
You can also display text to the user that explains which customers can receive the discount. This text includes the discounted price.
Show text?: If checked, this text will be displayed.
Text before price: Optional text to display before the discounted price.
Text after price: Optional text to display before the discounted price.
Custom text CSS: Optional list of CSS rules to apply to the text. Example: "color: red; font-weight: bold;"
Additional CSS Customizations
When the app block is added to your page, it will have an HTML ID starting with shopify-block-regios_discounts_product_page_extension_.
We recommend using the [id^="shopify-block-regios_discounts_product_page_extension_"] .price CSS selector to style the displayed HTML.
Here is an example CSS style you can use as a starting point to further customize the appearance of the app block.
It should be added to a .css file in your theme, NOT in the app block settings itself.
/*
Example styles for the "Discounted price" app block.
Remove any rules you don't need, and customize the ones you want, until you are satisfied with the appearance.
*/
[id^="shopify-block-regios_discounts_product_page_extension_"] .price {
font-family: "Arial", sans-serif;
font-size: 22px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: red;
}
[id^="shopify-block-regios_discounts_product_page_extension_"] .badge {
border-radius: 16px;
padding: 0.5em 1em;
width: fit-content;
}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: 03/11/2024
Thank you!