Re: Quantity selector next to add to cart button

Solved

Quantity selector next to add to cart button

BYS2
Tourist
3 0 1

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/ 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10035 1999 2044

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.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10035 1999 2044

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;
}
}

Screenshot 2024-09-16 at 10.40.09.png

- 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.

BYS2
Tourist
3 0 1

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.

Dan-From-Ryviu
Shopify Partner
10035 1999 2044

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.

BYS2
Tourist
3 0 1

It worked, thanks! 

PaulMartin
Shopify Partner
597 59 142

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! 🙂

contact@paulmartinlopez.com
Feel free to email me! 😄
I'm open to conversations or work ʕ •ᴥ•ʔ