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

[lnde]

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. Could someone guide me on whether I should adjust the theme's code? Any tips on specific HTML, or CSS adjustments would be greatly appreciated.

This is how it looks at this moment:

Thank you!

[ecoboostify · Accepted solution]

It would be better to edit the theme's Liquid code.

However, I’ve tried creating a custom CSS code that might help:

1. Log in to Shopify > Online Store > Customize. (Screenshot)
2. Go to Theme Settings > Custom CSS. (Screenshot)
3. Copy the CSS code below, paste it into the Custom CSS box, and click Save.

@media screen and (min-width: 750px) {
  .product-info__block-item[data-block-id="quantity_selector"] {
    float: left;
    width: 30%;
  }
  .product-info__block-item[data-block-id="buy_buttons"] {
    float: left;
    width: 70%;
    margin-block-start: 3rem;
  }
  .product-info__block-item[data-block-id="buy_buttons"] + * {
    clear: both;
  }
}

[lnde]

Savior! Thank you so much, it worked perfectly. I have another question about adding the '-' and '+' to the cart drawer. If you have a solution, I’d greatly appreciate it. Have a great day!

[ecoboostify]

You're welcome—glad it worked perfectly for you!

Currently, I don't have a way to add the '-' and '+' to the cart drawer. I believe this issue would require more complex theme custom coding to handle properly.