how to get quantity selector and variant picker next to eachother?

Solved

how to get quantity selector and variant picker next to eachother?

tijs
Tourist
7 0 0

i want tot have the quantity selector next tot the variant picker like this:

Schermafbeelding 2023-10-12 192249.png

Accepted Solution (1)
laddisahsi
Shopify Partner
385 38 40

This is an accepted solution.

@tijs 

Please add this code in body class

<body class="{% if template == 'product' %} {{ product.collection.first }} {% endif %}">

 

Then class will be added use that body class parent

.neckless .product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.neckless .product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}




 

It will work only for that class

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

View solution in original post

Replies 3 (3)

laddisahsi
Shopify Partner
385 38 40

Hi @tijs 

Please use this css

.product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
tijs
Tourist
7 0 0

hi, this works but is there any possibility to only apply this to a certain product template? For example only applying this to my necklace collection?

laddisahsi
Shopify Partner
385 38 40

This is an accepted solution.

@tijs 

Please add this code in body class

<body class="{% if template == 'product' %} {{ product.collection.first }} {% endif %}">

 

Then class will be added use that body class parent

.neckless .product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.neckless .product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}




 

It will work only for that class

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!