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.

0 Likes
LitExtension
Shopify Partner
1210 155 216

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
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

 

0 Likes
LitExtension
Shopify Partner
1210 155 216

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
altCookinghub
Excursionist
27 0 4

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

0 Likes