Put Quantity Selector And Add To Cart Button On Same Line In CRAFT Theme

Store Design
,

Topic summary

A user seeks to position the quantity selector and Add to Cart button on the same horizontal line in their CRAFT theme product pages.

Initial Solution:

  • Dan-From-Ryviu provides CSS code to align elements horizontally
  • First attempt moves the Add to Cart button up instead of quantity selector down
  • Updated CSS successfully positions elements on the initially tested product page

Broader Implementation:

  • Solution only works on one product page; other pages show misalignment
  • Dan guides the user through editing theme files:
    • Move quantity selector code from main-product.liquid to buy-buttons.liquid
    • Place code before </product-form> tag
    • Remove original quantity selector from main-product file
  • After file edits and custom CSS, alignment works successfully across all products on desktop

Remaining Issue:

  • Layout displays correctly on desktop and some mobile devices (iPhone 15 Pro)
  • Significant misalignment occurs on other phones (iPhone XS and others)
  • User requests solution for consistent mobile alignment across all devices

The thread remains open with the mobile responsiveness issue unresolved.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
16

Saved it now