make product page variants picker in the same row

[Domisana]

Hi can someone help me make variants in the same row like this example:

this is my website: domisana.com, on my website it looks like this:

It is really annoying, can someone help me with CSS and make it into same row, especially for this product https://domisana.com/products/cozy-plush-rabbit-slippers


Both on mobile and PC I want to achieve this,

Thanks!

[Moeed]

Hey @Domisana 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
variant-selects {
    display: flex !important;
    width: 31% !important;
    gap: 1rem !important;
    text-align: -webkit-center !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Domisana]

thanks it works perfectly for this product, but now products that have single variant are not aligned in the middle and are not visible entirely, can you make it align in the middle and also make variant full width if it is only 1 variant?

[DaisyVo]

Hi @Domisana ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
variant-selects {
    display: flex !important;
    width: 33% !important;
    gap: 4px !important;
    text-align: center !important;
}
} 

Here is the result:

Please let me know if it works!

Best,

Daisy.

[Domisana]

thanks it works perfectly for this product, but now products that have single variant are not aligned in the middle and are not visible entirely, can you make it align in the middle and also make variant full width if it is only 1 variant?

[DaisyVo]

Hi @Domisana 

As you are using Dawn theme, here are the detailed steps (please noted to delete the old code you add before first):

1. Go to Online store > Edit code > Check the file named: product-variant-picker.liquid: https://prnt.sc/zfWTZUTy3gjy

2. Add this code to this file

{% assign checkForLoopLength = forloop.length %}

3. Also in this file, scoll down at the end: https://prnt.sc/kNkf2SokN3ew

then add this code at this positon:

{% style %}
{% if checkForLoopLength == 3 %}
   @media screen and (max-width: 768px){
    variant-selects {
        display: flex !important;
        width: 33% !important;
        gap: 4px !important;
        text-align: center !important;
    }
  }
{% endif %}
{% endstyle %}

Please let me know if it works as expected!

Best,

Daisy

[Domisana]

Unfortunately no, still not aligned in the center

[Domisana]

Also this code has some bug, whenever i click on pick different variant entire row doubles like this and then dissapears

[websensepro]

Hi @Domisana 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:768px){
.select__select {
    width: 12.9rem !important;
    font-size: 14px;
    padding: 8px !important;
 } 
variant-selects#variant-selects-template--17916246720670__main {
    margin-top: 45px;
    display: ruby-text;
 }

.product__info-container>*+* {
    margin: 1.5rem 0;
 }
}
@media(max-width:767px){
.select__select{
   width: 14.5rem !important;
 }
}
@media(max-width:472px){
.select__select{
   width: 11.7rem !important;
}

}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Dan-From-Ryviu]

Hi @Domisana 

Please add this code to Custom CSS in Online > Themes > Customize > Theme settings. 

variant-selects {    
    display: grid !important;
    justify-items: stretch;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    gap: 10px;
    text-align: center;
}

[Domisana]

It works, but not ok, it bugs, duplicates row, look at the screen record https://streamable.com/498i2m