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

tijs · ‎10-12-2023

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

vpsbohra · ‎10-13-2023

@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

vpsbohra · ‎10-13-2023

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 · ‎10-13-2023

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?

vpsbohra · ‎10-13-2023

@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!

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