Impulse Theme: Quantity align with add to cart button in one row

Topic summary

Align the quantity selector with the Add to Cart button in one row on Shopify’s Impulse theme for desktop and mobile.

  • Original poster shared a development product URL and password; requested CSS help to achieve the layout shown in screenshots (images central to the desired outcome).
  • A CSS-based approach was provided: desktop media query to adjust .product-single__form margins and .js-qty__num padding; later, a mobile media query added margin adjustments, left alignment, and smaller button font/padding, with a confirmation screenshot of the alignment.
  • Note: A contributor cautioned this may require multiple settings and could cause layout issues on some screen sizes.

Current developments:

  • OP reported mobile wasn’t working initially; mobile-specific CSS was supplied. No explicit confirmation of success from OP; status unclear.
  • A second participant using a live preview app saw the quantity box move next to swatches; despite a reference screenshot matching the goal, they still can’t get it working and moved quantity below the buy button.

Outcome: No final resolution. Action items are to provide site details for tailored CSS and verify behavior across screen sizes and app interactions.

Summarized with AI on December 20. AI used: gpt-5.

Hi @Tthetiger365 ,

Are you able to provide your website so we can give a code specific for you?

1 Like