Move ATC and quantity selector to the same line

Technical Q&A

Topic summary

A Shopify store owner wants to reposition their Add to Cart (ATC) button and quantity selector to appear on the same horizontal line, with payment icons displayed underneath. Currently, these elements are stacked vertically.

Proposed Solutions:

  • Two community members provided CSS code snippets to be added to the theme files (base.css, style.css, or theme.css)
  • The modifications involve adjusting positioning, width, and layout properties of the product form elements

Current Status:

  • The initial CSS solution reduced the ATC button size but didn’t achieve the desired inline layout
  • The original poster requested mobile optimization to ensure the layout works on smaller screens
  • One helper clarified they didn’t optimize for mobile because smaller buttons could create usability issues and accidental clicks
  • The conversation appears to have concluded with the poster thanking the helpers, though the complete solution status remains unclear
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

How can I make my atc turn into this( picture with ATC and quantity in the same line, with payment icons right under)? Currently its like the picture with green ATC. This is the store link: https://lifyi.com/products/necklace-love

anzestrazar_1-1706193886636.png
anzestrazar_1-1706193886636.png631Ă—289 7.64 KB

anzestrazar_0-1706193756535.png

1 Like
2

Hey @anzestrazar ,

Please add this CSS

  1. Go to Online Store > Theme > Edit code.

  2. Open the theme.liquid file

  3. Paste the below code before on theme.liquid
3

Hi @anzestrazar

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
product-form.product-form {
    width: 26rem;
    position: absolute;
    bottom: 3%;
    left: 150px;
}
}

And Save.

Result:

Made4uoRibe_0-1706195520301.png
Made4uoRibe_0-1706195520301.png616Ă—213 9.58 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hello, this made my ATC smaller, but it didn’t move it in line with the quantity. Can you please help?

Posnetek zaslona 2024-01-27 155111.png
Posnetek zaslona 2024-01-27 155111.png608Ă—452 10.8 KB

5

I forgot to specify, but can you make it so it works on mobile?

6

Im sorry im not getting it, you want only in the mobile screen? I didn’t optimize it for mobile because the button would be too small, making it less user-friendly and prone to accidental clicks.

7

Oh ok, thanks for the help!

1 Like
8

Welcome! Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!