From webflow-skills
Provides expert guidance on Webflow CMS architecture and best practices for planning collections, setting up relationships, optimizing content structure, and troubleshooting issues.
npx claudepluginhub webflow/webflow-skills --plugin webflow-skillsThis skill uses the workspace's default tool permissions.
Provide expert guidance on Webflow CMS architecture, relationships, optimization, and troubleshooting.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Provide expert guidance on Webflow CMS architecture, relationships, optimization, and troubleshooting.
ALWAYS use Webflow MCP tools for all operations:
webflow_guide_tool to get best practices before startingdata_sites_tool with action list_sites to identify available sitesdata_sites_tool with action get_site to retrieve site details and plan limitsdata_cms_tool with action get_collection_list to analyze existing collectionsdata_cms_tool with action get_collection_details to examine collection schemasdata_cms_tool with action list_collection_items to assess content volumedata_pages_tool with action list_pages to understand page structureask_webflow_ai for specific API questionscontext parameter (15-25 words, third-person perspective)data_sites_tool with actions list_sites and get_site to understand plan limitsdata_cms_tool with actions get_collection_list and get_collection_details to examine current setupdata_cms_tool with action list_collection_items to understand scaledata_pages_tool with action list_pages to see how content is displayedUse CMS when:
Use Static when:
Hybrid Approach:
| Content Type | Recommended Field | Notes | Character Limits |
|---|---|---|---|
| Short text | Plain Text | Titles, names, slugs | Max 256 chars |
| Long text (no formatting) | Plain Text (long) | Descriptions, excerpts | Unlimited |
| Formatted content | Rich Text | Blog content, bios, articles | Unlimited |
| Single image | Image | Photos, thumbnails, headers | 4MB max per image |
| Multiple images | Multi-image | Galleries, product photos | Up to 25 images |
| File downloads | File | PDFs, documents, downloads | 4MB max per file |
| Yes/No values | Switch | Featured flags, visibility toggles | Boolean |
| Single choice | Option | Status, type, category | Unlimited options |
| Date/time | Date/Time | Publish dates, events, deadlines | ISO 8601 format |
| Link to one item | Reference | Author → Post, Category → Post | One item |
| Link to multiple items | Multi-reference | Post → Tags, Post → Related Posts | Multiple items |
| External URL | Link | Social links, external resources | Max 2048 chars |
| Numeric values | Number | Prices, ratings, order, counts | Integer or decimal |
| Phone numbers | Phone | Contact numbers | E.164 format |
| Email addresses | Contact emails | Valid email format | |
| Color values | Color | Theme colors, accents, brand colors | Hex format |
| Video embeds | Video | YouTube, Vimeo embeds | Embed URL |
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
Example: Posts → Author
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
Display: On post page, access author.name, author.photo, author.bio
Filtering: Can filter posts by specific author
Advantages:
Use cases:
Example: Posts ↔ Tags
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
Display: On post page, loop through tags to show all tags
Filtering: Can filter posts by specific tag
Advantages:
Limitations:
Workarounds for multiple tag filtering:
Use cases:
Example: Categories with subcategories
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
Use cases:
Advantages:
Limitations:
Alternative: Use Option field for simple 1-2 level categorization
Example: Related Posts
Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── related-posts (Multi-Reference → Posts) ← Self-reference to other posts
Display: Show related posts at bottom of post page
Advantages:
Challenges:
Solutions:
User prompt:
I'm building a recipe site. How should I structure the CMS?
Step 1: Requirements Gathering
📐 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.
Step 2: After User Responds
📐 Recommended CMS Architecture: Recipe Site
Based on your requirements (Medium volume, Multiple authors, Advanced filtering):
---
## Collections Needed: 4
### 1. Recipes (Main Content)
├── name (Text, required) - "Homemade Pasta Carbonara"
├── slug (Text, required) - "homemade-pasta-carbonara"
├── description (Plain Text, 160 chars) - Brief summary for SEO
├── featured-image (Image) - Hero image for detail page
├── thumbnail-image (Image) - Smaller image for grid cards
├── prep-time (Number, required) - Minutes of prep
├── cook-time (Number, required) - Minutes of cooking
├── total-time (Number) - Auto-calculated or manual
├── servings (Number, required) - Number of servings
├── difficulty (Option: Easy, Medium, Hard)
├── ingredients (Rich Text, required) - Ingredient list with quantities
├── instructions (Rich Text, required) - Step-by-step directions
├── notes (Rich Text) - Cook's notes, tips, substitutions
├── nutrition-info (Plain Text) - Calories, protein, etc.
├── author (Reference → Authors, required)
├── category (Reference → Categories, required) - Primary meal type
├── cuisine (Reference → Cuisines) - Italian, Mexican, etc.
├── dietary-tags (Multi-Reference → Dietary Tags) - Vegan, GF, etc.
├── cooking-methods (Multi-Reference → Methods) - Baking, Grilling, etc.
├── featured (Switch) - Highlight on homepage
├── published-date (Date, required)
└── view-count (Number) - Track popularity
**Total fields:** 22 fields
**Plan required:** CMS plan minimum (20 collections, 2000 items)
### 2. Authors
├── name (Text, required)
├── slug (Text, required)
├── title (Text) - "Head Chef", "Recipe Developer"
├── bio (Rich Text)
├── photo (Image)
├── specialty (Plain Text) - "Italian Cuisine", "Baking"
├── social-instagram (Link)
├── social-website (Link)
└── email (Email)
**Purpose:** Reusable author information across all recipes
### 3. Categories
├── name (Text, required) - "Breakfast", "Lunch", "Dinner", "Desserts"
├── slug (Text, required)
├── description (Plain Text)
├── image (Image) - Category hero image
├── color (Color) - Brand color for UI
└── sort-order (Number) - Control display order
**Purpose:** Primary meal type classification
**Suggested Categories (8):**
- Breakfast & Brunch
- Appetizers & Snacks
- Lunch
- Dinner & Main Courses
- Side Dishes
- Salads
- Desserts & Sweets
- Drinks & Beverages
### 4. Cuisines
├── name (Text, required) - "Italian", "Mexican", "Asian"
├── slug (Text, required)
├── description (Plain Text)
└── flag-icon (Image) - Optional visual
**Purpose:** Filter by cuisine type
**Suggested Cuisines (12):**
- American, Italian, Mexican, Asian, Mediterranean, French, Indian, Thai,
Chinese, Japanese, Greek, Middle Eastern
### 5. Dietary Tags
├── name (Text, required) - "Vegan", "Gluten-Free", "Keto"
├── slug (Text, required)
├── description (Plain Text)
├── icon (Image) - Badge icon
└── color (Color) - Badge color
**Purpose:** Multi-select dietary filters
**Suggested Tags (10):**
- Vegetarian, Vegan, Gluten-Free, Dairy-Free, Keto, Paleo, Low-Carb,
High-Protein, Nut-Free, Pescatarian
### 6. Cooking Methods
├── name (Text, required) - "Baking", "Grilling", "Slow Cooker"
├── slug (Text, required)
└── description (Plain Text)
**Purpose:** Filter by cooking technique
**Suggested Methods (8):**
- Baking, Grilling, Slow Cooker, Instant Pot, Stovetop, No-Cook,
Air Fryer, Sous Vide
---
## Relationship Map
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)
**Multi-reference count:** 2 fields (within 5-field limit ✅)
---
## Recommended Page Structure
### 1. Homepage (/)
- Hero section with featured recipe
- Category cards (8 categories)
- Latest recipes (collection list, 6 items)
- Popular recipes (sorted by view-count)
- Call-to-action
### 2. Recipes Index (/recipes)
- Collection list showing all recipes
- Filter sidebar:
- Category (tabs or dropdown)
- Cuisine (multi-select)
- Dietary tags (checkboxes)
- Cooking time (< 30 min, 30-60 min, 60+ min)
- Difficulty (easy, medium, hard)
- Pagination (12 recipes per page)
- Search bar (Finsweet CMS Filter)
### 3. Recipe Detail (/recipes/[slug])
- Hero image + title
- Prep/cook/total time + servings
- Difficulty badge + dietary badges
- Ingredients list
- Step-by-step instructions
- Author card with bio
- Related recipes (same category or tags)
- Print button
### 4. Category Pages (/category/[slug])
- Category hero image + description
- Filtered recipes by category
- Breadcrumbs: Home > Recipes > [Category]
- Related categories
### 5. Cuisine Pages (/cuisine/[slug])
- Cuisine description + flag
- Filtered recipes by cuisine
- Popular cuisines sidebar
### 6. Author Profiles (/authors/[slug])
- Author photo + bio
- Author's recipes (collection list)
- Social links
- Author stats (total recipes, join date)
### 7. Dietary Filter Pages (/diet/[slug])
- Dietary tag description
- Filtered recipes by tag
- Related dietary tags
---
## SEO Optimization
### Collection Template SEO
Recipe Detail Page (/recipes/[slug]):
### Structured Data (Recipe Schema)
```json
{
"@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": [...]
}
Benefits:
1. Pagination Strategy
Recipes Index page:
- Limit: 12 recipes per page
- Enable Webflow pagination
- "Load More" button for smoother UX
2. Image Optimization
Thumbnail: 400x300px (grid cards)
Featured: 1200x800px (detail pages)
Format: WebP when possible
Loading: lazy for below-fold images
3. Reference Field Strategy
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
4. Collection List Limits
Homepage: 6 featured recipes
Category pages: 12 recipes per page
Author pages: 12 recipes per page
Related recipes: 3-4 max
Automatic (no manual curation):
Ready to implement? I can help you:
Which would you like to start with?
### Example 2: Optimizing Existing CMS
**User prompt:**
My collection list is slow with 500+ items. How do I optimize?
**Response:**
⚡ CMS Performance Optimization
Analyzing your performance issue with 500+ items...
Problem: Loading 500+ items on a single page Impact:
Root Causes:
Current: Loading all 500+ items Fix: Limit to 12-20 items per page
In Webflow Designer:
Impact: 95% faster page load ✅ Time to implement: 5 minutes Effort: Low
Current: Full-resolution images loading immediately Fix: Use proper image sizes + lazy loading
Implementation:
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
Impact: 60-70% faster load ✅ Time to implement: 15 minutes Effort: Low
Current: Binding all reference fields Fix: Only display what you actually need
Check your Collection List:
❌ 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
}
Why: Each reference field = separate database query Impact: 30-40% faster ✅ Time to implement: 10 minutes Effort: Low
Current: Loading all items, then hiding with conditional visibility Fix: Use collection list filters
Example:
Instead of:
- Load all 500 posts
- Hide if published-date > today (conditional)
Do this:
- Collection List Filter: published-date ≤ today
- Only loads matching items
Implementation:
Impact: 50% faster + cleaner ✅ Time to implement: 30 minutes Effort: Medium
Alternative to pagination: Smoother UX
Options: a) Webflow native: Pagination with "Load More" styling b) Finsweet: CMS Load plugin (free) c) Custom code: AJAX load more
Benefits:
Impact: Better UX, same performance as pagination ✅ Time to implement: 1-2 hours Effort: Medium
Instead of: One giant "All Posts" page Create: Multiple filtered pages
Example:
/blog → Recent posts (20 items)
/blog/featured → Featured posts only (10 items)
/blog/category/tech → Tech category (filtered)
/blog/archive → Older posts with pagination
Benefits:
Impact: Significant UX improvement ✅ Time to implement: 2-3 hours Effort: Medium
Strategy: Dynamic recent + static archives
Implementation:
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
When to use:
Impact: Maintains fast performance at scale ✅ Time to implement: 1-2 weeks Effort: High
Problem: Too many reference lookups Solution: Copy frequently-accessed data
Example:
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)
When to use:
Tradeoff: ⚠️ Must update in multiple places if data changes
Impact: 40-50% faster for reference-heavy pages ✅ Time to implement: Varies (requires data migration) Effort: High
Use: Finsweet CMS Filter (free)
Benefits:
Best for:
Limitation: All items loaded initially (use with pagination)
Impact: Instant filtering ✅ Time to implement: 2-4 hours Effort: Medium-High
Before deploying:
Test on staging:
Performance testing:
User testing:
Monitor after launch:
Priority 1 (Do First):
Priority 2 (This Week): 4. Add lazy loading 5. Create filtered views 6. Implement "Load More" option
Priority 3 (If Needed): 7. Finsweet CMS Filter 8. Archive old content 9. Denormalize critical data
Would you like me to walk you through implementing any of these optimizations? I can provide:
Let me know which optimization you'd like to tackle first!
### Example 3: Troubleshooting Relationships
**User prompt:**
My reference fields aren't showing up on the page. What's wrong?
**Response:**
🔍 Troubleshooting: Reference Fields Not Displaying
Let me help you diagnose and fix this issue.
Symptom: Empty space where data should be Diagnosis: Element exists but has no data binding
Fix:
Example:
Element: Text Block
Binding: Blog Post > Author (reference) > Name
Correct path:
Collection Item > author > name
Symptom: Some items show data, others don't Diagnosis: Not all collection items have the reference assigned
Fix:
Prevention:
Symptom: Reference field not appearing in dropdown Diagnosis: Element is outside collection list context
Fix:
❌ 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>
Symptom: Only showing first item or nothing Diagnosis: Multi-reference needs nested collection list
Fix:
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>
Symptom: Reference field shows nothing despite being assigned Diagnosis: Referenced item was deleted from other collection
Fix:
Prevention:
Symptom: Works in designer, not on live site Diagnosis: Referenced collection items are drafts
Fix:
Check:
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)
Single Reference (Author):
Collection List: Posts
Collection Item: Post
Element: Text Block
Binding: Get text from Post > author > name
Multi-Reference (Tags):
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
Self-Reference (Related Posts):
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
Make critical references required
Provide default content
Test with incomplete data
Document reference structure
Use descriptive field names
| Symptom | Most Likely Cause | Quick Fix |
|---|---|---|
| Nothing shows | Not bound | Bind element to reference field |
| Some items empty | Reference not assigned | Assign reference in CMS |
| Works in designer, not live | Items not published | Publish referenced collection items |
| Only first tag shows | Using text binding on multi-ref | Use nested collection list |
| Shows random data | Wrong collection context | Check collection list nesting |
| Broken after deletion | Referenced item deleted | Re-assign or recreate item |
Would you like me to walk through your specific setup to diagnose the exact issue? I can:
Let me know what you'd like me to check!
## Guidelines
### Phase 1: Discovery Best Practices
**Always Start With:**
1. **Identify plan limits** - Use `sites_get` to check collection/item limits
2. **Analyze existing structure** - List collections before recommending changes
3. **Understand content volume** - Check item counts to assess scale
4. **Review current pages** - See how content is currently displayed
5. **Ask clarifying questions** - Don't assume requirements
**Plan Limits Reference:**
Starter Plan:
Basic Plan:
CMS Plan:
Business Plan:
Enterprise Plan:
**Key Questions to Ask:**
1. "What content needs to be managed?" (identify collections)
2. "Who will update the content?" (determine complexity level)
3. "How will content be displayed?" (affects fields and relationships)
4. "What's the expected content volume?" (plan for scale)
5. "Are there any special requirements?" (unique features, integrations)
### Phase 2: Field Selection Best Practices
**Field Type Selection Matrix:**
**For Text Content:**
- **<50 characters:** Plain Text (single line)
- **50-256 characters:** Plain Text (multi-line)
- **Need formatting:** Rich Text
- **Pure data (no display):** Plain Text (validation enabled)
**For Relationships:**
- **One parent:** Reference (e.g., Post → Author)
- **Multiple parents:** Multi-Reference (e.g., Post → Tags)
- **Self-referencing:** Reference to same collection (e.g., Category → Parent Category)
**For Media:**
- **Hero images:** Image field (1 image)
- **Galleries:** Multi-image field (up to 25 images)
- **Documents:** File field (PDFs, docs)
- **Videos:** Video field (YouTube/Vimeo embeds)
**For Metadata:**
- **Dates:** Date/Time field
- **Numbers:** Number field (prices, counts, ratings)
- **Colors:** Color field (brand colors, theme colors)
- **Switches:** Boolean field (featured, published, active)
**Field Naming Conventions:**
✅ Good Names:
❌ Bad Names:
**Required vs Optional:**
Make REQUIRED:
Make OPTIONAL:
### Phase 3: Relationship Design Best Practices
**One-to-Many Guidelines:**
Use when:
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)
**Many-to-Many Guidelines:**
Use when:
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)
**Self-Reference Guidelines:**
Use when:
Implementation:
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)
### Phase 4: Architecture Patterns
**Common Collection Patterns:**
**1. Blog Architecture:**
Minimal (1 collection):
Standard (3 collections):
Advanced (5+ collections):
**2. E-commerce Architecture:**
Minimal (1 collection):
Standard (4 collections):
Advanced (7+ collections):
**3. Portfolio Architecture:**
Minimal (1 collection):
Standard (3 collections):
Advanced (5+ collections):
**4. Directory Architecture:**
Minimal (1 collection):
Standard (4 collections):
Advanced (6+ collections):
### Phase 5: Performance Optimization
**Pagination Strategy:**
Content Volume → Items Per Page:
**Image Optimization:**
Usage → Recommended Size:
Format Priority:
**Reference Field Strategy:**
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
**Collection List Optimization:**
Best Practices:
Filter at Collection Level: ✅ Use native collection list filters ❌ Load all items then hide with conditionals
Limit Items: ✅ Set reasonable limit (12-20 items) ❌ Load unlimited items
Optimize Nested Lists: ✅ Limit nested collection lists to 3-5 items ❌ Nest multiple unlimited lists
Use Conditional Loading: ✅ Load content based on viewport ❌ Load everything upfront
Implement Pagination: ✅ Enable Webflow pagination or "Load More" ❌ Infinite scroll with all items
### Phase 6: SEO Best Practices
**Collection Template SEO:**
Required Fields:
Recommended: 5. Schema.org structured data (JSON-LD) 6. Open Graph tags (Facebook/LinkedIn) 7. Twitter Card tags 8. Alt text for all images
**Slug Best Practices:**
✅ Good Slugs:
❌ Bad Slugs:
Rules:
**Structured Data Implementation:**
Common Types:
Blog Post (Article schema):
Product (Product schema):
Event (Event schema):
Recipe (Recipe schema):
Local Business (LocalBusiness schema):
### Phase 7: Editorial Workflow
**Content Editor Guidelines:**
**Field Usage Documentation:**
Create guide for each collection:
Example - Blog Posts Collection:
Name* (required)
Slug* (required)
Post Summary
Featured Image*
Author*
... (document all fields)
**Required Field Checklist:**
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
**Draft → Published Workflow:**
Create as Draft:
Complete Content:
Internal Review:
Publish:
Ongoing:
### Phase 8: Migration Strategy
**When Refactoring Existing CMS:**
**Assessment Phase:**
Audit Current Structure:
Design New Structure:
Validate Approach:
**Migration Approaches:**
**Approach 1: Parallel Build (Safest)**
Pros: ✅ No downtime ✅ Easy rollback ✅ Test before fully committing
Cons: ❌ Temporarily doubled content ❌ Longer timeline ❌ Must manage both systems temporarily
**Approach 2: Direct Migration (Faster)**
Pros: ✅ Faster completion ✅ Clean cutover ✅ No duplicate content
Cons: ❌ Higher risk ❌ Potential downtime ❌ Harder to rollback
**Approach 3: Hybrid (Recommended)**
Pros: ✅ Balanced risk/speed ✅ Can catch issues early ✅ Incremental testing
Cons: ❌ Requires careful planning ❌ More complex execution
### Phase 9: Troubleshooting Common Issues
**Issue: "Collection won't save"**
Possible causes:
Diagnosis:
Fix:
**Issue: "Reference field not showing options"**
Possible causes:
Fix:
**Issue: "Collection list showing wrong items"**
Possible causes:
Diagnosis:
Fix:
**Issue: "Pagination not working"**
Possible causes:
Fix:
**Issue: "Multi-reference only showing first item"**
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> {{tag.name}} </Collection Item> </Collection List> </Collection Item> </Collection List>
### Phase 10: Advanced Techniques
**Conditional Display Based on References:**
Use Case: Show different layouts based on category
Implementation:
Limitation: Can only check one value at a time Alternative: Use option field with class name, apply class dynamically
**Scheduled Publishing:**
Implementation:
Benefits:
Limitation: Items exist but filtered, not truly unpublished
**Dynamic Sorting:**
Option 1: Manual Sort Order
Option 2: Auto Sort by Engagement
Option 3: Date-Based Sorting
**Multi-Lingual Content:**
Approach 1: Separate Collections per Language
Pros: Simple, native Webflow Cons: Must duplicate structure, harder to maintain
Approach 2: Language Field + Filter
Pros: Single structure, easier to maintain Cons: All content in one collection
Approach 3: Webflow Localization (CMS Plan+)
Pros: Official solution, best SEO Cons: Requires CMS plan+, setup complexity
**Search Functionality:**
Option 1: Native (Limited)
Option 2: Finsweet CMS Filter (Free)
Option 3: Algolia/Custom (Advanced)
Recommendation:
## Production Checklist
Before launching CMS-driven site:
**Structure:**
- [ ] All collections created with proper field types
- [ ] Required fields set appropriately
- [ ] Help text added for content editors
- [ ] Relationships configured correctly
- [ ] Self-references working properly
- [ ] Validation rules set on text fields
**Content:**
- [ ] Test items created for all collections
- [ ] All reference fields populated in test items
- [ ] Images optimized (size, format, alt text)
- [ ] Slugs follow naming conventions
- [ ] Published dates set on items
- [ ] Draft items clearly marked
**Pages:**
- [ ] Collection lists limited appropriately (12-20 items)
- [ ] Pagination enabled on large lists
- [ ] Filters configured correctly
- [ ] Multi-reference fields use nested collection lists
- [ ] Conditional visibility works as expected
- [ ] Empty states handled gracefully
**SEO:**
- [ ] Collection template has SEO title binding
- [ ] Meta descriptions bound to summary fields
- [ ] OG images bound to featured images
- [ ] Structured data implemented (if applicable)
- [ ] Alt text present on all images
- [ ] Slugs are SEO-friendly
**Performance:**
- [ ] Images lazy loading enabled
- [ ] Only displayed reference fields bound
- [ ] Collection lists use filters (not conditional hiding)
- [ ] Pagination prevents loading too many items
- [ ] Performance tested on mobile
- [ ] Lighthouse score >80
**Documentation:**
- [ ] Field usage guide created for editors
- [ ] Collection structure documented
- [ ] Relationship map created
- [ ] Publishing workflow defined
- [ ] Troubleshooting guide available
- [ ] Contact for technical support identified
**Testing:**
- [ ] All collection lists display correctly
- [ ] Pagination works
- [ ] Filters work
- [ ] Search works (if implemented)
- [ ] Reference fields display data
- [ ] Multi-reference lists show all items
- [ ] Empty states handled
- [ ] Mobile experience tested
- [ ] Cross-browser tested
- [ ] Performance benchmarked
**Launch:**
- [ ] Content editors trained
- [ ] Editorial calendar established
- [ ] Publishing workflow in place
- [ ] Monitoring setup (analytics, errors)
- [ ] Backup strategy defined
- [ ] Support plan in place