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.

Hi @LauraOO

Adding a quantity selector can be a little complicated since it does only require html code. You need to add some liquid code. I suggest to hire someone to do this for you