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.
