Product Variants Horizontally

[coastalcoffee]

Hi,

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

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

[Michael-Thomas · Accepted solution]

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.

[coastalcoffee]

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

[Michael-Thomas]

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. 

[Easify-Jolie]

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:

• This is the app setting:

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

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