Need to store:
├── Text?
│   ├── Short (≤256 chars)? → Plain Text
│   ├── Long + Formatting? → Rich Text
│   └── Long + No Formatting? → Plain Text (long)
├── Media?
│   ├── Single image? → Image
│   ├── Multiple images? → Multi-image
│   ├── Video? → Video
│   └── File download? → File
├── Choice/Selection?
│   ├── Yes/No? → Switch
│   ├── One option? → Option
│   └── Link to item? → Reference/Multi-reference
├── Structured data?
│   ├── Number? → Number
│   ├── Date/Time? → Date/Time
│   ├── Phone? → Phone
│   ├── Email? → Email
│   └── URL? → Link
└── Visual?
    └── Color? → Color

Authors Collection:
├── name (Text, required)
├── slug (Text, required)
├── bio (Rich Text)
├── photo (Image)
├── title (Text) - job title
├── email (Email)
└── social-links (Link)

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── author (Reference → Authors)  ← Each post has ONE author

Tags Collection:
├── name (Text, required)
├── slug (Text, required)
├── description (Plain Text)
└── color (Color) - optional visual grouping

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── tags (Multi-Reference → Tags)  ← Each post has MANY tags

Categories Collection:
├── name (Text, required)
├── slug (Text, required)
├── description (Plain Text)
├── parent (Reference → Categories)  ← Self-reference for hierarchy
└── level (Number) - 1, 2, 3 for display logic

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── related-posts (Multi-Reference → Posts)  ← Self-reference to other posts

I'm building a recipe site. How should I structure the CMS?

📐 CMS Planning: Recipe Site

Let me ask a few questions to design the best structure:

1. **Content Volume**: How many recipes do you plan to have?
   - Small (≤50): Simple structure
   - Medium (50-200): Moderate organization
   - Large (200+): Advanced taxonomy needed

2. **Recipe Attributes**: What information will each recipe have?
   - Basic: Name, ingredients, instructions, image
   - Advanced: Prep time, cook time, difficulty, nutrition, dietary tags

3. **Organization Needs**: How will users find recipes?
   - By meal type (breakfast, lunch, dinner)
   - By cuisine (Italian, Mexican, Asian)
   - By dietary restrictions (vegan, gluten-free, keto)
   - By cooking method (baking, grilling, slow cooker)
   - By ingredients (chicken, pasta, vegetables)

4. **Author Setup**: Single or multiple authors?
   - Single: You manage all content
   - Multiple: Team of recipe creators

5. **User Engagement**: What interactive features?
   - Comments/reviews
   - Ratings
   - Save favorites
   - Print recipe cards

Based on your answers, I'll design the optimal CMS architecture.

📐 Recommended CMS Architecture: Recipe Site

Based on your requirements (Medium volume, Multiple authors, Advanced filtering):

---

Recipe → Author (one-to-many)
  ↓
Recipe → Category (one-to-many)
  ↓
Recipe → Cuisine (one-to-many)
  ↓
Recipe → Dietary Tags (many-to-many)
  ↓
Recipe → Cooking Methods (many-to-many)

Recipe Detail Page (/recipes/[slug]):
- SEO Title: {{recipe.name}} | Your Site Name
- Meta Description: {{recipe.description}}
- OG Image: {{recipe.featured-image}}
- Schema: Recipe structured data (JSON-LD)

{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "{{recipe.name}}",
  "image": "{{recipe.featured-image}}",
  "author": {
    "@type": "Person",
    "name": "{{recipe.author.name}}"
  },
  "datePublished": "{{recipe.published-date}}",
  "description": "{{recipe.description}}",
  "prepTime": "PT{{recipe.prep-time}}M",
  "cookTime": "PT{{recipe.cook-time}}M",
  "totalTime": "PT{{recipe.total-time}}M",
  "recipeYield": "{{recipe.servings}} servings",
  "recipeIngredient": [...],
  "recipeInstructions": [...]
}

Recipes Index page:
- Limit: 12 recipes per page
- Enable Webflow pagination
- "Load More" button for smoother UX

Thumbnail: 400x300px (grid cards)
Featured: 1200x800px (detail pages)
Format: WebP when possible
Loading: lazy for below-fold images

Display only needed fields:
- Author name + photo (don't bind entire author object)
- Category name + color (skip unused fields)
- Each reference = query, so minimize bindings

Homepage: 6 featured recipes
Category pages: 12 recipes per page
Author pages: 12 recipes per page
Related recipes: 3-4 max

undefined

My collection list is slow with 500+ items. How do I optimize?

⚡ CMS Performance Optimization

Analyzing your performance issue with 500+ items...

---

Thumbnail images in grid:
- Size: 400x300px (not full resolution)
- Format: WebP (smaller file size)
- Loading: lazy (below fold images)

In Collection List Image settings:
- Set custom size: 400x300
- Enable lazy loading
- Use srcset for responsive images

❌ Bad: Binding entire author object
{
  author.name,
  author.bio,
  author.photo,
  author.email,
  author.social-links
}

✅ Good: Bind only displayed fields
{
  author.name,
  author.photo
}

Instead of:
- Load all 500 posts
- Hide if published-date > today (conditional)

Do this:
- Collection List Filter: published-date ≤ today
- Only loads matching items

/blog → Recent posts (20 items)
/blog/featured → Featured posts only (10 items)
/blog/category/tech → Tech category (filtered)
/blog/archive → Older posts with pagination

Recent Content (Dynamic CMS):
- Last 50-100 posts
- Full dynamic filtering
- Fast performance

Older Content (Static):
- Archive pages for older posts
- Yearly/quarterly archives
- Still accessible but static HTML
- Rarely updated

Current (Normalized):
Post → Author (reference)
Display: {{post.author.name}}
= 2 queries (post + author)

Denormalized:
Post has author-name field (text)
Display: {{post.author-name}}
= 1 query (just post)

undefined

My reference fields aren't showing up on the page. What's wrong?

🔍 Troubleshooting: Reference Fields Not Displaying

Let me help you diagnose and fix this issue.

---

Element: Text Block
Binding: Blog Post > Author (reference) > Name

Correct path:
Collection Item > author > name

❌ Wrong:
<div>
  <text>Author: {{author.name}}</text> ← No collection context
</div>

✅ Correct:
<Collection List - Posts>
  <Collection Item>
    <text>Author: {{author.name}}</text> ← Inside collection context
  </Collection Item>
</Collection List>

For Multi-Reference field (Post → Tags):

❌ Wrong: Direct binding
<text>Tags: {{post.tags}}</text>

✅ Correct: Nested collection list
<Collection List - Posts>
  <Collection Item - Post>
    <Collection List - Get Items from Post > Tags>
      <Collection Item - Tag>
        <text>{{tag.name}}</text>
      </Collection Item>
    </Collection List>
  </Collection Item>
</Collection List>

CMS Collections > Authors
- Look for "Draft" badge
- Publish all needed items
- Items must be published to display via reference

Check in CMS:
1. Does the reference field exist?
2. Is it configured correctly (Reference or Multi-Reference)?
3. Is it pointing to the right collection?

Check collection items:
1. Open an item that should display
2. Check if reference field is populated
3. Verify referenced item exists and is published

Check in Designer:
1. Is element inside Collection List?
2. Is Collection List connected to correct collection?
3. Is element binding correct path?

In Designer:
1. Click Collection List
2. Set preview mode: "Item 1"
3. Cycle through items
4. Check if data appears

If it works in Designer but not live:
→ Publish issue (republish site)

Collection List: Posts
Collection Item: Post
Element: Text Block
Binding: Get text from Post > author > name

Collection List: Posts
Collection Item: Post
  Nested Collection List: Get items from Post > tags
  Collection Item: Tag
    Element: Text Block
    Binding: Get text from Tag > name

Collection List: Posts
Collection Item: Post (current)
  Nested Collection List: Get items from Post > related-posts
  Collection Item: Post (related)
    Element: Text Block
    Binding: Get text from Post > title

undefined

Starter Plan:
- Collections: 1
- Items per collection: 50
- CMS pages: 50

Basic Plan:
- Collections: 2
- Items total: 200
- CMS pages: 150

CMS Plan:
- Collections: 20
- Items total: 2,000
- CMS pages: 2,000

Business Plan:
- Collections: 40
- Items total: 10,000
- CMS pages: 10,000

Enterprise Plan:
- Custom limits

✅ Good Names:
- published-date (descriptive, hyphenated)
- author (clear purpose)
- main-image (specifies which image)
- post-summary (explains use case)

❌ Bad Names:
- date1 (unclear which date)
- img (which image?)
- text (what kind of text?)
- field1 (no meaning)

Make REQUIRED:
- name (unique identifier)
- slug (URL generation)
- primary relationships (author, category)
- publish date (for sorting)

Make OPTIONAL:
- tags (not always applicable)
- secondary images
- advanced metadata
- related items

Use when:
- Each item has exactly ONE parent
- Parent data is reused across many items
- You want centralized data management

Examples:
✅ Post → Author (each post has one author)
✅ Product → Brand (each product has one brand)
✅ Event → Venue (each event has one venue)

Don't use when:
❌ Item can have multiple parents (use multi-reference)
❌ Relationship is temporary (consider option field)
❌ Data is simple and rarely changes (use option field instead)

Use when:
- Items can have multiple relationships
- Relationships need to be managed separately
- You want flexible cross-linking

Examples:
✅ Post ↔ Tags (posts have many tags, tags apply to many posts)
✅ Product ↔ Features (products have many features, features apply to many products)
✅ Course ↔ Topics (courses cover many topics, topics span many courses)

Remember:
⚠️ Max 5 multi-reference fields per collection
⚠️ Can only filter by ONE multi-reference at a time
⚠️ Cannot sort by referenced field values
⚠️ Performance impact (more queries)

Use when:
- Building hierarchies (categories, menu structure)
- Related items from same collection
- Organizational trees

Implementation:
- Add Reference field pointing to same collection
- Name it clearly: parent-category, related-posts
- Limit depth to 2-3 levels for practical display
- Consider adding "level" number field for easier filtering

Example Structure:
Categories:
├── Web Development (level 1, parent: null)
│   ├── Frontend (level 2, parent: Web Development)
│   └── Backend (level 2, parent: Web Development)
└── Design (level 1, parent: null)

Minimal (1 collection):
- Blog Posts

Standard (3 collections):
- Blog Posts
- Authors
- Categories

Advanced (5+ collections):
- Blog Posts
- Authors
- Categories
- Tags
- Topics/Series

Minimal (1 collection):
- Products

Standard (4 collections):
- Products
- Categories
- Brands
- Features/Specifications

Advanced (7+ collections):
- Products
- Categories
- Brands
- Features
- Reviews
- Collections (curated product groups)
- Related Products

Minimal (1 collection):
- Projects

Standard (3 collections):
- Projects
- Clients
- Services/Categories

Advanced (5+ collections):
- Projects
- Clients
- Services
- Team Members
- Technologies Used

Minimal (1 collection):
- Listings

Standard (4 collections):
- Listings
- Categories
- Locations
- Owners/Managers

Advanced (6+ collections):
- Listings
- Categories
- Subcategories
- Locations (hierarchical)
- Amenities/Features
- Reviews/Ratings

Content Volume → Items Per Page:
- 0-50 items: No pagination needed
- 50-100 items: 20 items per page
- 100-500 items: 15-20 items per page
- 500-1000 items: 12-15 items per page
- 1000+ items: 10-12 items per page + advanced filtering

Usage → Recommended Size:
- Thumbnail (grid cards): 400x300px
- Featured image (hero): 1200x800px
- Gallery images: 800x600px
- Background images: 1920x1080px

Format Priority:
1. WebP (best compression, modern browsers)
2. JPEG (photos, complex images)
3. PNG (transparency needed, simple graphics)
4. SVG (logos, icons, simple graphics)

Optimization Levels:

Level 1 - Display Only What's Needed:
❌ Binding entire author object: {{author}}
✅ Binding specific fields: {{author.name}}, {{author.photo}}

Level 2 - Denormalize Critical Data:
Instead of: Post → Author.name (2 queries)
Store: Post.author-name (1 query)
When: Performance critical + data rarely changes

Level 3 - Lazy Load Related Content:
Show main content immediately
Load related items on interaction (click, scroll)
Reduces initial page load

Best Practices:

1. Filter at Collection Level:
   ✅ Use native collection list filters
   ❌ Load all items then hide with conditionals

2. Limit Items:
   ✅ Set reasonable limit (12-20 items)
   ❌ Load unlimited items

3. Optimize Nested Lists:
   ✅ Limit nested collection lists to 3-5 items
   ❌ Nest multiple unlimited lists

4. Use Conditional Loading:
   ✅ Load content based on viewport
   ❌ Load everything upfront

5. Implement Pagination:
   ✅ Enable Webflow pagination or "Load More"
   ❌ Infinite scroll with all items

Required Fields:
1. SEO Title (dynamic from item name)
2. Meta Description (dynamic from summary/description)
3. OG Image (dynamic from featured image)
4. Canonical URL (automatic)

Recommended:
5. Schema.org structured data (JSON-LD)
6. Open Graph tags (Facebook/LinkedIn)
7. Twitter Card tags
8. Alt text for all images

✅ Good Slugs:
- webflow-cms-best-practices
- ultimate-guide-to-seo
- 2026-web-design-trends

❌ Bad Slugs:
- Post1
- new-post-copy-3
- untitled-entry

Rules:
- Lowercase only
- Hyphens (not underscores)
- No special characters
- Descriptive (include keywords)
- Max 50-60 characters

Common Types:

Blog Post (Article schema):
- headline, author, datePublished, image
- Use for: Blog posts, news articles

Product (Product schema):
- name, description, price, availability, image
- Use for: E-commerce products

Event (Event schema):
- name, startDate, location, organizer
- Use for: Events, webinars, conferences

Recipe (Recipe schema):
- name, ingredients, instructions, cookTime
- Use for: Recipe sites, food blogs

Local Business (LocalBusiness schema):
- name, address, phone, openingHours
- Use for: Directories, business listings

Create guide for each collection:

Example - Blog Posts Collection:

1. Name* (required)
   - Post title
   - Keep under 60 characters for SEO
   - Make it catchy and descriptive

2. Slug* (required)
   - Auto-generated from name
   - Can be edited for SEO optimization
   - Use hyphens, lowercase only

3. Post Summary
   - Brief description (160 characters max)
   - Used for: Grid cards, meta description, social sharing
   - Make it compelling - this is what users see first

4. Featured Image*
   - Hero image for post
   - Minimum size: 1200x800px
   - Always add alt text for accessibility

5. Author*
   - Select from Authors list
   - Can't find author? Ask admin to create in Authors collection

... (document all fields)

Before Publishing:
□ Name filled
□ Slug set (no generic slugs like "untitled")
□ Summary written (compelling, 160 chars)
□ Featured image uploaded with alt text
□ Author assigned
□ Category selected
□ Published date set
□ Content proofread
□ Links tested
□ Images optimized
□ SEO reviewed

1. Create as Draft:
   - Fill required fields minimum
   - Save to preserve work

2. Complete Content:
   - Write/upload all content
   - Add images with alt text
   - Set metadata

3. Internal Review:
   - Proofread
   - Check formatting
   - Test links
   - Verify references

4. Publish:
   - Set published date
   - Change from draft to published
   - Verify on live site
   - Share/promote

5. Ongoing:
   - Update as needed
   - Monitor performance
   - Refresh outdated content
   - Archive if no longer relevant

1. Audit Current Structure:
   - List all collections
   - Count items per collection
   - Map relationships
   - Identify problems

2. Design New Structure:
   - Plan improvements
   - Design new collections
   - Define new relationships
   - Create migration plan

3. Validate Approach:
   - Test with sample data
   - Verify relationships work
   - Check performance
   - Get stakeholder approval

1. Build new collections alongside old
2. Migrate content gradually
3. Test thoroughly
4. Switch pages to new collections
5. Archive old collections

Pros:
✅ No downtime
✅ Easy rollback
✅ Test before fully committing

Cons:
❌ Temporarily doubled content
❌ Longer timeline
❌ Must manage both systems temporarily

1. Create new collections
2. Export data from old collections
3. Transform data format
4. Import to new collections
5. Update pages to use new collections
6. Delete old collections

Pros:
✅ Faster completion
✅ Clean cutover
✅ No duplicate content

Cons:
❌ Higher risk
❌ Potential downtime
❌ Harder to rollback

1. Create new structure
2. Migrate in batches (50-100 items)
3. Test each batch
4. Update pages incrementally
5. Monitor for issues
6. Complete full migration

Pros:
✅ Balanced risk/speed
✅ Can catch issues early
✅ Incremental testing

Cons:
❌ Requires careful planning
❌ More complex execution

Possible causes:
1. Required field empty
2. Slug conflict (duplicate)
3. Invalid characters in slug
4. Reference pointing to deleted item
5. Field validation failing

Diagnosis:
- Check for red highlighted fields
- Verify slug is unique
- Test without optional fields
- Check browser console for errors

Fix:
- Fill all required fields
- Change slug to be unique
- Remove special characters
- Re-assign references
- Contact Webflow support if persists

Possible causes:
1. Referenced collection has no items
2. Referenced collection items not published
3. Wrong collection selected in reference settings
4. Browser cache issue

Fix:
1. Create items in referenced collection first
2. Publish all items in referenced collection
3. Double-check reference field configuration
4. Clear cache and refresh

Possible causes:
1. Wrong collection selected
2. Filters configured incorrectly
3. Limit set too low
4. Items not published
5. Wrong CMS locale selected

Diagnosis:
- Check collection list settings
- Review filter conditions
- Check item publish status
- Verify correct locale

Fix:
- Select correct collection
- Adjust or remove filters
- Increase limit
- Publish items
- Switch to correct locale

Possible causes:
1. Pagination not enabled
2. Limit set equal to or greater than total items
3. JavaScript conflict
4. Custom code interfering

Fix:
1. Enable pagination in collection list settings
2. Set limit lower than total items (e.g., 20)
3. Test with all custom code disabled
4. Check for JavaScript errors in console

Cause: Wrong display method

Fix:
Must use nested collection list:
❌ Direct text binding
✅ Collection List > Get items from [field] > Collection Item > Display

Example:
<Collection List - Posts>
  <Collection Item - Post>
    Tags:
    <Collection List - Get items from Post > tags>
      <Collection Item - Tag>
        <Inline> {{tag.name}} </Inline>
      </Collection Item>
    </Collection List>
  </Collection Item>
</Collection List>

Use Case: Show different layouts based on category

Implementation:
1. Add conditional visibility to elements
2. Condition: Category = "Video Posts"
3. Show video player layout
4. Condition: Category = "Image Posts"
5. Show image gallery layout

Limitation: Can only check one value at a time
Alternative: Use option field with class name, apply class dynamically

Implementation:
1. Add "Published Date" field (Date/Time)
2. In collection list settings:
   - Add filter: Published Date ≤ Current Date
3. Set future dates on items to schedule

Benefits:
- No plugins needed
- Native Webflow functionality
- Items auto-appear on set date

Limitation: Items exist but filtered, not truly unpublished

Option 1: Manual Sort Order
- Add "Sort Order" number field
- Manually assign: 1, 2, 3, 4...
- Sort collection list by Sort Order (ascending)

Option 2: Auto Sort by Engagement
- Add "View Count" number field
- Increment on page view (requires custom code)
- Sort by View Count (descending) for "Popular" lists

Option 3: Date-Based Sorting
- Sort by Published Date (descending) for "Recent"
- Sort by Created Date for "Chronological"
- Combine with filters for "This Month's Top Posts"

Approach 1: Separate Collections per Language
- Blog Posts EN
- Blog Posts ES
- Blog Posts FR

Pros: Simple, native Webflow
Cons: Must duplicate structure, harder to maintain

Approach 2: Language Field + Filter
- Add "Language" option field (EN, ES, FR)
- Filter collection lists by language
- Use URL parameter or cookie for language switch

Pros: Single structure, easier to maintain
Cons: All content in one collection

Approach 3: Webflow Localization (CMS Plan+)
- Use Webflow's native localization
- Create secondary locales
- Translate CMS content per locale

Pros: Official solution, best SEO
Cons: Requires CMS plan+, setup complexity

Option 1: Native (Limited)
- Use filter inputs on collection lists
- Basic keyword matching only
- No fuzzy search or relevance ranking

Option 2: Finsweet CMS Filter (Free)
- Client-side search and filtering
- Works with existing collection lists
- Multiple simultaneous filters
- Requires JavaScript

Option 3: Algolia/Custom (Advanced)
- Server-side search with AI
- Typo-tolerance, synonyms
- Fast and scalable
- Requires integration, costs money

Recommendation:
- <100 items: Native or Finsweet
- 100-1000 items: Finsweet
- 1000+ items: Consider Algolia