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

Store Design
, , , ,

Topic summary

A user wants to position the quantity selector and variant picker side-by-side on their product page, sharing a reference image of the desired layout.

Solution Provided:

  • Custom CSS was offered to display both elements inline with 49% width each
  • Code targets .product variant-selects and .product-form__input.product-form__quantity classes
  • Uses display: inline-block and vertical-align: top properties

Refinement Request:
The original poster asked to apply this styling only to specific product templates (e.g., a necklace collection) rather than site-wide.

Targeted Solution:

  • Add a custom body class (e.g., .neckless) to the specific template
  • Prefix the CSS selectors with this body class to limit scope
  • This ensures the layout change applies only to products with that class

Status: The solution was marked as accepted, with the conversation concluding after the template-specific implementation was explained.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

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

Schermafbeelding 2023-10-12 192249.png
Schermafbeelding 2023-10-12 192249.png352×280 8.21 KB

2

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

3

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?

4

@tijs

Please add this code in body class

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

1 Like