Topic summary
A user seeks to reduce the size of the quantity selector box and align it horizontally with the “Add to Cart” button on the same row.
Initial Responses:
- Two community members requested the store URL and password (if protected) to provide a solution.
- The user shared their store URL: https://bestprecio.cl/
CSS Solutions Provided:
- Multiple CSS code snippets were offered targeting
.collection quantity-input.quantityand.quick-add__submitclasses in thebase.cssfile. - One solution suggested adjusting width percentages and using
float: rightto align elements horizontally.
Current Issue:
- The user successfully reduced the quantity box size but reports the layout still doesn’t display both elements on the same row as desired.
- After implementing the latest CSS code, the quantity box appears distorted or incorrectly styled (screenshot shared).
Status: The discussion remains ongoing with the alignment issue unresolved. Community members advised caution about granting store collaboration access for such CSS-only modifications.
Hi @gury ,
Would you mind to share your URL website? with password if its protected. Thanks!
Hello @gury
Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.
1 Like
Hello @gury
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.collection quantity-input.quantity.center.full {
max-width: 50%;
width: 100%;
margin: 0 auto;
}
.collection .quick-add__submit {
box-sizing: border-box;
max-width: 60%;
width: 100%;
margin: 0 auto;
}
1 Like
Thank you for the information. This edits are NO NEED collaboration. Please be careful giving access to your store. This can be done in inspect tools and we just give instruction that you can do it by yourself. If youll hire a developer then that would be the best time to give collaboration. Try this code.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.quick-add.no-js-hidden {
width: 70%;
margin: auto;
margin-bottom: 20px;
}
Result:
If youll like smaller just adjust the width.
I hope it help.
hi, thanks for the code, but it just reduce the size of quantity selector box, i want quantity selector and add to cart in the same line
like this photo
hi, i am able to reduce the size but i want to put quantity and add to cart in the same row
like this
@gury
Hello,
Add This CSS Go To Online Store > Select Theme > Edit code >Assets > base.css
br {
display: none;
}
product-form .form {
width: 70%;
float: right;
}
.collection quantity-input.quantity.center.full {
max-width: 23% !important;
width: 100%;
float: left !important;
}
.quantity__button.no-js-hidden.disabled {
width: 2.5rem !important;
flex-shrink: 1;
font-size: 1.2rem;
}
Like This
1 Like
hi, i have added the code in base.css but the quantity box is looking like this
