Main issue: In a Featured Product section, thumbnail images stack below the main image. The requester wants a horizontal, clickable thumbnail gallery with navigation arrows, and also reports that “Hide other variants’ media after selecting a variant” does not work (variant images don’t change).
Proposed fixes: A helper first suggested adding Custom CSS via Theme Settings to resize thumbnails; then provided a page-specific CSS solution by inserting a style block in theme.liquid (scoped to a specific page ID) to set small thumbnail sizes and a full-width main image.
Outcome/feedback: The CSS changes only modified layout/size and did not make thumbnails clickable. On the target landing page, thumbnails remained unclickable and too small compared to the product page gallery the requester referenced. The variant-media hiding issue was not addressed by the provided solutions.
Status: Unresolved/ongoing. The requester still needs a horizontally scrolling, clickable thumbnail gallery with arrows like on the product page, and a fix for variant-specific media behavior. Screenshots were shared to illustrate the current and proposed layouts.
This is in regards to the Featured Product section. The thumbnails are appending underneath the main image, how do I add/ change the code so they’re normal horizontal thumbnails with navigation arrows?
Also 2nd part of the question is the “Hide other variants’ media after selecting a variant” isn’t working. When I select a variant, the variant images remain the same and never change.
To complete your requests, please follow these steps:
media-gallery.product__column-sticky slider-component:nth-child(3) > ul > li {
width: 30px !important;
}
Before:
After:
I hope this helps
Best,
Daisy
Hi DaisyVo,
Thank you for your solution, it’s actually for this page: https://petgrove.com/pages/cat-harness-and-leash-landing-awareness-t1
In order to fulfill your request, please follow these stepsStep 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
{% if page.id == 112269754614 %}
{% style %}
.featured-product.product.product--medium.grid media-gallery slider-component ul.product__media-list > li {
width: 25px;
height: 25px;
}
.featured-product.product.product--medium.grid media-gallery slider-component ul.product__media-list > li:first-child {
width: 100%;
height: auto;
}
.featured-product.product.product--medium.grid media-gallery slider-component ul.product__media-list > li:not(:nth-child(1)) * {
width: 25px;
}
{% endstyle %}
{% endif %}
Here is the result:
I hope this helps
Best,
Daisy
Is everything working well with the code?
If yes, please let us know if our reply is helpful by giving it a Like or marking it as a Solution!
Best,
Daisy
Hi Daisy,
The solution is not exactly what I’m looking for. I would like for the thumbnails to be clickable and to look like the ones from this page: https://petgrove.com/products/cat-harness-and-leash-set?variant=46962798330102
The solution you provided has unclickable thumbnails and they’re really small. Thank you for your help though, I appreciate the time and effort.
