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[
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025