Shopify themes, liquid, logos, and UX
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
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
Hi @Finn4,
You can follow the instructions below, refer link
Hope it helps!
Hi @Finn4,
I’ve checked your product page and noticed that you’re still facing the issue.
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/
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
Display selected product variant images in Refresh theme
You can display selected color images: