Shopify themes, liquid, logos, and UX
i want tot have the quantity selector next tot the variant picker like this:
Solved! Go to the solution
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
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
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?
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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025