How can I position the quantity selector directly next to the ‘Add to Cart’ button? (Impact theme)

Store Design
, , , ,
1

I’m using the Impact theme for my Shopify store, and I’d like to move the quantity selector so that it appears directly next to the ‘Add to Cart’ button on the product page.

Currently, the quantity selector appears above the button, but I want both elements to sit side by side for a cleaner and more user-friendly layout. Please give me code. Thank you.

Store: Svelteclothes

Password: Admin

This is how it looks at this moment:

1111
11111795×649 72.4 KB

What i want

image
image338×106 3.53 KB

1 Like
3

How can I fix this? Please help me. Thank you.

5

Hi @dreamtechzone_5

For this, the HTML structure will need to be changed.

Best regards,
Devcoder :laptop:

1 Like
6

Please give me the code. Thank you.

1 Like
7

Hi @dreamtechzone_5

This is not possible with CSS alone. We’ll need to make changes in the theme code.

8

Please add this code to Custom CSS in Theme settings

.product-info__buy-buttons form.shopify-product-form {
    width: calc(100% - 159px);
    float: right;
    margin-top: -89px;

}
.product-info__buy-buttons form.shopify-product-form button.button {
    height: 50px;
    line-height: 1;
}

Screenshot 2026-01-19 at 14.29.56
Screenshot 2026-01-19 at 14.29.561920×870 108 KB

Best regards,
Dan from Ryviu: Product Reviews App

1 Like
9

It’s fine in desktop mode but the box size doesn’t look good in mobile mode. It would be good if this was fixed. Thanks.

Screenshot 2026-01-19 133902
Screenshot 2026-01-19 133902526×373 11.6 KB

10

Good start, but:
Need to be more careful as this is where error messages are output.
Additional buy buttons, if output would look bad.
Gift card form is also frequently positioned there, if there is a plan to sell them.

Screenshot 2026-01-19 at 6.08.42 PM
Screenshot 2026-01-19 at 6.08.42 PM911×495 37.8 KB

It’s a complex modification without having the theme to test different options.

1 Like
11

Please add more code to solve the issue on mobile

@media (max-width: 749px) {
.product-info__buy-buttons form.shopify-product-form {
    margin-top: -75px !important;
}
}
1 Like
12

The Add To Cart button can be kept a little smaller in desktop mode.

13

so please update all code to this

.product-info__buy-buttons form.shopify-product-form {
    width: calc(100% - 159px);
    float: right;
    margin-top: -94px;

}
@media (max-width: 749px) {
.product-info__buy-buttons form.shopify-product-form {
    margin-top: -75px !important;
}
}
14

I don’t understand. It would be better if you could give me the full code file. Thank you very much.

15

Please replace previous code with this one

.product-info__buy-buttons form.shopify-product-form {
    width: calc(100% - 159px);
    float: right;
    margin-top: -94px;
}
@media (max-width: 749px) {
.product-info__buy-buttons form.shopify-product-form {
    margin-top: -75px !important;
}
}