How can I display items from the Collections and Products in the Preview page on Webflow?
TL;DR
- Open a CMS template or static page and add a Collection List element.
- Connect the Collection List to a CMS or Product Collection and bind page elements (e.g., text, images) to relevant fields.
- Optionally apply Conditional Visibility for filtering, then preview the page to see dynamic content.
To show CMS Collection and Product items on the preview page in Webflow, you need to bind your page elements to the appropriate Collection List connected to the CMS or Ecommerce data.
1. Add or Open a CMS Template or Static Page
- For Collection Pages: Go to Pages Panel → scroll to CMS Collection Pages → click on a specific Collection Template (e.g., Blog Post Template).
- For Static Pages: If you're using a static page like Home or About and want to show Collection or Product items, use a Collection List element manually.
2. Insert a Collection List Element
- On the Designer canvas, click the "+" to open the Add panel.
- Drag and drop a Collection List onto the page.
- In the pop-up, choose the Collection (e.g., "Blog Posts", "Products") you want to connect to.
3. Bind Elements to Collection Fields
- Inside the Collection List, add elements such as Text Block, Image, or Link Block.
- Select each element and under the Settings panel, click "Get text from...", "Get image from...", or similar.
- Choose the corresponding field (e.g., Name, Price, Image).
4. Check Ecommerce Product Collections
- Webflow treats products as Collection items under the Products Collection.
- Repeat the same process using the "Products" Collection to show items like name, price, and images from your catalog.
5. Use Conditional Visibility (Optional)
- For filtering items (e.g., featured products), use Element Settings → Conditional Visibility to show only items meeting certain criteria.
6. Preview the Page
- Click the Preview icon (eye) in the top bar.
- You’ll now see dynamic data from your CMS or Products Collection displayed on the page.
Summary
To show CMS or Product items in preview mode, use a Collection List on static or template pages, connect it to a Collection, and bind each element to the correct fields. Then preview your page to see live data rendered from Webflow’s CMS or Ecommerce collections.
