How can I display the variant image in a popup?

[z-bug]

Hi Experts,

I've been trying to show the variant image in the poup by clicking on the thumbnail. But due to little knowledge in liquid I'm unable to write the exact code for that. you can view the progress over here.

https://gjdiamonds.com.au/collections/frontpage/products/diamond-and-amethyst-ring-id-3mp-01499mr

This is something I've tried to do:

          <div class="custom-model-main">
    <div class="custom-model-inner">        
    <div class="close-btn">×</div>
        <div class="custom-model-wrap">
            <div class="pop-up-content-wrap">
                <div
                  
                  <img class="product-single__thumbnail-image" src="{{ media | img_url }}" alt="{{ thumbnailAlt }}">
                </div>
            </div>
        </div>  
    </div>  
    <div class="bg-overlay"></div>
</div> 

[PaulNewton]

Checking the example url, images do show in the popup.

You can reply to your post with how you solved it and mark it as the solution for future merchants. 

[z-bug]

Its only showing the featured media/hero image on clicking every thumbnail. I want to display the image on which thumbnail is clicked.

Can you help me in that?

[INA_MSWEB]

Hi @z-bug 

Hope you are doing well.

You can use Variant Images Gallery & Zoom app from Shopify app store

Regards,

Mehak