Discounted Price Block

The "Discounted Price" app block replaces your theme's built-in "Price" block with one that is compatible with our Discount on Product Page feature. Use this if your theme is not included on the list of supported themes.

How to Use

1. Add the "Discounted Price" app block to all product templates.
2. Set the "Default badge text" setting. This can be localized through Shopify's "Translate & Adapt" app. Leave it blank to hide the badge by default.
3. Hide your theme's built-in "Price" block.
4. Enable the "Display Discounts" app embed.
5. Follow the setup wizard on the "Discount on Product Page" page within our app to configure the "Display Discounts" app embed to use the "Discounted Price Block" theme type.

Limitations

• Not all themes support using this in collection pages/search pages/other product grids. Supports the product page in all Online Store 2.0 themes.
• For items that don't have compare at prices, JavaScript is required to show discounts from our app.

Using on Collection Page/Search Page/Product Recommendations

Some newer Shopify themes (such as Horizon) support "nested blocks," which allows you to embed the "Discounted Price" block within product grids. In such themes, the "Discounted Price" block setup can display discounted prices in these grids.

1. Visit the template and find the grid where you'd like discounted prices to appear.
2. Expand the "Product card" or similar block. You'll see a "🔄" symbol or similar next to its title.
3. Hide the built-in "Price" block and add our app's "Discounted Price" app block.
4. Set the "Default badge text" setting. This can be localized through Shopify's "Translate & Adapt" app. Leave it blank to hide the badge by default.

Styling

The "Discounted Price" app block includes some reasonable default styling. However, to further customize its appearance, you can use the following CSS selectors in custom CSS:

• .regios-dopp-discounted-price-block-2\.0 — The root container for the entire block
• .regios-dopp-generic-price-container — The flex container holding the badge, prices, and description
• .regios-dopp-generic-badge — The discount badge (e.g., "20% OFF")
• .regios-dopp-discounted-price-block-2\.0 .price-items — The container for the regular and sale prices (displayed in a row)
• .regios-dopp-generic-price-item--regular — The original/compare-at price (strikethrough)
• .regios-dopp-generic-price-item--sale — The current/discounted price
• .regios-dopp-description — The discount description text below the prices

Note: When targeting the root class in CSS, you must escape the period: .regios-dopp-discounted-price-block-2\.0. In most theme CSS editors, this works as expected.

Your Feedback Matters

Your review helps keep this small business running. Please leave one on the Shopify App Store.

Updated on: 26/12/2025