Landing Page Category Filter
Category Filter Demo
URL Creation Debugger
Interactive tool to test and validate how category names are converted to Webflow template URLs.
URL Converter
Test Cases
Click any test case to see how it's processed step-by-step:
Standard Category
"Arts & Entertainment"
Expected: arts-entertainment
Multiple Words
"Real Estate & Property"
Expected: real-estate-property
Special Characters
"Food & Drink (Restaurants)"
Expected: food-drink-restaurants
Edge Case: Lots of Spaces
"Health & Wellness"
Expected: health-wellness
Edge Case: Hyphens
"E-commerce & E-business"
Expected: e-commerce-e-business
Webflow Integration Demo
This section demonstrates the vanilla JavaScript integration with simulated Webflow elements and hierarchical filtering.
Category Filter (Swiper)
Template Items (Demo Data)
Interior Studio
Beautiful portfolio for interior designers
Architecture Firm
Professional architecture portfolio
Dance Studio
Professional dance academy website
Film Production
Creative film and video production
Personal Blog
Clean and minimal personal blog
Digital Magazine
Modern online magazine platform
Advocacy Campaign
Social change and advocacy platform
Transportation Service
Professional transport business
Integration Code
<!-- Add this script to your Webflow page --> <script src="https://landing-page-category-filter.vercel.app/category-filter.min.js"></script> <!-- Add Finsweet CMS Filter attributes to your template items --> <div class="tm-templates_grid_item" fs-cmsfilter-element="item"> <div class="tm-category" fs-cmsfilter-field="category">Technology</div> <div class="tm-subcategory" fs-cmsfilter-field="subcategory">Software & SaaS</div> <!-- Your template content --> </div>
Hierarchical Structure
API Information
Flat Categories
Endpoint: /api/categories
Returns parent categories only from the filtered landing page view.
- Filtered to One Page Templates
- Uses 🪣Category Group(s) Display Name
- Alphabetically sorted
- Duplicates removed
Hierarchical Categories
Endpoint: /api/categories?hierarchical=true
Returns parent categories with their children for combo filtering.
- Aligns filtered parents with complete hierarchy
- Uses 🪣Categories field for children
- Enables two-stage filtering
- Second-click deselection support
Combo Filter Workflow
- Parent Mode: Click a parent category (e.g., "Business") to filter items
- Child Mode: If parent has children, interface switches to show subcategories
- Combo Filter: Click a child (e.g., "SaaS") to apply "Business - SaaS" filter
- Back Navigation: Click back button to return to parent categories
- Deselection: Second click on any category deselects it