Product cards display your quiz recommendations using product information from Shopify. You can customize their layout, images, descriptions, buttons, variants, and purchase options to create a shopping experience that matches your brand.
Open product card settings
Open your quiz in the editor.
Navigate to a page containing a Products component.
Select the component and click its gear icon to open its settings.
From here, you can customize how products are displayed and how shoppers interact with them.
Choose a product card layout
Open Display Layout to choose how your products appear.
Available layouts include:
Layout | Best for |
Classic Grid | Displaying several products side by side |
Full Details Card | Showing detailed product information |
Inline Price | A clean layout with the price beside the title |
Simple Minimal | Highlighting product images with minimal details |
Border Grid | A structured product grid |
Color Swatches | Displaying color options |
Tall Imagery | Fashion, beauty, or portrait product photography |
Image Overlay | Highlighting images with overlaid information |
Product Overview | Featuring a single main recommendation |
You can also customize:
Products per row: Choose Auto or display 1–4 products per row.
Card content: Show or hide product images, titles, descriptions, and prices.
Content alignment: Control how product information and buttons are aligned.
Width and spacing: Adjust the size and spacing of your Products element.
Tip: Use Preview to check how your layout looks on desktop, tablet, and mobile.
Customize product buttons
Open Edit Calls to Action to configure what happens when shoppers interact with your product cards.
Available actions include:
Add to cart: Add the selected product to the shopper's cart.
Go to checkout: Send shoppers directly to checkout.
Go to product page: Open the product's Shopify page.
Custom URL: Direct shoppers to a specific URL.
Add all to cart: Add multiple recommended products to the cart.
You can also configure a registered handler for custom developer integrations. For each action, you can customize the button label, style, and confirmation message.
You can add multiple actions to a product card and display them as stacked buttons or a dropdown.
Configure product variants
If your products have variants, such as sizes or colors, you can let shoppers select their preferred option directly from the product card.
Open Variant Selector in your Products element settings.
Choose Per option or Single dropdown.
Configure how individual options appear using buttons, dropdowns, or color swatches.
Optionally, enable Preselect first variant to display the first variant's image and price automatically.
The variant selector only appears for products with multiple variants.
Add quantity selectors
You can let shoppers choose how many items they want before adding products to their cart.
Open Quantity Selector.
Enable Show quantity selector.
Preview your product cards to confirm the selector works as expected.
You can also customize product quantities using the Quantity field in Product Info. Set a fixed quantity or use a Formula or number field from your quiz to automatically determine how many units should be added to the cart.
Set product quantities automatically
You can automatically set product quantities based on shoppers' answers, formulas, or fixed values. This is useful for quizzes that calculate how much of a product a shopper needs, such as monthly supplies, food portions, or recommended quantities.
Choose how product quantities are calculated
Product quantities can come from three sources:
Fixed quantity: Set a specific number, such as always recommending two items.
Formula: Use a calculated result from your quiz, such as the number of bags of pet food needed per month.
Number field: Use a number entered by the shopper, such as the number of people or pets in their household.
Configure automatic quantities
Open your quiz in the editor and select the Products element.
Open Per-Product Customization and select the product you want to configure.
Find the Quantity field.
Choose whether the quantity should use a fixed number, a formula, or a number field from your quiz.
Configure the value or select the relevant quiz input.
Use Preview to test the quantity with different answers.
You can also ask the AI assistant to configure quantities for you.
How automatic quantities work
Quantities update automatically as shoppers answer questions and calculations change. The calculated quantity pre-fills the product's quantity selector and is used when the shopper adds the product to their cart.
Keep in mind:
If a calculated quantity is invalid or zero, it defaults to 1.
The quantity selector's maximum limit still applies.
Formula results update as the shopper's answers change.
Display subscription options
If your Shopify products have subscription selling plans, you can display them directly on your product cards.
Open Subscriptions in your Products element settings.
Enable Show subscription options.
Choose your purchase options:
One-time and subscription: Let shoppers choose between purchasing once or subscribing.
Subscription only: Prioritize subscription purchases for products with available selling plans.
Choose how subscription plans are labeled, using delivery intervals or selling plan names.
You can also add help text or a help popup to explain subscription options.
Note: Products without an available subscription plan can still be offered as one-time purchases.
Customize product information
By default, product cards use information from Shopify, including images, titles, descriptions, prices, and product links. You can customize this information to make your recommendations more relevant without changing your Shopify product listings.
Use Product Info sets
Product Info sets let you create reusable product information that can be applied across multiple quizzes.
Open Settings > Product Info.
Enter a name under New set name and click Create set.
Configure the product information you want to display.
Return to your Products element.
Under Product Info Set, select the set you want to use.
You can customize product images, titles, descriptions, prices, and links using custom values or Shopify metafields. For example, you might use shorter, benefit-focused descriptions on quiz results pages while keeping the original product descriptions in Shopify.
Customize individual products
You can also customize a specific product within a Products element.
Select your Products element.
Open Per-Product Customization.
Select the product you want to edit.
Choose the source for each field:
From Shopify: Use the original product information.
Custom: Enter your own value.
Metafield: Display information from a Shopify metafield.
Available fields include product images, titles, descriptions, prices, and URLs.
You can also configure product-specific visibility rules, action buttons, and quantity settings.
Keep in mind: Product information follows this priority:
Individual product customizations in the Products element.
The selected Product Info set.
Default Shopify product information.
Preview your product cards
Before publishing, use Preview to test how your product cards appear and behave.
Check that:
Product images, titles, descriptions, and prices display correctly.
The layout looks good on desktop and mobile.
Variant and quantity selectors work as expected.
Subscription options appear for eligible products.
Add-to-cart buttons and other actions work correctly.
Product information matches your intended results.
To control which products appear on your results pages, see Set up product recommendation logic in your quiz.