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.
1

I have a problem with the option I described in the title of the post. When I click on a variant when selecting a product it doesn’t change its picture. Could someone help me with this?

site: forgeofpower.com

2

I believe this is achievable from the product customiser itself. You have to add images for each variant and it should show at least thats how it works on most of the themes

1 Like
3

Unfortunately, it doesn’t work for me. In the product settings I don’t have this option.

4

Not in the product settings from the customizer. If you talking about that that’s not the one.

I am saying from inside the products. So from online store —>products then inside every product you should have options to add images for each of your variants. That’s from Shopify itself I believe so every theme complies with that atlest

1 Like
5

I have variants added in products from the beginning.

6

I get that. I am talking about adding images to them. Don’t you have this section which lets you add images to variants inside an individual product settings page.

If you don’t mind giving me collaborator access to your store, I can take a look. It could also be a coding issue inside of the theme.

1 Like
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[

8

Hello Michael, the else statement is incomplete. Can you send the whole code for us to try?

Thanks