How to change Featured Product Layout?

[jadedheart32]

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.

[DaisyVo]

Hi @jadedheart32 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

media-gallery.product__column-sticky slider-component:nth-child(3) > ul > li {
    width: 30px !important;
}

Before: 

After: 

I hope this helps

Best,

Daisy

[jadedheart32]

Hi DaisyVo,

Thank you for your solution, it's actually for this page: https://petgrove.com/pages/cat-harness-and-leash-landing-awareness-t1

[DaisyVo]

HI @jadedheart32 

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 </head>

{% 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

[DaisyVo]

Hi @jadedheart32 

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

[jadedheart32]

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.