Goal: Align the “Quantity (X in cart)” text to a single line and make the quantity +/- controls centered and full-width like the Add to cart button on both desktop and mobile (Shopify Dawn 14.0.0).
Context: Helpers requested a store link/password to inspect, but the site isn’t published yet. The theme is in default, editing phase.
Proposed fix: Add custom CSS in base.css to force the quantity label and container to 100% width, effectively expanding and centering the quantity controls. (CSS = styling rules for layout/appearance.)
Outcome: The CSS change resolves part (2) — the add/remove quantity controls now span width and are centralized.
Remaining issue: Part (1) persists — “Quantity (X in cart)” still wraps/misaligns and is not on a single line.
Status: Partially solved. Further CSS or layout adjustments are needed specifically for the “Quantity (X in cart)” text alignment. Screenshots were shared to illustrate the issue and the partial fix. Discussion remains open pending additional guidance or access to the live store for precise tweaks.
Hi all,
(1) I need to edit the alignment for “quantity in cart” from 3 separate line to just a single line for both desktop and mobile.
(2) I would like the add / remove quantity button to be centralized and take up the width similar to “add to cart” button.
Thank you
Can you send the link to your site?
Hi @info_diri ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
i have yet to post the website. it is in the editing phase. it is currently in the default dawn theme version 14.0.0
Hi @info_diri
You can try the following steps:
product-info .product-form__quantity .quantity__label {
width: 100% !important;
}
product-info .quantity {
width: 100% !important;
}
Result:
I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!
Thank you for your reply. Your code solved part (2) but not part (1).
“Quantity (X in cart)” is still not in the proper alignment.
