GuidePlugin DocsFilter Cards
Create visual card-based filters that allow users to make selections through clickable tiles with images and labels.
Filter Cards create visual, interactive selection interfaces using clickable tiles. They're perfect for category selection, feature choices, and any filter where visual representation helps users make decisions quickly.
Card Filter Types
| Type | Behavior | Best For | Visual |
|---|---|---|---|
| Checkbox | Multiple selections allowed | Features, categories, options | ☑️ Square selection |
| Radio | Single selection only | Exclusive choices, categories | ⚪ Round selection |
Card Behavior Options
| Behavior | Logic | Example Use | Result |
|---|---|---|---|
| Narrow (AND) | All selected cards must match | "Large" AND "Luxury" | More specific results |
| Widen (OR) | Any selected card can match | "Red" OR "Blue" | Broader results |
Creating Card Filters
Navigate to Filter Creation
Go to GuidePlugin > Filter > Create and select the Cards tab.
Configure Card Settings
Set up the basic card behavior:
| Setting | Options | When to Use |
|---|---|---|
| Card Type | Checkbox / Radio | Checkbox for multiple selections, Radio for single choice |
| Card Behavior | Narrow / Widen | Narrow to refine results, Widen to expand options |
Create Card Objects
Add individual cards that users can select:
Card Object Settings:
| Field | Purpose | Requirements |
|---|---|---|
| Image | Visual icon for the card | JPG, PNG, SVG formats, max 200KB |
| Label | Text shown to users | Clear, concise description |
| Card ID | Unique identifier | Auto-generated, don't change |
Important: Never change the Card ID after creation - it's used internally to track selections and conditions.
Define Conditions
Set up what happens when users select each card:
Condition Components:
| Component | Purpose | Options |
|---|---|---|
| Facet | Which data to filter by | Any facet you've created |
| Rule | How to compare values | Equals, Contains, Greater Than, etc. |
| Behavior | How multiple values combine | Narrow (AND) or Widen (OR) |
Card Filter Examples
E-Commerce Product Categories
Setup:
- Card Type: Checkbox (multiple categories allowed)
- Card Behavior: Widen (show products from any selected category)
| Card | Image | Label | Condition |
|---|---|---|---|
| Card 1 | 👔 | Clothing | Category equals "clothing" |
| Card 2 | 📱 | Electronics | Category equals "electronics" |
| Card 3 | 🏠 | Home & Garden | Category equals "home-garden" |
Property Type Selection
Setup:
- Card Type: Radio (single property type)
- Card Behavior: Narrow (specific property type only)
| Card | Image | Label | Condition |
|---|---|---|---|
| Card 1 | 🏠 | House | Property Type equals "house" |
| Card 2 | 🏢 | Apartment | Property Type equals "apartment" |
| Card 3 | 🏘️ | Condo | Property Type equals "condo" |
Feature Selection
Setup:
- Card Type: Checkbox (multiple features)
- Card Behavior: Narrow (must have all selected features)
| Card | Image | Label | Condition |
|---|---|---|---|
| Card 1 | 📶 | WiFi | Features contains "wifi" |
| Card 2 | 🅿️ | Parking | Features contains "parking" |
| Card 3 | 🏊 | Pool | Features contains "pool" |
Visual Design Best Practices
| Aspect | Recommendation | Why |
|---|---|---|
| Image Size | 64x64px or 128x128px | Consistent visual appearance |
| Image Style | Use icons or simple graphics | Clear visual communication |
| Label Length | 1-3 words maximum | Easy scanning and selection |
| Cards Per Row | 2-4 cards depending on screen size | Optimal user experience |
Card Selection Logic
AND Logic (Narrow)
User selects: "Large" AND "Luxury"
Results: Only items that are BOTH large AND luxury
Effect: Fewer, more specific resultsOR Logic (Widen)
User selects: "Red" OR "Blue"
Results: Items that are red OR blue OR both
Effect: More results, broader selectionMixed Conditions
Card 1: Price Range = "$100-200" (Narrow)
Card 2: Color = "Red" OR "Blue" (Widen)
Result: Items $100-200 that are red or blueTroubleshooting Cards
| Problem | Symptoms | Solutions |
|---|---|---|
| Cards Not Showing | Empty filter display | Check facet data exists Verify card conditions Ensure images load properly |
| Wrong Results | Unexpected filtering behavior | Review condition logic Check facet value matching Verify AND/OR behavior settings |
| Images Not Loading | Broken image icons | Check image file paths Verify file formats Ensure proper permissions |
| Poor Mobile Experience | Cards cramped or overlapping | Test responsive behavior Reduce cards per row Optimize image sizes |
Card Settings
You can customize the visual appearance of your cards:
| Setting | Purpose | Effect |
|---|---|---|
| Maximum Width | Controls card width | Consistent card sizing across devices |
| Maximum Height | Controls card height | Uniform visual appearance |
| Image Dimensions | Sets card image size | Optimized display performance |
These settings help you influence the overall appearance and layout of your card filters to match your site's design.
Card Filter Performance
| Factor | Impact | Optimization |
|---|---|---|
| Number of Cards | More cards = slower rendering | Limit to 6-8 visible cards |
| Image Sizes | Large images slow loading | Optimize images to <50KB |
| Complex Conditions | Multiple conditions slow filtering | Simplify condition logic |
Next Steps
| Action | Purpose | Link |
|---|---|---|
| Add to Guides | Use card filters in complete experiences | Guides Documentation → |
| Try Slider Filters | Explore numeric range filtering | Filter Slider → |
| Advanced Logic | Add conditional card behavior | Logic Documentation → |
User Testing: Try your card filters with real users to ensure the visual choices and labels make sense to your target audience.