How can I include list items in Webflow collections? How can I change the pictures within the Lightbox via Webflow collections? How can I include maps and/or embedded code on Webflow CMS pages? How do SEO and OG settings work for Webflow CMS pages?

You're looking to enhance your Webflow CMS Collections by including list items, Lightbox images, maps/embedded code, and configuring SEO and Open Graph (OG) settings. Here's how to set up each one using CMS features.

​

---

​

1. Add List Items from a Webflow Collection

​

To display a list (e.g., bullet points or numbered items) from CMS content:

​

• Use a Multi-Reference Field if you want to connect a Group or Category of list items (e.g., Ingredients or FAQs) from a separate collection and show them dynamically.
• Use a Rich Text Field if each CMS item may contain unique list content. In the rich text editor, add your list inside the CMS item (bullets or numbers), and then bind a Rich Text element on your template page to that field.
• Enable custom styling for lists by selecting the Rich Text element → Settings Panel → Add Custom Class, then define styles as needed in Designer.

​

---

​

2. Change Lightbox Images via Webflow Collections

​

To dynamically populate Lightbox images using CMS:

​

• Use a Collection List connected to a Multi-Image Field.
• Drag in a Lightbox Component inside the Collection List and bind the image to the item.
• In the Lightbox Settings, choose "Link with other lightboxes" if you want to group them as a single gallery.
• For more control (e.g., custom thumbnails with high-res versions), you may need custom JS + CMS fields because native Lightbox doesn’t yet fully integrate with all CMS features.

​

Note: As of now, Webflow’s native Lightbox only supports one image per CMS item unless you use a Collection List with a Multi-Image Field.

​

---

​

3. Include Maps and Embedded Code on CMS Pages

​

To embed maps, videos, or third-party content on CMS pages:

​

• Add a "Embed" element to your CMS template page.
• Bind the embed code from a Plain Text Field (e.g., for YouTube, Google Maps, etc.).
• Inside the Embed element, paste your custom code and use Webflow CMS bindings like {{wf {"path":"your-field-name"} }} where necessary.
• Make sure the embed code is correctly configured—remove any script tags that Webflow may block or use iframes with proper attributes.

​

Tip: Use a Google Maps Embed link (not direct script embed) for simplicity and better compatibility.

​

---

​

4. Manage SEO and OG Settings for CMS Pages

​

Webflow lets you manage SEO and OG settings per CMS item:

​

• Go to CMS Collection Settings → Template Page → Page Settings (⚙️ gear icon).
• Fill in SEO Title and Meta Description fields using dynamic fields from your CMS, like Name, Summary, or custom text.
• Toggle to the Open Graph Settings tab.
• Upload a default OG image, or connect it dynamically via the CMS (e.g., Main Image field).
• Populate Title and Description just like the SEO section.
• Webflow automatically syncs SEO and OG tags in your page's header for social and search engines.

​

Remember: Use CMS fields that ensure uniqueness for optimal SEO performance.

​

---

​

Summary

​

• List Items: Use Multi-Reference or Rich Text fields to display lists.
• Lightbox Images: Use CMS Multi-Image Fields in Collection Lists to populate Lightbox components.
• Maps & Embeds: Use Embed components with CMS-bound plain text fields or static iframe code.
• SEO & OG: Use dynamic fields in SEO/Open Graph settings per CMS template for optimal search and social visibility. 

​

Each of these features is fully manageable via Webflow’s Designer and CMS interface with minimal to no code required.