All things Shopify and commerce
How can I make it such that the quantity selector is on the same line as the 'add to cart' button? Store link is https://illumix.uk/
Solved! Go to the solution
This is an accepted solution.
Please update the code if you added it to the base.css file
.main-product__info-container .product-form__quantity {float: left; !important}
.main-product__info-container div:has(.main-product-form) {
margin-top: 3.4rem !important;
width: calc(100% - 152px) !important;
float: right;
}
.main-product__info-container .payment-badges-block { clear: both; }
@media (max-width: 749px) {
body .main-product__info-container div:has(.main-product-form) {
margin-top: 3rem !important;
}
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @BYS2
Please add this code to Custom CSS in Online store > Themes > Customize > Theme settings
.product-form__quantity {float: left;}
.main-product__info-container div:has(.main-product-form) {
margin-top: 3.4rem;
width: calc(100% - 152px);
float: right;
}
.payment-badges-block { clear: both; }
@media (max-width: 749px) {
div:has(.main-product-form) {
margin-top: 3rem !important;
}
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi Dan, I added the code to the base.css file but the add to cart button and quantity selector are still not on the same height.
This is an accepted solution.
Please update the code if you added it to the base.css file
.main-product__info-container .product-form__quantity {float: left; !important}
.main-product__info-container div:has(.main-product-form) {
margin-top: 3.4rem !important;
width: calc(100% - 152px) !important;
float: right;
}
.main-product__info-container .payment-badges-block { clear: both; }
@media (max-width: 749px) {
body .main-product__info-container div:has(.main-product-form) {
margin-top: 3rem !important;
}
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
It worked, thanks!
Hi BYS2,
In order to make the quantity selector appear on the same line as the add-to-cart button, your theme's code needs to be changed. You'll need to look for the file that controls the quantity selector and the add to cart, then once you've done that, copy the code for the add to cart and add it into the quantity selector file. Then add the necessary CSS in order for the two to sit together in one line. Then with extra CSS for it to look good on mobile. That's it.
TLDR; You'll need to change the layout of the page by changing its code, then add the needed CSS to have it sit beside each other and make it look good on mobile.
Hope this helps! and good luck!
If you're looking to save time, avoid the pains of coding and testing for many hours, I'd be happy to do this as a paid service. The charge will be $25. Let me know if you're interested and if you have any questions, feel free to ask! 🙂
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024