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

Shopify Apps

Topic summary

A user is seeking to replicate an interactive lens tint adjustment feature from Chamelo’s product page on their own Shopify store.

Desired functionality:

  • Slider control positioned in the bottom right corner
  • Real-time visual feedback showing lens darkness/tint changes as the slider moves
  • Dynamic product image updates based on slider position

The user has included a screenshot demonstrating the reference implementation.

Questions posed:

  • Are there existing Shopify apps that provide this interactive product visualization capability?
  • If no app exists, what’s the recommended approach for custom code implementation?

The discussion remains open with no responses yet, awaiting community suggestions for either app recommendations or technical implementation guidance.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
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.png3810×1530 614 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!