Product Variants Horizontally

Store Design
, , ,
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.