Dawn Variant dropdown two variant per row

[Joachimgolf]

Hello!

I am using the Dawn theme and wanted to align two out of the three variant dimentions on product page for desktop. Since Shopify has a limit of three variant dimmentions, two variant options would have to be side-by-side, and the third underneath the first option.

Is there a simply way to do this? Here is an illustration, the ideal is for the variant drowdowns to be 40% wide each, leaving 10% padding between the variant boxes.

[BSS-Commerce]

Hi @Joachimgolf

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Joachimgolf]

Hello @BSS-Commerce !

Yes of course, here is a preview link. The store is still in development: https://7w30mehutcgmn3bd-50682036424.shopifypreview.com

Here is s product example that has three variants: https://7w30mehutcgmn3bd-50682036424.shopifypreview.com/products/ping-g430-max-driver

Thank you!

[BSS-Commerce]

Hi @Joachimgolf

Please try these steps:

• Step 1: Online Store → Themes → Edit code:

• Step 2: Find the file base.css, add this code at the end of the file, and click Save:

.product__info-container variant-selects {
	display: flex;
    flex-wrap: wrap;
}

.product__info-container variant-selects .product-form__input{
    flex: 50%;
    width: 100%;
}

• Step 3: Check the results on the product page. We hope that you will get the same results

[Joachimgolf]

Hello @BSS-Commerce !

Excellent stuff, worked perfectly. Thank you!

[Joachimgolf]

Hello again @BSS-Commerce !

I had some issues with the codes now, and now it only displays on mobile for some reason. Ideally i just want the variants to be grouped like this on desktop, not on mobile.

Is there a fix for that?

[BSS-Commerce]

Hi @Joachimgolf

Please try the following steps:

• Step 1: Online Store → Themes → Edit code

• Step 2: Find the file base.css, delete the code we gave you in the previous reply and replace it with this code and click Save:

@media screen and (min-width: 1024px) {
.product__info-container variant-selects {
	display: flex;
    flex-wrap: wrap;
}

.product__info-container variant-selects .product-form__input{
    flex: 50%;
    width: 100%;
}
}

It will help you display on mobile screen the way you want.

[Joachimgolf]

Hello @BSS-Commerce !

Thank you for your reply. I did try that, but i am still stuck on it not working correctly on desktop. From what i can tell, there is a conflict with the user agent (chrome) adding a “display: block”, which dont allow the flex-warp to function.

Have a look here: https://4mvnctbhs2w7diw5-50682036424.shopifypreview.com/products/ping-g430-max-driver