How to change Featured Product Layout?

Store Design

Topic summary

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.

Summarized with AI on December 12. AI used: gpt-5.
4

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 

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

DaisyVo_0-1734610014670.png
DaisyVo_0-1734610014670.png767×542 255 KB

I hope this helps

Best,

Daisy