When clicking on the product, the main image changes to the variant image, so I want the main product image not to change when clicking on the product. and this is my website (https://qcg96d-rp.myshopify.com/)).
Topic summary
A Shopify store owner is experiencing an issue where the main product image automatically switches to a variant image when a product is selected. They want the main image to remain static and only show variant images when users actively click on specific variants.
Proposed Solutions:
- Rearranging images: Suggested reordering product images via drag-and-drop in the admin panel
- Custom JavaScript code: Multiple users provided code snippets to add to theme.liquid file above the
</body>tag - Removing variant image assignments: One suggestion was to leave variant images unassigned in the admin
Current Status:
The store owner tried the JavaScript solution but reported it’s still not working. Screenshots show they have variant images assigned to color options (A, B, C) and don’t want to delete these images—only control when they display.
One responder clarified this behavior requires custom code or a third-party app, recommending the Rubik Variant Images app with a demo video. There appears to be ongoing confusion about the exact desired behavior versus what’s technically achievable with standard Shopify settings.
1 Like
Hello, @bloomhome you need to follow some steps.
Go to the Online Store >>> Products >>> Open “Althea Vase” products
Then you can arrange the pictures through drag and drop with your sequence.
Thanks!
Hope you will get your answers
Then you can follow 2nd Method
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the above.
1 Like
This is because variant with color “A” has the image assigned to it. You can leave variant image empty to fix it. Can you please share how your product page looks in admin? Screenshot of variants and images would be helpful.
1 Like
Hi @bloomhome
Please follow the steps:
- Login in shopify admin.
- Click on the Online Store.
- Then click on the button next to Customize in live Theme.
- Click Edit Code.
- Search theme.liquid in the code in left hand side in your theme.
- Add the following code in the bottom of the file above tag
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
1 Like
Here’s my product page in admin , I don’t want delet variant images I want only show when click on it.
1 Like
@bloomhome , Did you apply the first method?
1 Like
1 Like
Unfortunately what you want won’t be possible without custom code or app. I am founder of Rubik Variant Images app and our app can solve this issue for you. We have done similar setup for other customers. You will also show only relevant images based on selected image. I recorded a video and showed how the app works.
The first image selected for the variant should also be displayed as the first image in the media.
I think there is a misunderstanding. I want the main image not to change after clicking on the product and to appear as it is, and the variant image only appears when clicking on it.