How can I style a quantity picker next to my add to cart button?

Topic summary

Issue: LauraOO wants to add a styled quantity picker next to the “Add to Cart” button on their collection page. They have basic HTML code (<input type="number">) but struggle with styling it to match their existing button design.

Key Details:

  • The website is in Danish (“Læg i kurv” = Add to cart)
  • They want the quantity input in the middle white section between buttons
  • Site: americanwine.dk/collections/all

Community Responses:

Moeed: Provided CSS solution for the product page (not collection page), suggesting adding code above </body> tag in theme.liquid file. Included a screenshot reference.

kevinkarma55: Clarified that adding quantity controllers to collection pages is more complex than simple HTML—requires additional logic like showing the controller when clicking “Add to Cart” and handling quantities less than 1.

made4Uo: Confirmed the complexity, noting it requires both HTML and Liquid code modifications. Suggested hiring someone to implement this functionality properly.

Status: Unresolved. The request involves collection page customization, which requires more advanced implementation than basic CSS styling.

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

Added quantity controller in the collection is more complicated than adding small HTML. It needs to have other logic like show quantity controller when clicking add to cart and hidden in quantity is less than 1. From your question, it seems like you might have figured out how to display the quantity controller but I don’t see it using link above.