Articles on: Regios Discounts

Discount Badges FAQ

Screenshot of a badge, surrounded in red

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.

It must be within the "price container" element. 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.

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: 03/11/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!