Dawn align add to cart and quantity on the same row

Store Design
, ,
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