How to create an interactive lens tint adjuster with visual feedback like Chamelo's product page

Custom Data
,
1

Hi everyone,

I’m looking for an app or implementation method to create an interactive feature similar to what’s shown on Chamelo’s product page: https://www.chamelo.com/products/music-shield-fire-lenses-sports-smart-glasses-electrochromic-tint-adjustable-changing-audio-sunglasses

截圖 2025-02-13 下午3.31.50.png
截圖 2025-02-13 下午3.31.50.png400×161 83.2 KB

Specifically, I want to replicate the functionality where:

  1. There’s a slider control in the bottom right corner
  2. As the user adjusts the slider, the lens image in the center dynamically changes its tint/darkness level

Is there a Shopify app that can provide this kind of interactive product visualization? If not, what would be the best way to implement this feature with custom code? Any suggestions or guidance would be greatly appreciated.

Thank you!

2

Hi Roy,

I don’t believe there’s any apps that would enable this interactive feature specifically - but there also shouldn’t be any limitation to build something like this on a Shopify theme section using JS/CSS, although it could be quite complex.

What you’d want to build is a slider that controls the opacity of an image, there’s a very simple example in this codepen which you could use as a model to create what you need.

3

Hi Liam,

Thank you for your information.

I’ll try the example you provided.

Thank you again!