Product Variants Horizontally

Store Design
, , ,

Topic summary

A user seeks to display product variant pickers horizontally instead of vertically stacked on their product page.

CSS Solution Provided:

  • Custom CSS code was shared targeting the variant-picker element using CSS Grid
  • Sets display to grid with auto-fit columns and gap spacing
  • Code should be placed in theme settings > custom CSS

Alternative App Suggestion:

  • Easify Product Options app recommended as a no-code solution
  • Allows flexible layouts with column width customization (50% each for side-by-side display)
  • Screenshots demonstrate the configuration interface and resulting horizontal layout

Current Status:

  • Initial CSS implementation appeared to work but reverted after page refresh
  • Possible caching issue identified—solution provider confirms the CSS displays correctly on their end
  • User advised to test in incognito/private browsing mode to rule out browser cache

Resolution: Ongoing—awaiting confirmation whether cache clearing resolves the persistence issue.

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

Hi,

How can I add my variant pickers side by side horizontally instead of stacked vertically?

https://www.coastalcoffeecollective.com/products/toro-canyon-espresso

2

Hey @coastalcoffee

Try using this CSS by placing it it under them settings > custom CSS

div.product-info__block-item[data-block-type="variant-picker"] variant-picker.variant-picker {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
}

Hope that helps.

1 Like
3

Hi @coastalcoffee

You can try Easify Product Options—it’s suitable for designing product options with flexible layouts and no coding required. It lets you display variant pickers side by side and customize them to fit your store’s design. Here’s how it works:

  • This is the result:

EasifyJolie_0-1742200684510.png
EasifyJolie_0-1742200684510.png1069×545 83.3 KB

  • This is the app setting:

EasifyJolie_1-1742200831682.png
EasifyJolie_1-1742200831682.png1332×568 37.9 KB

To display your options horizontally, set each column width (%) to 50:

EasifyJolie_3-1742201007211.png
EasifyJolie_3-1742201007211.png1327×564 49.2 KB

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! :hugs:

4

This worked at first & then I refreshed the page and it went right back! This is the closest I got to a solution tho!

Our website is coastalcoffeecollective.com

5

Strange, it seems to show up just fine when I go to the site. Can you try in an incognito window? It could be your site is showing an older cache.