> ## 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: Product Page

[![](https://storage.crisp.chat/users/helpdesk/website/d13e90de659a8800/image_j6pb7b.png)](https://www.loom.com/share/a07cf08e1a5c4d22b1122f7cd2c6d204?sid=bd253b0f-58af-416b-a36f-941783fe9cd1)

Click the thumbnail above to watch a demonstration of Product Page Template setup.

## Expected Structure

The structure we expect is something like this (you can ignore the tag names, only the CSS classes) matter:

```html
<div class="regios-dopp-generic-product-info">
  Product title, image, description, and other information...

  <form action="/cart/add">
    <!-- Our app watches this element to detect when the selected variant changes. -->
    <input name="id" type="hidden" />

    <!-- Our app watches this element to detect when the quantity changes. -->
    <input name="quantity" type="number" />

    <!-- Product price and strikethrough are in this container. -->
    <div class="regios-dopp-generic-price-container">
      Read the "Custom Theme Setup: Pricing Elements" article for guidance on what goes in this container.
    </div>
  </form>
```

There is a good chance your theme's product template is already structured similarly to this, and that you will just need to add the required CSS classes and HTML attributes.

You must make these edits to your product page template(s):

### Product Information Container
Every product page has a "product information container' that contains:
* Pricing elements: [Custom Theme Setup: Pricing Elements](/en/article/custom-theme-setup-pricing-elements-10d3c01/)
* Quantity elements
* A hidden input named `id` that stores the ID of the currently-selected variant

* Our app will look for an element with the `regios-dopp-generic-product-info` class. If none is found, it will look for a `main` tag, OR a `body` tag.
* For example, in the Dawn theme, all product information (including title, images, and descriptions) is contained with a `product-info` element.
* This "product info container" ideally **should not** also contain product recommendations, as this could lead to the product recommendations having the wrong prices displayed.

### Quantity Input
The quantity input must be an element within the `regios-dopp-generic-product-info` container with at least one of the following:
1. `id="quantity"`,
2. OR, `name="quantity"` attribute
3. OR, `regios-dopp-generic-quantity-input` class

### Variant ID Input
Our app detects when the variant changes by looking for a "variant ID" input within the `regios-dopp-generic-product-info`.

* Our app looks for an element with `name="id"` within a `form[action="/cart/add"]`. Most themes already have this!
* OR, you can add the `regios-dopp-generic-variant-id-input` to your input/select/whatever element that has a `value` containing the current variant ID.