Need help?

We have created a Troubleshooting Custom Theme Setup article to help you resolve the most common problems quickly.

Custom Theme Setup Guide

Click the thumbnail above to watch an introductory video.

Shopify themes vary widely—different developers, structures, and conventions—so there’s no standard way to update on-page prices.

To address this, our "discounted price on product page" (DOPP) feature supports a manual theme setup that works across any theme.

Once your theme is set up, select the "Custom Theme Setup" option in the "Discounts Embed" block to show discounted prices on product pages, collection pages, and more.

This requires minor, non-destructive tweaks to your theme—just adding specific CSS classes and HTML attributes. Full instructions are below.

Checklist

Please make sure you have followed every single instruction in these sections:

• Set the "Theme type" setting of the "Discounts Embed" app embed to "Custom Theme Setup (read helpdesk article)."
• Product page template
• Collection page template
• Product recommendations
• Pricing elements
• Search page template

Do not skip any section. Most issues people have with custom theme setup are caused by skipping instructions.

Product page template

Custom Theme Setup: Product Page

Collection page template

Custom Theme Setup: Collection Page

Product Recommendations

• The root of product recommendations must have the regios-dopp-generic-product-recommendations-root.
• Just like the collection page, each product card must have an data-regios-dopp-generic-product-id attribute.

Search page

• The root of the search results product grid must have the regios-dopp-generic-search-results-root.
• Just like the collection page, each product card must have an data-regios-dopp-generic-product-id attribute.

Price template

Custom Theme Setup: Pricing Elements

Badge

Custom Theme Setup: Badge

Discount description

You can control where the discount description appears.

• Use the regios-dopp-description CSS class for any discount description element you want our app to overwrite the contents of.
• Our app will automatically create a regios-dopp-description if none is found, unless the Discount Description setting in the "Discounts Embed" is empty.
• The discount description must be within the regios-dopp-generic-price-container.

Disabling strikethrough

If you don't want our app to automatically add a strikethrough to the "regular price," then it must have the regios-dopp-no-strikethrough CSS class.

Custom Events

You can fire events to manually trigger discount calculations and other processes in our app.

Read this article to learn about the DOPP API.

Updated on: 03/07/2025