How can I display the variant image in a popup?

Technical Q&A

Topic summary

A Shopify theme developer is attempting to implement a popup feature that displays variant-specific images when clicking product thumbnails.

Current Issue:

  • The popup currently only shows the featured/hero image regardless of which thumbnail is clicked
  • The developer wants each thumbnail click to display its corresponding variant image

Code Attempt:

  • Liquid template code was shared but appears corrupted/reversed in the post, making it difficult to assess the implementation

Responses:

  • One commenter confirmed that images do appear in the popup on the provided example URL, but acknowledged they show the same featured image for all thumbnails
  • Another suggested using a “Variant Image Gallery & Zoom” Shopify app as a potential solution

Status: The issue remains unresolved. The developer needs help writing the correct Liquid code to dynamically display the appropriate variant image based on which thumbnail is clicked.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

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>
2

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.

3

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?

4

Hi @z-bug

Hope you are doing well.

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

Regards,

Mehak