Hi,
I want to place Quantity selector next to Add to Cart. I use Dawn theme for my store.
My current store:
The View that I’m expecting:
Website: https://hausi.nl/
PW: theepa
Topic summary
A user wants to reposition the quantity selector to appear next to the Add to Cart button in their Dawn theme store, rather than stacked vertically.
Proposed Solution:
A respondent provided a two-step CSS and JavaScript implementation:
-
CSS modifications (base.css):
- Apply flexbox layout to
.product-form__buttons - Add spacing between elements with a 10px gap
- Adjust button height and margins
- Control quantity input flex properties
- Apply flexbox layout to
-
JavaScript modifications (global.js or theme.js):
- Add code to reposition the quantity input element next to the submit button
- Includes interval-based logic to ensure proper element placement
Status: The solution appears complete with code snippets provided, though the original poster has not confirmed whether the implementation was successful. Images were shared showing the current layout versus the desired horizontal arrangement.
Hi @Hausi
You should try following the instructions below
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file base.css and add this code snippet to the end of the file
.product-form__buttons .product-form__submit.button.button--full-width.button--primary {
margin-top: 25px;
height: 47px;
}
.product-form__buttons {
display: flex;
gap: 10px;
}
.product-form__buttons .product-form__input.product-form__quantity {
flex: 0 0 0 !important;
}
Step 3: Search for the file global.js or theme.js and add this code snippet to the end of the file
(function() {
const loop = setInterval(() => {
var buttons = document.querySelector(".product-form__submit");
var quantityInput = document.querySelector(".product-form__input.product-form__quantity");
if (buttons && quantityInput) {
buttons.parentNode.insertBefore(quantityInput, buttons);
clearInterval(loop);
}
}, 100);
setTimeout(() => {
console.log("Interval cleared after 10 seconds");
clearInterval(loop);
}, 10000);
})();
Result
If it’s helpful, please like and mark it as a solution, thank you
Have a nice day
1 Like