Displaying Badges with Custom Theme Setup

If you are following custom theme setup to manually integrate our app with your theme, put the regios-dopp-generic-badge class on the discount badge element. This will allow our app to find it easily.

• 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 one of the following:

• A parent of the regios-dopp-generic-price-container with the CSS class regios-dopp-generic-badge-container
• OR, A parent of the regios-dopp-generic-price-container with the CSS class regios-dopp-generic-product-info
• OR, the regios-dopp-generic-price-container element itself

It must also already be present in the page HTML by the time discounts are displayed; otherwise, our app will not know how to create it.

Badge Custom Theme Setup Example - Product Page

Let's say you are performing custom theme setup for the product page. You typically have the following elements on the page:

• A "product info container" which contains information about the product, including a "price container," and probably information such as the product's title, description, variants, etc.
• A "price container" that displays the product's price
• A "badge" that displays on top of the product's image if the item is on sale.

Make sure the following CSS classes/HTML attributes are present:

• On the product info container: The CSS class regios-dopp-generic-badge-container, OR the CSS class regios-dopp-generic-product-info (If you've followed the "Product Page" section of Custom Theme Setup, you probably already have this class).
• On the badge: The CSS class regios-dopp-generic-badge

Example HTML:

<div class="regios-dopp-generic-product-info">
  <div class="regios-dopp-generic-badge"></div>
  <!-- You also probably have other content in the product info container, such as a product image, title, etc. The following are just examples. -->
  <div>{{ product.title }}</div>
  <img src="{{ product.featured_image | image url }}" />
</div>

Badge Custom Theme Setup Example - Collection Page/Product Grid

Let's say you are performing custom theme setup for the collection page (or some other product grid). You typically have the following elements in the grid, for each product in the collection:

• A "grid cell," which contains information about the product, including both a "price container" and a "badge"
• A "price container" that displays the product's price
• A "badge" that displays on top of the product's image if the item is on sale.

Make sure the following CSS classes/HTML attributes are present:

• On the grid cell: The CSS class regios-dopp-generic-badge-container, OR the HTML attribute data-regios-dopp-generic-product-id (If you've followed the "Collection Page" section of Custom Theme Setup, you probably already have this attribute).
• On the badge: The CSS class regios-dopp-generic-badge

Example HTML:

{% for product in collection.products %}
<div data-regios-dopp-generic-product-id="{{ product.id }}">
  <div class="regios-dopp-generic-badge"></div>
  <!-- You also probably have other content in the grid cell, such as a product image, title, etc. The following are just examples. -->
  <div>{{ product.title }}</div>
  <img src="{{ product.featured_image | image url }}" />
</div>
{% endfor %}

Additional resources

For more information about badges (including HTML code examples), read this article.

Updated on: 03/07/2025