Clicking a variant does not change the photo

Technical Q&A
, , ,

Topic summary

A user reports that clicking product variants does not update the displayed image on their Shopify store (forgeofpower.com).

Initial troubleshooting suggested adding images to variants through Shopify’s product settings (Online Store → Products → individual product page), which should work across most themes. The original poster confirmed variants exist but lacks the image assignment option in their product customizer.

A potential coding solution was proposed involving:

  • Editing the theme’s theme.js or theme.js.liquid file
  • Adding custom JavaScript code at the end to handle variant image switching

However, the provided code snippet is incomplete — the else statement cuts off mid-implementation. Another user requested the complete code to test the solution.

The issue remains unresolved and may stem from either:

  • Theme-specific limitations requiring code modifications
  • Missing variant image configuration in Shopify admin

A collaborator access offer was made to investigate further.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
7

Hi for solve this probleme u need to follow these steps :

1) From your Shopify admin, go to Online Store > Themes.
2) Find the theme you want to edit, click the … button to open the actions menu, then click Edit code.
3) Open the theme.js or theme.js.liquid file in your Assets folder.
4) At the end of the file, paste the following code:

const selectVariantByClickingImage = {
_createVariantImage : function ( product ) {
const variantImageObject = {};
product.variants.forEach((variant) => {
if (typeof variant.featured_image !== ‘undefined’ && variant.featured_image !== null) {
const variantImage = variant.featured_image.src.split(‘?’).replace(/http(s)?:/, ‘’);
variantImageObject[variantImage] = variantImageObject[variantImage] || {};
product.options.forEach((option, index) => {
const optionValue = variant.options[index];
const optionKey = option-${index};
if (typeof variantImageObject[variantImage][optionKey] === ‘undefined’) {
variantImageObject[variantImage][optionKey] = optionValue;
} else {
const oldValue = variantImageObject[