Hi everyone
I would like to align these two segments in one row. IS there anyway to do this?
Thank you
Topic summary
A Shopify store owner using the Crave template wanted to align the quantity selector and “Buy Now” button in a single horizontal row on their product page.
Solution provided:
- Rearrange section blocks so the Cart button block directly follows the Quantity block
- Add custom CSS code to the Product Info section’s “Custom CSS” setting (not in a separate Custom Liquid section)
- The CSS uses flexbox to display elements in one row, with the quantity selector taking 15rem width and the button filling remaining space
Key troubleshooting:
Initial confusion occurred when the user placed the code in a “Custom liquid” section instead of the Product Info section’s built-in “Custom CSS” field. Once corrected with visual guidance showing the exact location, the solution worked successfully.
Status: Resolved - the alignment now displays as intended on the product page.
You need to re-arrange section blocks so that Cart button block is directly after the Quantity block. Then, add this to the “Custom CSS” setting of Product info section:
product-info.product__info-container {
display: flex;
flex-wrap: wrap;
}
product-info.product__info-container>* {
width: 100%;
margin-bottom: 0;
}
product-info .product-form__quantity {
width: 15rem;
flex-basis: auto;
}
product-info .product-form__quantity+div {
width: calc(100% - 15rem);
}
Hi there, I rearranged as you said. I also clicked theme. and customized the product page with your code. It is not working. Did I place the code to wrong section?
“Custom liquid” section is not needed. You need to go to your main “product info” section, scroll down its settings and paste my code into “Custom CSS” there.
Thank you it worked!