Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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
Unfortunately, it doesn't work for me. In the product settings I don't have this option.
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
I have variants added in products from the beginning.
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.
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[
Hello Michael, the else statement is incomplete. Can you send the whole code for us to try?
Thanks
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025