Goal: Adjust Shopify Impact theme product form so the quantity selector appears next to (inline with) the Add to Cart button rather than below it. The poster seeks CSS/theme guidance to replicate an example layout shown in an image.
Attempts and context: Multiple tries reported without success; no code shared. A screenshot illustrating the desired result was uploaded and is central to understanding the request.
Diagnostics: Another participant asked for a live store/product link to inspect markup and theme structure. The poster provided a product page URL to facilitate troubleshooting.
Current status: No CSS or Liquid solution has been proposed yet and no resolution reached. The thread remains open, awaiting review of the shared product page and concrete guidance on aligning the quantity selector and Add to Cart button on one row.
I am using the impact theme and I would like to have the quantity selector next to the add to cart button. I have tried everything but nothing seems to work. Please can someone help me to do this. I will post a screenshot of an example that I would like to achieve.
Thanks in advance!
@user4253 can you post a link to your store?
@user4253 you will need to edit the Buy buttons block’s code and render the quantity-selector in there.
Doing this change will require going through the code of the quantity selector button and seeing how to move it to the Buy Button instead. Check if something like {% render 'quantity-selector %} is being used there, if it is then adding that line to the Buy buttons block should put you close to what you need.
Technically, this can be done with CSS only.
Would need to reorder section blocks properly and account for error messages or gift card form.
I’ve shared a solution for Dawn family here: Quantity selector and Add to cart button next to each other (Sense 15.4.1) - #2 by tim_1,
yours should be very similar, but need to experiment with implementation.
Can start with CSS code like this:
.product-info {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
}
.product-info > * {
width: 100%;
}
[data-block-type="quantity-selector"],
[data-block-type="buy-buttons"] {
width: max-content;
margin-bottom:0;
align-self: flex-end;
}
[data-block-type="buy-buttons"] {
flex-grow: 1;
}
quantity-selector.quantity-selector, [data-block-type="buy-buttons"] [type="submit"] {
min-height: 60px;
display: flex;
justify-content:center
}
thankyou very much for looking into this. This does actually work but on mobile it does not and also it caauses all of the sections to have more spacing in between them. Would there be any way to fix this?
Yeh, for gap fix you can try this amended code instead:
.product-info {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-info > * {
width: 100%;
margin: 0;
}
[data-block-type="quantity-selector"],
[data-block-type="buy-buttons"] {
width: max-content;
margin-bottom:0;
align-self: flex-end;
}
[data-block-type="buy-buttons"] {
flex-grow: 1;
}
quantity-selector.quantity-selector, [data-block-type="buy-buttons"] [type="submit"] {
min-height: 60px;
display: flex;
justify-content:center
}
I see it ok on mobile.
For better troubleshooting, create a theme duplicate, apply my code there and share a preview link to that theme.
