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 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:

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 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.

Updated on: 03/07/2025

Was this article helpful?

Thank you!