Custom Theme Setup

Every Shopify theme is completely different: different developers, different structure, different conventions.

Unfortunately, in Shopify, there is no unified way to update the displayed prices of items on the page.

To work around this, we have created "generic theme interop" functionality in our "discounted price on product page" (DOPP) feature, that abstracts over the differences between themes. This is the closest thing to having a unified way to update on-page prices.

When your theme is properly set up to use our "generic theme interop," you can select the "Other theme" option in our "Discounts Embed" block to start displaying discounted prices on your product page, collection page, and more.

In order for this to work with your custom theme (or any unsupported theme), you will need to make some minor tweaks to your theme code. These changes are non-destructive, and simply involve adding CSS classes and HTML attributes to specific elements in your theme.

We have provided detailed instructions below on exactly which changes you need to make:

Product page template

Product pages typically have "variant selector" elements, one for each product variant, that allows the customer to choose which variant of a product they want to buy.

Some themes have radio buttons with the name of each variant. For example, in the screenshot above, we have shown the radio buttons used in the Dawn theme.

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

The product price must be contained within an element with the regios-dopp-generic-product-info class, OR 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" should not also contain product recommendations, as this could lead to the product recommendations having the wrong prices displayed.
In your theme, very variant selector must have a data-regios-dopp-generic-variant-id attribute, where the value is the numerical ID of the variant.
The quantity input must have one of the following: 1.) The regios-dopp-generic-quantity-input class, OR 2. the ID quantity, OR a name="quantity" attribute.

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

  {% for variant in product.variants %}
    <div data-regios-dopp-generic-variant-id="{{ variant.id }}">
      Radio button or other element that allows customer to select this variant...
    </div>
  {% endfor %}
</div>

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.

Collection page template

Collection pages typically have "product grids," where each product in a collection has its product title and main image shown, that customers can click on to visit the associated product page.

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

Every item in your product grid must have EITHER 1.) a data-regios-dopp-generic-product-id attribute, where the value is the numerical ID of the corresponding product, or 2.) an href attribute, where the value is the URL of the corresponding product.

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

<div class="probably-some-product-grid-class-name-is-defined-in-your-theme">
  {% for product in collection.products %}
    <div data-regios-dopp-generic-product-id="{{ product.id }}">
      Product grid item. For example, Dawn has a {% render "card-product" %} tag here.
    </div>
  {% endfor %}
</div>

In order for our app to update the on-page prices of products in the grid, make sure that you apply the edits listed in the "Price template" section below to whichever template is used for product grid prices in your theme.

Product Recommendations

The root of product recommendations must have the regios-dopp-generic-product-recommendations-root.

Price template

Depending on your theme, you might only have 1 template responsible for displaying product prices, or multiple.

For example, some themes display product prices differently in the collection page.

There is typically a "container" element that wraps both the sale price, and the compare at price, if there is one.

The "sale price" element typically is always shown, and shows the default price for the product.

The "regular price" element is typically not shown unless the product also has a compare at price. For example, in Dawn, this is a product price with a strikethrough line.

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

The container element must have the regios-dopp-generic-price-container CSS class.
The sale price element must have the regios-dopp-generic-price-item--sale CSS class.
The regular price element must have the regios-dopp-generic-price-item--regular CSS class.
The regular price element must be present in the page HTML, even if it is visually hidden. If it is not present, then our "generic theme" support cannot detect it and update its content. Our app will automatically remove the hide, hidden, and visually-hidden CSS classes from this element, if present, when a discount has been applied to the product price.
For themes based on Dawn: the regular price element should be visually hidden by default, but made visible when the container element has the regios-dopp-generic-price--on-sale class. You can also change the Price on Sale CSS class setting of the "Discounts Embed" to "price--on-sale" to skip this step.
If you want to display a badge when a discount is applied, it needs the CSS class regios-dopp-generic-badge. You are responsible for styling the badge, and making sure it is present in the page HTML.
If you want to control where the discount description appears, add your own element with the class regios-dopp-description.

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

<div class="regios-dopp-generic-price-container">
  <div class="regios-dopp-generic-price-item--regular visually-hidden">
    This element will be made visible when a discount is applied, and its text will be set to the default price. You can leave its contents empty, or set it to the product's compare at price.
  </div>
  <div class="regios-dopp-generic-price-item--sale">Default price of the product</div>
</div>

Keep reading to see a practical example below.

Most themes already have a structure similar to this, and just need the CSS classes added. For example, if your price template already shows strikethrough lines when a compare at price is present, then we recommend simply adding the regios-dopp-generic-price-item--regular class to the compare at price item.

And your CSS could include these styles as a baseline:

/* Hides the regular price item unless the DOPP feature is displaying a discount. */
.regios-dopp-generic-price-container:not(.regios-dopp-generic-price--on-sale) .regios-dopp-generic-price-item--regular {
  display: none;
}

Your price template may have multiple container elements, for example, if it displays prices differently when a product has a compare at price. Make sure to add the required CSS classes to all of them.

Price template example

To make this easier to understand, here is an example based on how most themes structure price display.

Most themes display prices differently when there is a compare at price, vs. when there is not.

You must update your template for both cases.

Without compare at price

Your price template probably looks like this when there is no compare at price:

<!-- BEFORE SETUP -->
<div class="price-list">
  <div class="price">
    <span class="visually-hidden">500</span>
    <span>$5.00</span>
  </div>
</div>

Change it so that it looks like this when there is no compare at price:

<!-- AFTER CORRECT SETUP -->
<div class="price-list">
  <div class="price regios-dopp-generic-price-container">
    <span class="visually-hidden">500</span>
    <span class="regios-dopp-generic-price-item--sale">
      $5.00
      <!-- OUR APP WILL PUT THE DISCOUNTED PRICE HERE -->
    </span>
    <span class="regios-dopp-generic-price-item--regular">
      <!-- OUR APP WILL PUT THE STRIKETHROUGH PRICE HERE -->
    </span>
  </div>
</div>

As you can see, the "sale price" is always visible. You need to always have a "regular price" element present as well; otherwise, our app doesn't know where to put strikethrough prices.

With compare at price

And your existing price template probably looks something like this when there is a compare at price:

<!-- BEFORE SETUP -->
<div class="price-list">
  <div class="price">
    <span class="visually-hidden">500</span>
    <span>$5.00</span>
  </div>
  <div class="price compare-at-price" style="text-decoration: line-through;">
    <span class="visually-hidden">1000</span>
    <span>
      <!-- THIS IS THE "COMPARE AT" PRICE -->
      $10.00
    </span>
  </div>
</div>

Change it so that it looks like this when there is a compare at price:

<!-- AFTER CORRECT SETUP -->
<div class="price-list">
  <div class="price regios-dopp-generic-price-container">
     <span class="visually-hidden">500</span>
     <span class="regios-dopp-generic-price-item--sale">
        $5.00
        <!-- OUR APP WILL PUT THE DISCOUNTED PRICE HERE -->
      </span>
  </div>
  <div class="price compare-at-price regios-dopp-generic-price-container" style="text-decoration: line-through;">
     <span class="visually-hidden">1000</span>
     <span class="regios-dopp-generic-price-item--regular">
       <!-- THIS IS THE "COMPARE AT" PRICE FROM BEFORE-->
       $10.00
       <!-- OUR APP WILL PUT THE STRIKETHROUGH PRICE HERE -->
     </span>
  </div>
</div>

Remember: the "sale price" is the final price the user pays. The "regular price" is the price before discounting, which shows a strikethrough.

Badge

As mentioned above, you can place a badge in your price container.

Use the regios-dopp-generic-badge CSS class for any discount badge you want our app to overwrite the contents of.
Our app will not automatically create a badge if it can't find one, so make sure the badge is always in the HTML. Even if it's visually hidden by default, that's okay - our app will automatically make it visible.
The badge must be within the regios-dopp-generic-price-container.

Discount description

As mentioned above, 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: 17/05/2024