Numerous issues on the product page

1. Product gallery thumbnail click behavior is incorrect
When I click a thumbnail image on the left,
the main preview on the right does not show the selected image,
but instead displays the next/second image in the gallery.

2. Product variation images do not switch
I have already assigned individual images to each variation under Product → Variations,
but selecting different variations (Style/Size/Color) does not update or switch the main image.

Variation → No image change.

3. Main gallery displays two images overlapped/stacked together
The main product image area is showing two images at the same time,
each image cut in half vertically.
It looks like the gallery script is not initializing correctly,
so multiple images are being rendered in the same container.

There is privacy

Hello,

01. Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site, and then check the issue. I am sure your issue will be solved. Then activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

02. To change the image on attribute click, please edit Product Attribute and enable the Change product image on attribute click option.

Then, edit the terms of the attribute and upload the Image Swatch. https://prnt.sc/ryIZHQaYZSkQ

Enable the Additional variations images option in Theme Settings > Shop > Variable products: https://take.ms/aRzS2 and upload appropriate images to the variations: https://take.ms/MiDHc

Then the images will change by clicking on the swatches.

You can read more here https://xtemos.com/docs-topic/variable-products-and-swatches/ and https://xtemos.com/docs-topic/attribute-swatches/, https://shrturl.app/ju1iWc

03. Please share some screenshots for better understanding that demonstrate the problem so we can understand and reproduce it on your website.

Best Regards,

I have already followed step 1 and step 2 as suggested, but the issue still persists.
Could you please log into my store and help me fix it directly?
I can’t find where the problem is, and I am really overwhelmed and stuck at this point.
Thank you.

Hello,

Please confirm the permission for plugin deactivation and switching to the parent/default theme for testing.
Looking forward to collaborating with you!

Best Regards,

You may take any action necessary — as long as everything can be fixed properly.
If possible, please also let me know what caused the issue so that I can avoid making the same mistake in the future.
Thank you very much.

Hello,

The issue is caused by a custom CSS snippet added in Appearance > Customize > Additional CSS.

This part of the code is breaking the product gallery thumbnail click behavior. Please delete or comment out this custom CSS , and the thumbnails and variation images will start working normally again.

Best Regards,

Thank you, I realized I had forgotten about that!
However, I still have one more problem.
When my store only has four product categories, the icons align to the left side of the page instead of being centered.
I’ve tried adjusting multiple settings, but none of them seem to work.
How can I make the four category icons display centered?

Hello,

Please share some screenshots for better understanding, along with the page URL that demonstrates the problem, so we can understand and reproduce it on your website.

Best Regards,

I have uploaded the picture and it is in the file attachment.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I can further check on your site and give you a possible solution?

Best Regards,

[Author]

Posts