How do I use variant metafield URLs to load my custom 3D viewer on my product page?

[nhdemas]

Hi, I was able to get my 3D viewer to work with single products with variant metafields but when I have multiple variants per product I am unable to switch between the different URL links. The different URL will not load and it will stay “stuck” on the first link when clicking a different variant. The 3D viewer also shifts to the bottom when I select a different variant. I have attached images and my code below in from product-media-gallery.liquid:

<media-gallery
id=“MediaGallery-{{ section.id }}”
role=“region”
{% if section.settings.enable_sticky_info %}
class=“product__column-sticky”
{% endif %}
aria-label=“{{ ‘products.product.media.gallery_viewer’ | t }}”
data-desktop-layout=“{{ section.settings.gallery_layout }}”

{{ 'accessibility.skip_to_product_info' | t }}

{% assign first_variant = product.variants.first %}
{% if first_variant.metafields.custom.viewer %}

{% endif %}

[TheScriptFlow]

The main issue is that your JavaScript code isn’t properly handling the variant changes. The /variants/${selectedVariantId}.js endpoint might not be returning the expected data.

Try this updated code.

Let me know if this work for you.

Thanks

[nhdemas]

Thanks that seems to work!

[TheScriptFlow]

- If my reply was helpful, mark it as a solution and hit the like button! And Wait Don’t forget to Buy me a Coffee

Thanks