Webflow sync, pageviews & more.
NEW

How can I display items from the Collections and Products in the Preview page on Webflow?

TL;DR
  • Add a Collection List to your page, link it to the desired CMS Collection or Products, and bind elements (text, image, etc.) to specific collection fields.
  • Use Preview mode to see dynamic content or publish the site for full interactive functionality like filtering or pagination.

To display Collection or Product items in the Preview page on Webflow, you need to correctly connect your CMS (Collections or Ecommerce Products) with dynamic content elements on your site.

1. Enable CMS or Ecommerce Content in a Page

  • Open the desired page in the Webflow Designer.
  • Use a Collection List element to pull in and display items from either a CMS Collection or Products.
  • Drag a Collection List into your layout and choose the Collection (e.g., Blog Posts, Products) you want to bind it to.

2. Bind Elements to Collection Fields

  • Inside the Collection List, drag in text, image, or link elements.
  • Click an element, then in the Settings Panel, choose “Get text from [field name]” or “Get image from [image field]”.
  • Each Collection List item will now display dynamic content from one item in your CMS or Products database.

3. Set Up Conditional Visibility (Optional)

  • You can use Conditional Visibility to show or hide elements based on the contents of specific fields (e.g., only show "On Sale" badge if the product has a sale price).
  • Select the element, go to the Element Settings Panel, and set up visibility rules under Conditional Visibility.

4. Use the Preview Mode

  • After adding and connecting your dynamic content via Collection Lists, click the eye icon (Preview) in the top-left of the Designer to see how the live content will look.
  • You will now see live CMS or Product items rendered in context.

5. Publish to See Full Dynamic Behavior

  • Some CMS-related interactions (like loading more items with pagination or filtering) may not fully work in Preview mode.
  • For a complete test, click Publish and view the live site.

Summary

To display CMS or Product items on the Preview page, insert a Collection List, connect it to a CMS Collection or Products, and bind the data fields to your elements. Use Preview mode to see the rendered output, or publish the site for full functionality.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I add hosting to someone else's Webflow Pro account and then transfer the hosted websites to my own account in the future? I am new to web building and Webflow.
Is it possible to trigger different hover effects on each child element when hovering over a parent element in Webflow or CSS?
How can I fix the issue of blurry images on my Webflow website that are fine in the designer but blurry when published?
How can I automatically change background images every time a user refreshes my website in Webflow?
How can I solve the issue of my circle loading animation not moving on Webflow after following a tutorial on After Effects and converting expressions to keyframes?
How can I handle long text strings for responsive sizing in Webflow? Would custom code be necessary?
What CMS do you use with Webflow and how seamless is the transition between the two? Does the CMS have any impact on the design of your website?
How can I resolve the 500 (Internal Server Error) I am encountering while trying to upload a file into a form using Webflow with uploadcare integration?
When can we expect the issue with membership invites in Webflow to be resolved so that I can give my clients access to their blog pages? The share link seems to be sharing only the preview mode of the login, not the actual link that is causing the problem.
How can I easily place elements where I want them on Webflow without using containers, div blocks, or blocks? I'm having trouble aligning a logo to the left side of the page.
Is it possible to create a slide in Webflow that moves from right to left, appearing behind the navigation bar when inactive and in front of it when active using interactions or custom code?
Can I replace a video background with a still image for mobile devices on Webflow without causing page load issues?
How can I create page scroll for a tab link in Webflow?
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
What are some of the best tools and integrations for Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?