Put "Quantity Selector" Next to "Add to Cart" Button in Impulse Theme

Topic summary

A user seeks help positioning the quantity selector on the same line as the “Add to Cart” button in Shopify’s Impulse theme. A community member provides a CSS solution that involves:

Solution Steps:

  • Navigate to Online Store → Theme → Edit code
  • Open Asset → theme.scss.liquid
  • Add custom CSS code at the bottom to reposition elements using absolute positioning and width calculations

Key CSS adjustments:

  • Position quantity selector absolutely with negative margin
  • Adjust cart button width to accommodate quantity selector
  • Modify padding for quantity input fields

Multiple users successfully implement variations of this code for different themes (Impulse, Debut, Avenue, Brooklyn, Supply). Some encounter issues:

  • Quantity buttons losing functionality
  • Layout conflicts with inventory notices
  • Theme-specific file structure differences

The helper consistently requests store URLs to provide customized solutions for each theme version. Several users report successful implementation, though some require additional adjustments for responsive design and element alignment. The discussion remains active with ongoing requests for theme-specific adaptations, particularly for newer theme versions where file structures have evolved.

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

@glowcreativenz

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.