How can I adjust the 'Add to Cart' button placement?

Technical Q&A

Topic summary

A user seeks to reposition the ‘Add to Cart’ button to appear beside the quantity selector on their product page.

Current Status:

  • The user shared their website URL (intercontinentalklshop.com) for review
  • Another community member requested access to examine the site’s structure

Proposed Solution:
A CSS code snippet was provided to adjust button placement by:

  • Using flexbox with flex-direction: column-reverse on the product form
  • Resetting margins and positioning on form elements
  • Setting specific margin values to 0 with !important flags

The solution involves adding custom CSS to the base.css file to override default styling and reorder form elements visually.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi, how to adjust add to cart button beside quantity?

sueanneyong_0-1689604884071.png
sueanneyong_0-1689604884071.png933×918 290 KB

1 Like
2

Hi @sueanneyong ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

here you go https://intercontinentalklshop.com/

4

put this code in base.css file

.product-form form{
  flex-direction: column-reverse;
    display: flex;
}
.product-form{
  margin:0px;
}
.product-form__buttons{
  margin-top:0px;
}

.product-form__submit {

    top: 0 !important;
    left: 0 !important;
}