Variant picker in one row mobile (Prestige)

Store Design

Topic summary

A user wants to display variant picker buttons in a single horizontal row on mobile for the Prestige theme, instead of the default vertical stacking.

Proposed Solutions:

  • Custom CSS: The Prestige theme doesn’t offer a built-in layout toggle, so custom CSS could reduce button size and padding to fit variants horizontally. However, this approach may still cause wrapping on smaller screens or with additional buttons.
  • Dropdown conversion: Converting the variant picker to a dropdown format ensures it stays in one row regardless of screen size.

Resolution:
The user confirmed the dropdown solution worked successfully.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want the Variant picker in one row at mobile

Prestige Theme

image
image522×797 53 KB

1 Like
2
  1. Prestige is designed to stack variant buttons vertically on mobile for accessibility and touch spacing.
  2. The Shopify theme editor (Customize) doesn’t include a toggle or layout option for “variant layout: horizontal/vertical.”
  3. The only way to change that layout is through custom CSS

Can you handle one if I share you one?

3

Technically, you can make your buttons smaller, decrease padding etc with CSS.
(you’d need to share a (preview) link to your store to get code suggestions).

However, keep in mind that if you have another button, or somebody has a smaller phone, the buttons will still wrap onto the second line..

5

You can actually convert it to dropdown and it will be in the one row.

image
image1920×1021 105 KB

6

perfect worked, thank you

1 Like