Move the quantity selector to be on it's own line, above add to cart

Store Design
, ,

Topic summary

A user wants to reposition the quantity selector on product pages to appear on its own line directly above the “Add to Cart” button.

Proposed Solution:
One responder provided CSS code to achieve this layout change:

  • Navigate to Online Store → Theme → Edit code
  • Add custom CSS to theme.css or base.css
  • The code uses flexbox (flex-direction: column) to stack elements vertically
  • It reorders the quantity input and add-to-cart button using the order property
  • Includes responsive adjustments for desktop views (min-width: 1024px)

Current Status:
The original poster mentioned finding an alternative solution that works better for their needs before the CSS solution was posted. The discussion remains open with no confirmation of which approach was ultimately used or details about the theme in question.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone,

As the title suggests, I want to move the quantity selector on all product pages to it’s own line directly above the add to cart button.

Could you please help me with how to do it?

Thanks!

Chris

2

Hey David,

Thanks but I have just found another solution that works better - Appreciate your reply though!

3

Sure @cardboardhouse please tell me which theme you are using on your store.

4

Hi @cardboardhouse

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.product-info__add-to-cart {
  display: flex;
  flex-direction: column; 
  gap: 1rem; 
}

quantity-input {
  order: 1;
}

.product-info__add-button {
  order: 2;
}
.product-info__add-to-cart quantity-input {
  
    margin-inline-end: 0px !important;
   
}
@media (min-width: 1024px) {
    .product-info__add-to-cart quantity-input {
        flex-basis: 0px !important;
    }
}

Result:

websensepro_0-1747921705050.png
websensepro_0-1747921705050.png1316×533 277 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!