Move Quantity selector and Add to cart to the same line

Arohan · ‎04-22-2024

Hi,

I want to move the quantity selector button next to the same line as the add to cart button for both mobile and desktop.

Any suggestions on how to do this would be appreciated.

Thank you

Here's my web: www.vedec.in

Dan-From-Ryviu · ‎04-22-2024

Hi @Arohan

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
buy-buttons button {
    margin-top: -77px;
    max-width: calc(100% - 150px);
    margin-left: 150px;
    border: 1px solid #000 !important;
    max-height: 44px;
}
buy-buttons .shopify-payment-button {
    margin-top: -24px
}
</style>

Best Regards,

Dan from Ryviu

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

oscprofessional · ‎04-22-2024

Hello @Arohan

Go to Online store -> Theme -> Edit code -> Find theme.css file -> Paste below code at the bottom of the theme.css file

.product-info__block-item[data-block-type="quantity-selector"] {
    float: left;
    margin-right: 20px;
}

Dan-From-Ryviu · ‎04-22-2024

Hi @Arohan

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
buy-buttons button {
    margin-top: -77px;
    max-width: calc(100% - 150px);
    margin-left: 150px;
    border: 1px solid #000 !important;
    max-height: 44px;
}
buy-buttons .shopify-payment-button {
    margin-top: -24px
}
</style>

Best Regards,

Dan from Ryviu

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Arohan · ‎04-22-2024

Thank you so much Dan...

It worked!

PageFly-Noah · ‎04-22-2024

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.product-info quantity-selector{
  float: left !important
  margin-right: 16px !important; // params you want margin
  margin-top: 10px !important;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

Move Quantity selector and Add to cart to the same line

Move Quantity selector and Add to cart to the same line

Community Blog Articles