Move Quantity selector and Add to cart to the same line

Technical Q&A

Topic summary

Issue: User wants to align the quantity selector and ‘Add to Cart’ button on the same horizontal line for both mobile and desktop views.

Solutions Provided:

Three different CSS/code approaches were offered:

  • Option 1: Add CSS to theme.css file targeting the quantity selector block with float and margin properties
  • Option 2: Insert code into theme.liquid file after the <head> tag
  • Option 3: Add code to theme.liquid file above the </head> closing tag

Resolution: The issue was successfully resolved. The user confirmed one of the solutions worked, though the specific code snippets appear corrupted/reversed in the thread text.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
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

2

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

Hi @Arohan

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

Best Regards,

Dan from Ryviu

1 Like
4

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

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

5

Thank you so much Dan…

It worked!