Custom Theme Setup: Product Page
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:
<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
- 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 amain
tag, OR abody
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:
id="quantity"
,- OR,
name="quantity"
attribute - 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 aform[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 avalue
containing the current variant ID.
Updated on: 03/07/2025
Thank you!