On products with a large number of variant values for a single option (e.g. 20 colors on a water bottle), the swatch grid wraps into a tall, multi-row vertical block instead of a compact, scrollable/horizontal control. Because the swatches sit above the fold-pushing content, selecting a swatch changes the product image at the top of the page, but the customer is left scrolled down next to the swatches — with no auto-scroll-into-view — and has to manually scroll back up to see the color/image they just picked.
Summary: Swatches stack vertically consuming significant page height; no scroll compensation occurs; customer must scroll up manually to confirm and view their selection.
Impact:
Desktop: severe — swatch block frequently pushes far enough that the gallery is fully out of view when interacting.
Mobile: noticeably less severe, likely because viewport scroll position/gallery proximity differs and swatches wrap in fewer effective rows relative to screen space.
Anybody facing the same bad UX/UI on their shop? Thanks.
No issues that I can see. Unless you are choosing the button style (which obviously is going to be a very long block for 20+ colors), I don’t know what you are talking about.
max-height: 8.25rem is the knob. That is about 2 rows. Raise it for more rows before it scrolls.
This also works if your colours show as round swatches.
No-code alternative
In the same Variant picker block, set Style to Dropdowns. The 20 colours collapse into one dropdown. Trade-off: they are no longer all visible at once.
I’ve run into a similar UX issue before, especially on products with a large number of color or image swatches.
From what I’ve seen, this is usually more of a theme behavior than a Shopify limitation. Most themes simply wrap the swatches into multiple rows once there are too many values, but they don’t automatically keep the product gallery in view when a new swatch is selected. As a result, the image updates correctly, but customers have to scroll back up to see what they just selected.
If your theme doesn’t offer an alternative layout, you could look at a few approaches:
Display the swatches in a horizontally scrollable row instead of allowing them to wrap into many lines.
Split a large number of choices into logical groups where it makes sense.
Use a product options app that offers more flexible swatch layouts and display styles than the default theme.
For example, I’ve used Easify Custom Product Options on stores with lots of color/image choices. It provides different swatch display styles, which can help keep the option section more compact compared to a long wrapped grid. The auto-scroll behavior itself is still controlled by the theme, but improving the swatch layout can make the overall experience much cleaner.
Out of curiosity, which theme are you using? That would help determine whether this can be solved with theme settings, a small customization, or a different swatch layout.
Hi @fykoulas ,
Yes, we’ve encountered a similar UX issue on stores with a large number of color swatches.
When there are many variant values, the swatches wrap into multiple rows, pushing the product gallery out of view. As a result, selecting a swatch updates the main product image, but customers don’t immediately see the change because they’re focused on the swatch area and have to scroll back up manually.
A few approaches that have worked well are:
Display swatches in a horizontal scrollable row instead of allowing them to wrap into multiple rows.
Make the swatch container sticky while scrolling, so it’s always accessible.
Automatically scroll the product media into view (or smoothly scroll to the gallery) after a swatch is selected, especially on desktop.
Consider limiting the number of visible swatches initially and providing a “Show more” option for products with many variants.
In our experience, a horizontally scrollable swatch list provides the best balance between usability and page layout, particularly for products with 15–20+ color options.
Would you be able to share your store URL (or a link to one of the affected product pages) along with the theme you’re using? That would help others in the community reproduce the experience and determine whether this is the default behavior of the theme or something influenced by customizations.
With a live example, it will also be easier to assess whether the swatch layout and lack of automatic scroll compensation are expected theme behavior or a UX issue that could be improved.
Hello there @fykoulas
I’ve witnessed that with products that have a lot of values in one option. The problem is that the swatch container can extend beyond the viewport, and the selection does not keep the customer visually grounded.
A practical solution is to limit the height of the swatches container and make it horizontally or vertically scrolable, keeping the selected value visible. If you know how to edit your theme, this is something you can generally fix with some targeted CSS and a little bit of JavaScript without having to change your product data.
