We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to only display selected product variant images on my page?

How to only display selected product variant images on my page?

Finn4
Explorer
127 0 15

With the Image variants for my products, it creates a huge list of images on the product page. I only want the variant that is selected to show up not all the others when they are not being selected. Any help would be amazing.

Refresh Theme

https://hothugger.com/products/hot-hugger?variant=43427930767616

Screenshot 2022-11-23 at 16.27.54.png

Screenshot 2022-11-23 at 16.28.10.png

Replies 5 (5)

LitExtension
Shopify Partner
4963 1010 1192

Hi @Finn4,

You can follow the instructions below, refer link

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
umidaydemir
Shopify Partner
33 0 2

Hi @Finn4,

I’ve checked your product page and noticed that you’re still facing the issue.

 

umidaydemir_0-1732009999712.png


When all images are displayed upon selecting a variant, it’s not ideal for the user experience. To solve this easily, you can use the Rubik Variant Images app. It ensures that only the images related to the selected variant are shown, providing a much smoother experience for customers.


Also, it looks like you have only 3 products on your site, and since the app is free for up to 5 products, you can use all its features for free.

I hope this solution helps!

 

https://apps.shopify.com/rubik-variant-images/

 

BSS-Commerce
Shopify Partner
3478 465 561

Hi @Finn4 

 

You can simply show a selected amount of variant products by adding a CSS property to section-main-product.css. For example, if you only want to show the first 2 variant images on the product page, then you just need to insert this code at the bottom of the file.

 

.thumbnail-list li:not(:nth-child(-n+2)) {
  display: none
}

 

Replace 2 in nth-child(-n+2)  with the number of the first variant images you want to show out. The order of variant images is the same as that of media variant images on the Shopify admin product page.

 

I hope that it's helpful for you. In case you want to customize more for the product page, then you can try out our Products & Options app which allows you to create infinite product options including Image swatches, text, numbers, checkboxes, dropdowns, radio buttons, and buttons.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


Product Labels by BSS | B2B Solution & Custom Pricing


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Hey_Jak
Shopify Partner
138 9 26

Display selected product variant images in Refresh theme

- Save money and boost your revenue with high-converting, ready-to-use Shopify sections and snippets.
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.

MRamzan
Shopify Partner
533 3 46

You can display selected color images:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112