Solved

Move Quantity selector and Add to cart to the same line

Arohan
Tourist
7 0 1

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

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

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 to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

kaiyaa
Explorer
267 19 25

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
Shopify Partner
15905 2378 3087

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Dan-From-Ryviu
Shopify Partner
8012 1561 1586

This is an accepted solution.

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 to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Arohan
Tourist
7 0 1

Thank you so much Dan...

It worked!

 

PageFly-Noah
Shopify Partner
1288 229 262

 

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.