Is it possible to have multiple Add to Cart buttons with quantities for each product card on a Webflow eCommerce page without creating individual product pages for each item?
TL;DR
- Use a CMS Collection List to display products, binding each item’s fields to create individual product cards.
- Add a Quantity Input and Add to Cart Button inside each Collection Item, ensuring the button is correctly linked to each product via Webflow's settings.
Yes, it's possible to have multiple Add to Cart buttons with quantity inputs on a single Webflow eCommerce product list/grid page, and you don't need to create separate product pages for each item.
1. Use the Webflow CMS to Display Products
- Use a Collection List to pull in products from your eCommerce Products Collection.
- Bind product fields (e.g., name, price, image) within each Collection Item to create a product card layout.
2. Add Quantity Input and Add to Cart Button
- Within each Collection Item, drag in a Quantity Input and an Add to Cart Button.
- Select the Add to Cart Button, then in the Settings panel, ensure it’s connected to the correct product from the CMS.
- Webflow allows you to place Add to Cart buttons directly in Collection Lists, and they will automatically handle the correct SKU/product variant.
3. Confirm Each Button Is Bound to Its Product
- Each Add to Cart form block (Quantity + Button) can be configured per product automatically if placed inside the Collection Item.
- Webflow handles the linkage using the Product Field binding inside the Collection List context.
4. Optional Customizations
- Use custom classes and styles to personalize each Add to Cart area within the product cards.
- You can also add conditional visibility (e.g., hide the button if out of stock).
Summary
You can display multiple products with individual Add to Cart buttons and quantity selectors on a single page using a CMS Collection List, without needing individual product pages. Webflow’s built-in eCommerce features fully support this setup.
