When displaying discounts on product pages, our app can also edit the contents of sale/discount badges.

Badges signal to users that an item is on sale. For example, in most themes, if a product has a compare-at price, a badge is shown.

How to Edit Badge Content

The "Discounts Embed" app block has a "Badge description" setting. It is an HTML text input. You can use Discount Description Templates to edit the contents; our app will dynamically fill in values like the discount percentage or amount.

If you don't want the app to edit badges, clear the text field.

For example, you can make the badge display the discount percentage by providing [discount_percentage] OFF as the value.

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.

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 %}

Getting Badge Contents Dynamically in JavaScript

For more complex integrations, you can use our app's DOPP API to dynamically calculate discounted prices in JavaScript.

The result of calculateDiscountedPrices will have a badge field. This object contains html and css strings you can insert into your desired elements.

Here's some example code:

const {description, badge} = await window.RegiosDOPP.api.v0.productPage.calculateDiscountedPrices();
document.querySelector('.badge').innerHTML = badge.html;
document.querySelector('.badge').cssText = badge.css;

Your Feedback Matters

As a solo founder, your experience is crucial to me. Could you spare a moment to share your thoughts? Please leave a review on the Shopify App Store. Thank you for helping me improve!

Updated on: 06/01/2025