Docs
Product Cards Block
Published July 25, 2026
Product Cards is the commerce-focused version of Cards. Use it when quiz answers should lead to tailored offers, product recommendations, service packages, pricing comparisons, or conversion CTAs.
ProAdvanced offer and monetization block
Product Cards are designed for teams that want to turn quiz segmentation into product, package, or checkout paths.
Best used for
Product recommendations
Show matched products after participants answer preference, need, budget, or use-case questions.
Service packages
Present different service tiers, plans, consultations, or bundles inside the quiz flow.
Pricing comparisons
Use price, compare-at price, billing suffix, and badges to make offer differences easy to scan.
Offer bundles
Group related products or services into tailored bundles with a clear CTA.
Post-quiz outcomes
Show recommended offers after scoring, branching, or AI-assisted segmentation.
Conversion CTAs
Send high-intent participants to checkout, booking, quote requests, or product pages.
When to choose another block
Cards
Use Cards when the cards are educational, content-based, or CTA-based but do not need pricing fields.
Outcomes
Use Completion when the quiz is ending and the participant should see a final outcome rather than a product set.
Multiple Choice
Use Multiple Choice when the participant should choose a product as their answer.
Image Choice Quiz
Use Image Choice Quiz when product images are the answer choices.
Lead Capture
Use Lead Capture when the next goal is contact collection before showing or sending the offer.
Setup flow
- Add a Product Cards block from the Question Blocks palette.
- Choose the display mode: Auto, Single, or Carousel.
- Add each product card with a title, description, image, and image alt text.
- Add pricing fields such as price, compare-at price, billing suffix, and badge.
- Add a clear CTA button for each product card when participants should take action outside the quiz.
- Customize the continue button when participants should stay inside the quiz flow.
- Configure a jump destination when the continue button should route to a specific internal step.
- Preview on mobile to confirm the product image, price, badge, and CTA are easy to scan.
Settings reference
Display mode
Auto adapts based on card count, Single shows one product card, and Carousel lets participants browse multiple offers.
Product cards
Each card can include image, alt text, title, description, pricing, badge, and CTA details.
Image and alt text
Images make products easier to evaluate, while alt text supports accessibility and clearer content indexing.
Price
Shows the current product, package, or offer price.
Compare-at price
Shows a reference price with strikethrough when you want to highlight savings.
Billing suffix
Adds context such as /mo, /year, per session, or one-time.
Badge
Adds a short merchandising label such as Best value, Popular, or Recommended.
CTA button
Sends participants to checkout, booking, product details, quote forms, or another external URL.
Continue button
Moves participants forward in the quiz flow when they are done reviewing the cards.
Jump destination
ProRoutes participants to a specific internal destination when they click the continue button.
Validation rules
- If Compare-at price is set, Price is required.
- If a card CTA is enabled, both the button label and a valid URL are required.
- CTA URLs should start with
http://orhttps://. - Badge copy should stay short so it does not compete with the product title.
- Pricing should be clear enough to understand on mobile without extra explanation.
Ecommerce UX guidance
Product Cards should make the next action obvious.
- Use one primary CTA per product card.
- Use compare-at pricing only when the reference price is meaningful and honest.
- Avoid showing too many products unless comparison is the point of the step.
- Keep product images visually consistent across the card set.
- Keep titles and prices easy to scan on mobile.
- Use badges sparingly to highlight the most important offer difference.
- Send product CTAs to the most direct conversion page available.
Routing examples
Matched recommendations
Use earlier answers to route participants to the product set that fits their needs or budget.
Checkout path
Send product CTA buttons directly to checkout, booking, or product detail pages.
High-intent lead capture
Route participants who continue after viewing offers to lead capture or booking.
Segmented bundles
Show different bundles for beginner, advanced, budget, or premium segments.
Product Cards supports a step-level jump destination for the continue button. Use card CTA buttons for external actions and the jump destination for internal quiz routing. See the Logic & Branching guide for how step-level destinations differ from conditional question rules.
Workflow guides
For a complete ecommerce workflow, see How to build a product recommendation quiz. To start from a prebuilt flow, browse Sales & Conversion templates.
Troubleshooting
Is Product Cards different from Cards?
Yes. Product Cards adds commerce fields such as price, compare-at price, billing suffix, and badge. Use Cards for general content cards without pricing.
Can I link Product Cards to checkout?
Yes. Use each card CTA button to link to checkout, booking, product detail pages, quote forms, or another external destination.
Should I use compare-at pricing?
Use compare-at pricing only when the reference price is meaningful. If compare-at price is set, the current price is required.
Can I route after the product cards?
Yes. Configure the step-level jump destination when the continue button should route participants to a specific internal step, such as lead capture or completion.
Tips
- Use Product Cards when price or offer comparison matters.
- Keep each card focused on one clear product, package, or offer.
- Use badges to clarify the best use case, not to decorate every card.
- Preview on mobile before publishing because price, badge, and CTA density can add up quickly.
- Test every checkout, booking, or product URL before sharing the quiz.
- Use Lead Capture after Product Cards when sales follow-up is the main goal.
Next steps
Cards
Use the base rich-card step when pricing fields are not needed.
Lead Capture
Collect contact details after participants review matched offers.
Product recommendation quiz guide
See a full ecommerce setup from qualifying questions to matched offers.
Logic & Branching
Route participants before or after Product Cards.