Display multiple product variant selectors onto one line

altCookinghub
Excursionist
27 0 4

I'm using Minimal theme and have a couple products that have 2 or 3 variants. I'd like to display the variant selectors onto one row/line instead of one line per variant.

Anyone have experience adjusting the code on the product template or theme css on how I can do that?

Thank you in advance.

Replies 4 (4)

LitExtension
Shopify Partner
4860 1001 1133

Hi @altCookinghub

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file: https://i.imgur.com/7tm96JA.png

.product-single .selector-wrapper label{

  display: inline-block;

  margin-right: 10px;

}

.product-single .selector-wrapper .single-option-selector{

  display: inline-block;

}

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
altCookinghub
Excursionist
27 0 4

Hi @LitExtension 

Thank you for your suggestion but it doesn't appear to work.

This is what I got after adding the code into theme.css.liquid.

What did I do wrong or miss? Thank you so much in advance for your time.

altCookinghub_0-1624542684115.png

 

LitExtension
Shopify Partner
4860 1001 1133

Hi @altCookinghub

You want to show like this: https://i.imgur.com/zmHyoaL.png or https://i.imgur.com/sW8uXQy.png
I will help you make it. Because the instructions above are for: https://i.imgur.com/zmHyoaL.png

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
altCookinghub
Excursionist
27 0 4

Thank you for the explanation. I was able to get the result that you provided.