Clicking a variant does not change the photo

Clicking a variant does not change the photo

adrianovsky
Excursionist
32 1 11

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 

Replies 6 (6)

Shadab_dev
Shopify Partner
1255 64 132

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 

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
adrianovsky
Excursionist
32 1 11

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

Shadab_dev
Shopify Partner
1255 64 132

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

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
adrianovsky
Excursionist
32 1 11

I have variants added in products from the beginning.

Shadab_dev
Shopify Partner
1255 64 132

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.

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.

MichelKiwi
Tourist
3 0 1

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[