Yes, it is 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. Here's how you can achieve this:
1. Start by designing your product card on the eCommerce page. This card should include the product image, name, price, and quantity input field along with the "Add to Cart" button.
2. In the Webflow Designer, select the product card and create a new symbol. This allows you to reuse the product card throughout your eCommerce page.
3. Within the symbol, add an "Add to Cart" button and a quantity input field. Give each input field a unique name or ID, such as "quantity-product1", "quantity-product2", etc. This will allow you to track the quantity of each product card individually.
4. Set up interactions for the "Add to Cart" buttons. When a user clicks the button, you can trigger an interaction to add the product to the cart with the respective quantity. With Webflow's interactions, you can access the quantity value from the corresponding quantity input field and add it to the cart accordingly.
5. Additionally, you'll need to customize your cart modal or page to display the products and quantities added by the user. You can use Webflow's dynamic collection lists or custom code to achieve this. Iterate through the "Add to Cart" buttons and quantity input fields to fetch the data and display it in the cart.
By following these steps, you can create multiple "Add to Cart" buttons with quantities for each product card on your Webflow eCommerce page. This approach allows you to avoid creating individual product pages for each item while maintaining a user-friendly shopping experience.