Virtual Try-On Not Working for All Variants Despite Correct Metafield Setup

Extensions
1

Hello everyone,

I’m at my wit’s end with a persistent issue on a virtual try-on feature and would be incredibly grateful for any insights.

The Goal: I’ve built a “Ring Virtual Try-On” feature. On a product page, a new item appears in the media gallery showing a hand. When a customer selects a product variant, the corresponding ring image should be displayed on the hand.

The Problem: The feature works perfectly for the first variant of a product. The hand appears, and the correct ring is shown. However, when I switch to any other variant, the entire try-on viewer disappears. This happens even though I have confirmed in my app’s backend that the try-on image metafield is correctly set for all variants.

2

Hi @TITAN_MAD

It’s hard to determine what could be happening here but if the entire viewer is not appearing I suspect it’s not due to a metafield value being misconfigured. If the value was not set correctly or if a wrong value was being cached, I’d expect the component would still load, just display no ring image or a wrong ring image.

In this case it sounds like an entire component is not rendering. Some things you could check:

  • Make sure the logic that determines whether the try-on viewer is shown is correct and does not inadvertently hide it when a new variant is selected.
  • Is the variant switching being handled correctly
  • Do you need to re-initialize your try-on viewer after every variant change?