Overview
The Card Swiper template is a product finder or personality quiz experience built around a swipe mechanic. Users are presented with one card at a time — each card displays a product image, a title, and a short description — and they swipe right (yes) or left (no) to indicate their preference. After completing all questions, they are matched to the outcome that best reflects their selections.
The swipe interaction can be triggered in two ways: by physically dragging the card with a mouse or touch gesture, or by tapping the ✓ (yes) and ✗ (no) buttons below the card. Both inputs trigger the same action.
This template includes:
Intro Screen — introduces the experience and invites users to start swiping
Question Screens (Q1, Q2, Q3, and more) — each displays one swipeable card per screen
Outcome Screen — displays the matched result, dynamically populated from the Outcome panel
Outcome Logic — matching logic that maps each swipe direction (yes/no) to outcomes via weighted point scoring
Before configuring logic or content, we recommend first applying your brand styling and updating the experience copy.
Preview the experience: Card Swiper Experience 🔗
⚠️ Note on JavaScript Permissions
|
When to Use This Template
This template is ideal for:
Product finders where yes/no preference signals are enough to make a meaningful recommendation
Personality quizzes that feel more like an app than a form
Brand or lifestyle matching experiences with a mobile-first audience
Campaigns where engagement and time-on-experience are key metrics
Routine builders, style guides, or category finders where the user's affinity for individual items drives the result
Common Business Goals
Product Discovery
Lead Generation
Audience Segmentation
Engagement & Time-on-Site
Data Collection
Example Use Cases
Beauty / Haircare: swipe through product types to build a personalized routine
Retail / Ecommerce: like or pass on product categories to reveal a curated recommendation
CPG: gauge affinity for product formats or usage habits through swipe signals
Media: swipe-based content preference quiz that routes to a personalized content feed
Template Structure
This experience contains the following screens and components:
Component | Purpose |
Screen 1 — Intro Screen | Introduces the experience, explains the swipe mechanic, and invites the user to start. |
Screens 2–4 — Q1, Q2, Q3 | Each screen displays one swipe-able card. The card includes a product image, a title, and a short description. Users swipe right (yes/like) or left (no/dislike), or tap the ✓ or ✗ buttons. Additional question screens can be added following the same pattern. |
Screen 5 — Outcome Screen | Displays the matched outcome. All content — heading, image, description — is dynamically populated from the Outcome panel, not the screen editor. |
Confetti Animation | Triggered on the Outcome screen to celebrate the result. Powered by the canvas-confetti library, already injected via the Javascript Hooks panel. |
Understanding how these pieces work together will make customization easier.
Creating an Experience from This Template
To launch this template:
Navigate to Builder → Template Gallery.
Locate the template in the Product Match Quiz section in the template gallery.
Hover over the template and select Use Template.
Enter a name for your experience.
(Recommended) Apply your Style Guide to automatically brand the experience.
Click Create.
The platform will generate a new experience using the template structure and selected branding.
Once created, you can customize the content, design, and recommendation logic to fit your specific use case.
💡 Tip: We recommend creating and applying a Style Guide before launching templates to streamline setup and maintain consistent branding across experiences.
Step 1: Apply Your Brand Styling
The first step is to replace the template branding with your own. If your Style Guide is already created, this will happen automatically during template creation.
Review and update:
Colors
Fonts
Logos
Background Images
Buttons
Imagery
Applying your branding first makes it easier to visualize the final experience as you customize content and recommendations.
Haven't created a Style Guide yet?
No problem. You can still apply your branding directly within the experience.
From the Builder Map, select the Design icon in the toolbar.
The Experience Style Guide modal will open
Update your colors, fonts, logos, buttons, and imagery.
Click Apply to update all screens.
Recommended Action
Complete all branding updates before modifying copy, logic, or outcomes. Applying your style guide first makes it easier to visualize the final experience before updating content. Review Style Guide Overview for more details and instructions.
Step 2: Customize the Introduction Screen
The introduction screen should clearly communicate the swipe mechanic and what users will receive at the end of the experience.
✅ YOU CAN EDIT:
|
Review and Update
Headline — communicate the swipe mechanic and the reward
Subtitle — set the expectation
Description — explain the mechanic briefly
CTA button text — use action-oriented language
Background and logo
Best Practice
Explain the swipe mechanic clearly on the intro screen — users unfamiliar with this interaction pattern benefit from a one-line explanation (e.g., "Swipe right if you like it, left if you don't"). This reduces hesitation and drop-off on the first question screen.
Step 3: Update Question Screens and Swipe Cards
Each question screen displays one swipeable card. The card includes a product image at the top, a product title, and a short description that frames the question or prompts engagement. Users swipe the card or tap the action buttons to respond.
✅ YOU CAN EDIT (all question screens):
|
Adding More Question Screens
From the Builder Map, locate the question screen you want to duplicate.
Click the three-dot menu on the screen and select Copy Screen.
Hold Shift on your keyboard and click the pathway between the two screens where you want to insert the new question.
When the menu appears, select Paste Screen.
Once the screen has been added, update the question content and answer options as needed.
Rename the screen to match the new question so it is easy to identify within the Builder Map.
Each new screen should be mapped in the Outcome Logic panel so that its swipe answers contribute to the scoring
Card Content Considerations
When writing card content, think about:
One card per question — each screen asks about exactly one product, product type, or preference dimension
Description as a prompt — use the card description to nudge the user (e.g., "Is this part of your daily routine?", "Are you a fan?"). This increases engagement and makes the swipe feel more deliberate
Image clarity — the card image should clearly represent the product or concept. Avoid busy backgrounds; flat or isolated product shots work best
Best Practice
Keep card descriptions short — 1 to 2 sentences. The user is swiping, not reading. Lead with what makes the product distinctive, then close with a yes/no prompt to make the swipe decision feel natural.
Step 4: Configure Additional Experience Elements
Confetti Animation
The Outcome screen triggers a confetti burst animation to celebrate the user's matched result. This animation is powered by the canvas-confetti library, already injected into the template via the Javascript Hooks panel.
To confirm the library is loaded:
Click the three-dot menu (⋮) on the experience
Select "Edit Javascript Hooks"
Confirm the following URL is listed under Inject JS Libraries:
Review and Update
Confirm the confetti library is injected (Inject JS Libraries tab)
Confetti colors are pre-configured to a gold palette — they can be updated in the On Show script if needed (requires JS Hook permissions)
Best Practice
Do not remove the confetti library injection. The confetti function is called from the Outcome screen's On Show script — if the library is missing, the screen will produce a JavaScript error.
⚠️ Javascript Hook Permissions Required
|
Step 5: Configure the Lead Capture Screen
This template does not include a lead capture screen by default. You can add one between the last question screen and the outcome screen to collect user information before revealing results.
Form Fields
Determine which information you want to collect:
Email Address
First Name
Last Name
Phone Number
Custom Fields
Opt-In Language
Update all consent language to align with your organization's legal and compliance requirements. Examples include:
Marketing consent language
Privacy policy references
Terms and conditions
Hyperlinks
Ensure all links point to the correct destinations:
Privacy Policy
Terms of Service
Additional compliance resources
Best Practice
Place the lead capture screen after the final swipe question but before the outcome reveal. At this moment, users are invested in seeing their result — this is the highest-motivation point to ask for an email address.
💡 Tip: Review what fields you can add to a lead capture screen with this article.
Step 6: Configure Results and Outcomes
The Outcome Screen displays the matched result to the user. All content — heading, image, description, and CTA — is managed from the Outcome panel, not the screen editor.
The screen uses dynamic placeholders that are automatically populated at runtime based on which outcome the user is matched to. The results screen needs to have the dynamic placeholders on the screen in order for content from the outcome panel to populate.
✅ YOU CAN EDIT (from the Outcome panel):
|
Managing Outcomes
This template includes 3 pre-built outcomes as examples. To view and edit them, follow the instructions below:
Accessing the Outcomes Section
Option 1: From the Builder Map
From the Builder Map, select the Outcomes icon in the toolbar. This will open the Outcomes page where you can view, add, and edit all outcome details for your experience.
Option 2: From the Screen Editor
If you are actively editing a screen, you can also navigate directly to Outcomes from the left-side panel. In the editor, locate and select Add Outcomes. This will take you to the same Outcomes page without needing to return to the Builder Map.
Each outcome entry includes:
Outcome Name — internal identifier used in the logic panel
Heading Name — the title displayed to the user on the outcome screen
Outcome Image — the image displayed on the outcome screen
Outcome Description — the supporting text shown below the image
URL — the destination users are sent to when they click the CTA
You can rename these outcomes, replace their content, add new outcomes, or remove existing ones to match your own product or persona structure.
Review and Update
Confirm the logic type is set to matching
Outcome names and headings
Outcome images
Outcome descriptions
Redirect URLs
CTA button text and color on the Outcome Screen
Best Practice
Every outcome should feel like a win. Even a "minimalist" or "neutral" result should be framed positively and link to a curated, relevant product selection. A well-named outcome with a strong CTA is the most important conversion moment in the experience.
Step 7: Configure Logic
Logic Type: Matching (Weighted Points)
How It Works
This template uses Matching logic with weighted point values. Each swipe direction — ✓ (yes/right) or ✗ (no/left) — on each question screen is assigned a point value for each outcome. At the end of the experience, the outcome with the highest total points is shown to the user.
Unlike a standard 1-point matching quiz, this template uses higher weights to give certain swipe directions more influence over the final result. In the default configuration:
Swiping ✗ (no) on a card contributes 3 points to THE MINIMALIST ROUTINE and 2 points to THE BALANCED ROUTINE
Swiping ✓ (yes) on a card contributes 2 points to THE BALANCED ROUTINE and 3 points to THE STYLE LOVER ROUTINE
This weighted approach means that a user who consistently says no to products leans toward The Minimalist Routine, a user who says yes to most things leans toward The Style Lover Routine, and a user with a mix of yes and no responses is most likely to match The Balanced Routine — because it accumulates balanced points from both directions.
Configuration Steps
Navigate to Outcome Logic in the left panel
For each question screen, assign point values to the ✓ (yes) and ✗ (no) swipe responses across all outcomes
Save and validate using the Outcome Validator toggle
Logic Considerations
The ✗ (no) row and ✓ (yes) row in the Logic panel correspond to the left and right swipe buttons respectively
Point values do not need to be symmetric — you can weight yes and no responses differently if needed
A swipe response can contribute points to more than one outcome simultaneously
If two outcomes tie, the platform will apply a tiebreaker rule — review the platform documentation for tiebreaker behavior
The Outcome Validator (top right of the Logic panel) helps confirm that every possible swipe combination leads to a valid outcome
Best Practice
The weighted approach used in this template is especially powerful for yes/no swipe mechanics because it allows ambiguous users (those who mix yes and no swipes) to naturally converge on a middle-ground outcome. Before building, sketch out your intended outcome logic in a spreadsheet — map each question's yes/no to each outcome with point values — to make sure your logic produces the distribution you intend.
Step 8: Test the Experience
Before publishing, complete a full testing pass to ensure everything works as expected. From the Builder Map, click Preview to test your experience.
Review
Branding and styling across all screens
Content updates (headlines, descriptions, card titles, CTA text)
Swipe interaction on both desktop (mouse drag) and mobile (touch drag)
Button tap interaction (✓ and ✗) as an alternative to swiping
Outcome routing — verify that each swipe combination routes to the correct outcome
Outcome content — confirm the heading, image, description, and URL are correct for each outcome
Confetti animation on the Outcome screen
Lead capture functionality (if added)
Legal and compliance language
Mobile responsiveness
Test Scenarios
Run multiple test scenarios to verify:
Swiping all ✓ (yes) routes to the expected outcome
Swiping all ✗ (no) routes to the expected outcome
A mixed swipe pattern routes to the middle-ground outcome
Button taps produce the same outcome as swipe gestures
The confetti animation fires on the Outcome screen
The CTA on each outcome screen links to the correct URL
Best Practice
Test on a touch device specifically — the swipe mechanic is primarily designed for mobile and should feel fluid and responsive. Also test the card snap-back behavior by dragging a card partway and releasing without crossing the threshold — the card should return to its original position smoothly.
Next Steps
Once testing is complete, your experience is ready to publish and generate launch links by toggling to the launch section from the Builder Map.
Continue optimizing by:
Reviewing outcome distribution in the Analytics panel to understand which routines users are matching to most
Refining logic weights if one outcome is being matched significantly more or less than expected
A/B testing different card images or descriptions to see which combinations drive higher completion rates
Adding a lead capture screen to collect emails before revealing the matched outcome
Updating outcome CTA URLs to point to specific product pages, curated collections, or promotional offers
For additional assistance, refer to the platform documentation or contact your support team.
Frequently Asked Questions
How does the swipe mechanic work technically?
Each question screen has a draggable card element. Users can drag the card left or right with a mouse or touch gesture, or tap the ✓ or ✗ buttons below. If the card is dragged past a threshold distance (150px), it animates off-screen and triggers the corresponding button action. If released before the threshold, the card snaps back to its original position.
What is the difference between swiping and tapping the buttons?
Both interactions trigger the same response. Swiping right and tapping ✓ are equivalent; swiping left and tapping ✗ are equivalent. The swipe gesture and button tap are two input methods for the same action.
How does the template determine which outcome to show?
Each swipe direction (✓ or ✗) on each question screen is assigned a weighted point value for each outcome in the Outcome Logic panel. The user is matched to the outcome with the highest total points based on all their swipe responses.
Can I add more question screens?
Yes. You can add additional question screens following the same single-card swipe format. Each new screen should be mapped in the Outcome Logic panel so that its swipe responses contribute to the scoring.
Can I add more outcomes?
Yes. Navigate to Add Outcomes in the left panel and use the + button to add a new outcome entry. Then update the Outcome Logic panel to include the new outcome in your point mapping.
Can I change the swipe threshold distance?
Yes, but this requires modifying the Custom Javascript on the question screen. The threshold is currently set to 150 pixels. Changing this value requires Javascript Hook permissions on your account.
Can I remove the confetti animation?
Yes. The confetti animation is triggered from the Outcome screen's On Show script. You can disable it by removing the triggerConfetti() call from that script. This requires Javascript Hook permissions on your account.
Can I modify the lead capture form?
A lead capture screen is not included by default but can be added between the last question screen and the outcome screen. Once added, you can customize it with any combination of standard and custom form fields.