How can I add multiple images to a product page in Webflow's e-commerce setup? The current e-commerce pages for product collections are set up differently from what I see on the forum and University pages.
TL;DR
To add multiple images to a product page in Webflow’s E-commerce setup, you need to use the Multi-Image field and bind it to a Collection List on the Product Page. Follow these steps:
1. Add a Multi-Image Field to Your Products Collection
- Go to CMS (Collections) and open Products.
- Add a new field → Select Multi-Image Field.
- Name the field (e.g., "Product Gallery").
- Save the collection and update existing products by adding images.
2. Bind the Multi-Image Field to the Product Page
- Open the Product Page in Webflow Designer.
- Add a Collection List to the product template.
- Connect the Collection List to your Multi-Image Field (e.g., "Product Gallery").
3. Display the Images Properly
- Place an Image Element inside the Collection List.
- Set the Image’s Source to "Get Image from Product Gallery".
- Style the Collection List (grid, slider, or flexbox for layout).
4. (Optional) Use a Slider or Lightbox
- Wrap the Collection List inside a Slider Component for a carousel effect.
- Use a Lightbox instead of an Image Element to allow full-screen previews.
Summary
Add a Multi-Image Field to the Products Collection, connect it to a Collection List in the Product Page, and style it based on your requirements. You can enhance the design using Webflow’s Slider or Lightbox features.