Dawn align add to cart and quantity on the same row

Store Design
, ,

Topic summary

A user seeks to align the quantity selector and “Add to Cart” button on the same horizontal row in a Dawn theme product page.

Two CSS solutions were provided:

  1. Direct theme file editing approach: Modify the section-main-product.css file by adding CSS that uses display: inline-block and the :has() selector to position elements side-by-side. Includes specific template ID targeting and transform adjustments.

  2. Custom CSS feature approach (recommended): Use Shopify’s custom CSS feature instead of directly editing theme files. This method provides a simpler fallback using display: inline-block with 49% width for both quantity and button containers. Uses attribute selectors ([id^="Quantity-Form-template"]) for broader compatibility.

Important considerations noted:

  • The CSS :has() selector is not yet supported in Firefox
  • Accelerated checkout buttons (“Buy Now”) may affect layout proportions
  • Custom CSS is preferred over direct file editing for easier theme maintenance
  • Height/vertical alignment may need adjustment based on specific needs

The discussion remains open with no confirmation of which solution was implemented.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, does anyone know how to align the quantity button and add to cart on the same line?

Also make the quantity button width smaller?

Thank you!

julytwentysix.co

2

Hi @Idaya,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-main-productt.css

Step 3: Paste the below code at bottom of the file → Save

@media(min-width:767px){
div#Quantity-Form-template--16095234916514__main{
display:inline-block
}
div#Quantity-Form-template--16095234916514__main~div:has(.product-form){
    display: inline-block !important;
    transform: translateY(4px) !important;
}
div#Quantity-Form-template--16095234916514__main~div:has(.product-form) .product-form__buttons{
display:flex !important;
}
div#Quantity-Form-template--16095234916514__main~div:has(.product-form) .product-form__buttons [data-shopify="payment-button"]{
min-width:163px !important;
margin-left:5px 
}
}

PageFlyVictor_0-1681532043122.png
PageFlyVictor_0-1681532043122.png1968×604 52.8 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

Avoid directly editing files if possible use new custom css feature. Roughly in the product forms section custom css, or the themes custom css try the following CSS rules.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

This is simpler fallback for browser not supporting the css feature has() that should come before any rules using has(). It assumes quantity comes before the buy-buttons blocks in the themes settings. Tailor height to need or use display:table-cell.

[id^="Quantity-Form-template"], [id^="Quantity-Form-template"] + div {
    width: 49%;
    display: inline-block;
    /* display: table-cell; */
    /* height: 150px; */
    vertical-align: middle;
}

Be aware that accelerated buy buttons (the “Buy it Now”) can end up either not being present or needing more space than assumed. Messing up the layout proportions when trying to force everything on one line.

CSS has() is not supported as yet in firefox.

https://caniuse.com/css-has

And has() being required is because for some reason shopify likes to ship empty divs when there’s no block info , leaving selector info off of import containing elements in themes.

https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L13