> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/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).

# Show discount badges and countdown timers on product images

# Show discount badges and countdown timers on product images

Put your discount right on the product image with a badge, and add a countdown overlay so shoppers see how long they have left, before they even read the price.

## In this article

* [How it works](#2-how-it-works)
* [Before you begin](#2-before-you-begin)
* [Add a discount badge to product images](#2-add-a-discount-badge-to-product-images)
* [Choose a shape and position](#2-choose-a-shape-and-position)
* [Add a countdown to product images](#2-add-a-countdown-to-product-images)
* [Show overlays on collection pages](#2-show-overlays-on-collection-pages)
* [Limitations](#2-limitations)
* [Related articles](#2-related-articles)

## How it works

Pareto gives you two image overlays: a **discount badge** and a **countdown on image**. Both are off by default, so nothing appears on your storefront until you turn them on.

Product page overlays are set per offer. Collection page overlays are set once, globally, in **Collection Settings**. The two are completely independent: changing your product page badge does not change your collection page badge, and the reverse is also true.

Overlays only appear on products that have at least one active offer. If a product belongs to more than one active offer, Pareto uses the offer whose countdown ends soonest, and takes the badge text and colors from that same offer.

![Product image on a storefront with a red price tag discount badge in the top left corner and a countdown banner along the bottom edge](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/anh-man-hinh-2026-07-14-luc-16_zn5gcz.png)

## Before you begin

* Create an active offer in Pareto for the products you want to badge.
* Turn on the Pareto app embed in your theme. The admin preview works without it, but the overlay will not appear on your storefront until the embed is on.

## Add a discount badge to product images

1. Open your offer and go to **Step 2: Display settings**.
2. Expand the **Discount badge** accordion.
3. Turn on **Show badge on product images**. The remaining settings only appear once this is on.
4. Enter your **Badge text**. Click a variable chip to insert live discount data at your cursor.
5. Set the **Text color** and **Background color**. Defaults are white text on red.
6. Save the offer.


| Variable | What it shows |
| ---- |
| `{{max_discount_percent}}` | The highest discount percentage on the product |
| `{{min_discount_percent}}` | The lowest discount percentage on the product |
| `{{campaign_name}}` | The name of the offer, for example Summer Sale |
| `{{min_value}}` | The minimum quantity needed to qualify |
| `{{total_save}}` | The total amount saved, for example $25 |
| `{{discounted_unit_price}}` | The discounted unit price, for example $74.99 |

The default badge text is **Save {{max_discount_percent}}**.

![Pareto Display settings with the Discount badge accordion open, showing badge text, variable chips, and two color pickers](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/anh-man-hinh-2026-07-14-luc-16_1j6tlnv.png)

## Choose a shape and position

Pick one of eight shapes, then place it using the 3x3 position grid. Use the **Size** slider to scale the badge between 44 px and 132 px. The preview panel updates in real time.

| Shape | Where it can sit |
| ---- |
| Pill, Circle, Rosette, Shield, Label, Price Tag | Any of the nine positions |
| Corner | Corner positions only |
| Banner | Top edge or bottom edge only |

Two shapes change the position control:

* Pick **Corner** and the non-corner positions are disabled. If you had one selected, it resets to Top Left.
* Pick **Banner** and the 3x3 grid is replaced by a **Top edge** / **Bottom edge** toggle.

## Add a countdown to product images

1. Open your offer and go to **Step 3: Launch time**.
2. Expand the **Countdown timer** accordion and find the **Image overlay** section.
3. Turn on **Show countdown on product images**.
4. In **Notice**, write the message shown next to the clock. Insert the `{{timer}}` chip where you want the ticking digits, for example `{{campaign_name}} ends in {{timer}}`. The default is **Sales end in**.
5. Save the offer.

The countdown overlay has four shapes: **Banner**, **Pill**, **Circle**, and **Corner**. Banner shows your notice plus a labeled clock with hours, minutes, and seconds. Pill, Circle, and Corner show the digits only. The default is a **Banner** on the **Bottom edge**, sized 72 px.

The image overlay and the countdown widget above the Add to cart button run on the same timer, so they always show the same remaining time. You can use both at once. Their colors are shared: change the color in one place and the other updates too.

![Countdown timer accordion in Launch time with the Image overlay section, notice field, and the timer chip highlighted](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/anh-man-hinh-2026-07-14-luc-16_1x8yzz8.png)

## Show overlays on collection pages

Collection page overlays are global. They are configured once and apply across your offers.

![Shopify collection page on the storefront showing discount badges and countdown overlays on several product thumbnails](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/anh-man-hinh-2026-07-14-luc-16_1ygb1qe.png)

1. Go to **Collection Settings**.
2. Turn on the **Show discount on collection page** master toggle. The badge and countdown settings only appear once this is on.
3. Expand the **Discount badge** accordion and turn on **Show badge on collection images**, then set text, colors, shape, position, and size.
4. Expand the **Countdown timer** accordion and turn on **Show countdown on collection images**, then set the notice, colors, shape, position, and size.

|| Please contact with our devs, or view ${color}[#3024db](this instruction) to show on collection page 

Collection settings are separate from your per-offer settings. The collection countdown also has its own colors, unlike the product page countdown which shares colors with the above-button widget. This is only available from professional plan.

## Limitations

* Both overlays are off by default. Nothing shows until you turn them on.
* Overlays only appear on products with at least one active offer. When an offer ends, its badge and countdown are removed from the storefront.
* Product page and collection page settings do not sync. You configure them separately.
* Badges are not available on the cart page, on search results, or in Checkout by default. Please upgrade to advanced plan, and contact us to get custom badge