Custom Theme Setup: Badge
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 classregios-dopp-generic-badge-container
- OR, A parent of the
regios-dopp-generic-price-container
with the CSS classregios-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 classregios-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 attributedata-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
Thank you!