Product Cards block

Product Cards is a commerce-focused block for showcasing tailored offers inside a quiz. It uses the same card and carousel behavior as Card/Carousel step, with additional pricing fields for merchandising.

Configuration

1. Add a Product Cards block from the block palette.
2. Choose display mode: Auto, Single, or Carousel.
3. Configure each product card with title, description, image, and CTA button.
4. Set pricing fields for each card: price, compare-at price, billing suffix, and badge.
5. Use Continue or card-level CTA buttons to move respondents forward.

Product fields

• Price: Current offer price (example: $49).
• Compare-at price: Reference price shown with strikethrough (example: $79).
• Billing suffix: Period text like /mo or /year.
• Badge: Label like Best value or Most popular.

Validation rules

• If Compare-at price is set, Price is required.
• Product cards still follow card CTA validation: button label and URL are required when CTA is enabled.

Display behavior

• Auto: One card renders as a single card; two or more render as carousel.
• Single: Exactly one card.
• Carousel: Two or more cards.

Logic and routing

• Product Cards supports the same step-level Jump destination behavior as Card/Carousel step.
• Use card CTA buttons for external links and jump destination for internal quiz flow.

Tips

• Pair Compare-at price with Price to make savings obvious.
• Keep badge copy short so it does not dominate card titles.
• Use one primary CTA action per card to avoid split intent.

For a complete workflow, see How to build a product recommendation quiz.

For template starting points, browse Sales & Conversion templates.