Discount logo on swatches/variants

Store Design
,

Topic summary

Goal: show a percentage discount badge on product variant swatches (color/size selectors) when using a third‑party Swatches app.

Key constraints: the app replaces the theme’s native swatch liquid, so changes must be done via custom JavaScript and CSS targeting the app’s DOM, not theme code.

Suggested approach:

  • Use JavaScript to detect the swatch elements injected by the app (identify selectors via browser inspector).
  • Calculate discount percentage for each variant (e.g., from price vs. compare-at price).
  • Inject/overlay a badge/label onto each swatch via custom CSS and minimal DOM manipulation.

Status and outcomes: a community member outlined the high-level steps and offered implementation help. The original poster acknowledged and may proceed later. No code snippets or final implementation were shared; no marked solution. Discussion remains open without a concrete resolution.

Summarized with AI on December 23. AI used: gpt-5.
1

Hi,

We use Swatches app and would like to add percentage logo/label to highlight which variants have a discount.

App developers say:

The implementation would not be on your theme’s swatches (liquid code). Because as you noted, our app overrides your theme’s option field.
Your implementation would need to dynamically modify the swatches that our app loads onto the page through your own Javascript code.
The developer would need to use the browser inspector to find the appropriate CSS selectors.

Can someone give me a hint where to start?

Thank you.

2

Hi @ArminasZ You need to custom code your requirement and first write java script code so that you can calculate discount in percentage and then find the swatches javascript code and after that add custom css code to show the percentage discount over the swatches. Hopefully you got my point.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

1 Like
3

Hi @sahilsharma9515 .

I’ve got your point, thank you!

I will get back to you if we move forward with this task.