Hello, is there a way to put the quantity selector next to the variant buttons at max 2 next to each other? I’m using dawn theme and my URL is: https://en.trendblend.eu/products/slimcharge
like this:
Is this possible?
Topic summary
Goal: Place the product quantity selector alongside variant option buttons (max two elements per row) in the Shopify Dawn theme; example layout provided via image and product URL. The image is central to visualizing the desired two-column arrangement.
Constraints and initial feedback: One responder claims it’s not feasible because the elements reside in different divs; CSS positioning could force it but may cause overlap when there are four variants.
Clarification: The store’s products have three or fewer variant pickers. The desired behavior is a two-column grid where, if the number of variant pickers is odd, the quantity selector occupies the empty spot next to a variant (applied on both mobile and desktop if possible).
Disagreement: Another participant asserts the layout is achievable and criticizes the “not possible” response; some comments were reportedly deleted, indicating moderation issues. No technical solution or code was shared.
Status: Unresolved. The thread seeks a concrete implementation (likely involving Liquid/HTML structure changes plus CSS grid/flex) to place the quantity selector within the same grid as variant options and handle responsiveness without overlap.
Hi @TrendBlend
It is not possible to do that because they both are in different divs. We can do this by using CSS positioning, but it’s not an authentic way because when you add four variations, it will overlap.
Hello @Mehran_Ali , all of my products have 3 or less variant choosers so I just want it to show like this:
VARIANT VARIANT
VARIANT QUANTITY
VARIANT VARIANT
QUANTITY
VARIANT QUANTITY
if you understand what I mean, so when the number of variant pickers is uneven the quantity picker should show next to a variant picker if possible.
Hey @TrendBlend , @Mehran_Ali why were my all comments deleted?
I don’t know I’m not even able to do that.
@TrendBlend, all of our comments were deleted because @Mehran_Ali falsely reported them. I assure you that it is possible. Please refrain from giving incorrect advice to others if you don’t have the relevant knowledge.
That’s a weird action of him. Can you do it for both mobile and desktop?
Or does someone else know how to do this and can maybe share code?