Why Is My Variant Picture Not Showing When I Select It?

1. Check That Each Variant Has Its Image in Shopify

• Every variant must have at least one assigned image in Shopify.
• Go to Shopify Admin > Products > [Your Product] > Variants and check each variant’s assigned image.
  If a variant does not have an image assigned, selecting it will not update the product image.

2. Ensure the Correct Product Is Assigned in GemPages

• Open the GemPages Editor and select the Product Module on your page.
• Verify the Select Product setting to ensure the right product is linked.
• If no product or the wrong product is assigned, variant images will not update properly.

Please refer to this article to learn more about how to assign products.

3. Use the Proper Variant Elements in GemPages

• GemPages supports variant selection with the Product Variants and Swatches element.
• Using unsupported custom dropdowns or elements that don’t connect variant selection to image updates may cause images not to change.
• Make sure you use and configure the correct variant element to link variant options with images.

For more information, please refer to this article: Product Variants and Swatches Element.

4. Product and Variants Must Be Active and Available on Online Store

• In Shopify Admin, the product status must be Active.
• The product must be published to the Online Store sales channel.
• Variants must still exist and be available.

5. Check for Conflicts or Custom Code Issues

• Custom code added in GemPages or Shopify theme might conflict with variant image updates.
• Temporarily disable any scripts related to image changes, sliders, or lazy loading to test if they cause the problem.

6. Clear Browser and Website Cache

• Sometimes the browser or website cache serves old images and prevents new variant images from loading.
• Refresh the page with Ctrl + F5 or clear browser cache.
• If you use caching plugins or a CDN, make sure caches are cleared.

7. Verify Image Format and Size

• Shopify recommends using JPG, PNG, or WebP image formats with reasonable file sizes.
• Very large or corrupted images may fail to load properly.

Check this article to find out how images on your page impact loading speed.

8. Check GemPages Product Module Settings

• Within the Product Module in GemPages, verify settings related to variant image display are enabled.
• Some toggles control whether selecting a variant updates the product image automatically.

9. Preview and Publish Your Changes

• Always Save your work and use the Preview mode in GemPages to test variant image switching before publishing.
• Publish your page only after confirming variant images update correctly on different variants.

If you have followed all these steps and your product variant image not show correctly, please contact GemPages Support with detailed information about your product and page so they can assist you further.