> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://regiostech.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom Theme Setup


# Need help?
We have created a [Troubleshooting Custom Theme Setup](/en/article/troubleshooting-custom-theme-setup-10nqmxy/) article to help you resolve the most common problems quickly.

# Custom Theme Setup Guide
[![](https://storage.crisp.chat/users/helpdesk/website/d13e90de659a8800/image_t32evo.png)](https://www.loom.com/share/0661b2d413c04908b63fcf89b34f1dda?sid=f3f9222e-77eb-4c35-826b-1e3b2f7d576a)

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.

![Screenshot of the "Custom Theme Setup" option in our "Discounts Embed" block](https://storage.crisp.chat/users/helpdesk/website/-/d/1/3/e/d13e90de659a8800/image_13py0p.png)

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](/en/article/custom-theme-setup-product-page-s7sk7x/)
* [Collection page template](/en/article/custom-theme-setup-collection-page-u8az8k/)
* Product recommendations
* [Pricing elements](/en/article/custom-theme-setup-pricing-elements-10d3c01/)
* Search page template
* Add all app blocks to your templates as mentioned here: [How to Display Discounts on Product Pages](https://regiostech.crisp.help/en/article/how-to-display-discounts-on-product-pages-1sj49lh/)
* On the home page, if you have multiple "Featured collection" blocks, follow this tutorial: [Setting Up Multiple Collection Page Discount Blocks Per Page](https://regiostech.crisp.help/en/article/setting-up-multiple-collection-page-discount-blocks-per-page-q4bu3l/)

**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](/en/article/custom-theme-setup-product-page-s7sk7x/)

## Collection page template
[Custom Theme Setup: Collection Page](/en/article/custom-theme-setup-collection-page-u8az8k/)

## 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](/en/article/custom-theme-setup-pricing-elements-10d3c01/)

## Badge
[Custom Theme Setup: Badge](/en/article/custom-theme-setup-badge-1lueiwp/)

## 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](/en/article/dopp-api-reference-1gvya0h/) to learn about the DOPP API.