> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://regiostech.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom Theme Setup: Badge

# Displaying Badges with Custom Theme Setup
If you are following [__custom theme setup__](https://regiostech.crisp.help/en/article/custom-theme-setup-6mb5st/) 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:

```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:

```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](/en/article/discount-badges-faq-16qyxiz/).