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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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

kaiyaa · ‎04-22-2024

Hello @Arohan

Can you please share product.liquid code with me so i suggest you the steps

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

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

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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