Normal Recommendation

From this page you can:

• Configure recommendation settings and map supported questions
• Customize Result Action
• Build the result page with HTML, Rich Text, Hero Banner, and more
• Customize the Products section

​

How to Set Normal Recommendation

1. Go to Shopify Admin → Apps → Quizify.
2. Open a quiz from Dashboard or My Quizzes by clicking Edit, or create a new quiz.
3. In the Quiz Builder, click Recommendation in the left icon menu.
4. Select Normal.

​

Normal Recommendation Page Overview

When Normal is selected, you will see:

• Builder list (left) — Questions for answer mapping, Result Action, Result page sections including Products, and Add section
• Center preview — Live preview of the result page
• Settings panel (right) — Recommendation type, Type dropdown, Result options, and section/block settings

​

Types (Settings Panel)

Choose the recommendation Type. Only one type can be selected.

Type	What you assign
Product	Recommend products
Variants	Recommend product variants
Collection	Recommend collections
Tag	Recommend by product tags

​

Result Options (Settings Panel)

When Type is Product, Variants, or Tag, these Result options are available:

Option	What it does
Exact matches	Shows recommendations only when a user’s answers exactly match the conditions you set.
Partial matches	Appears when Exact matches is enabled. Shows the most matched products if no exact match is found.
Product limit	Sets the maximum number of products to display. Range: 1–50 when enabled.
Hide unavailable products	Hides or shows unavailable products and variants.
Show last result	Shows the user’s previous result if they took the quiz before, or starts from the beginning.
Show randomise product order	Randomly shuffles the recommended product order for each user.

When Type is Collection, Exact matches and Product limit are not shown. Available options:

Option	What it does
Hide unavailable products	Hides or shows unavailable products and variants.
Show last result	Shows the user’s previous result if they took the quiz before, or starts from the beginning.
Show randomise product order	Randomly shuffles the recommended product order for each user.

​

Supported Question Types

Normal recommendation mapping works with these question types:

Question Type	How mapping works
Single Choice	Assign a recommendation to each answer option.
Multiple Choice	Assign a recommendation to each answer option.
Feedback	Assign recommendations to three ranges: Least Likely, Average, Most Likely.
Rating	Assign recommendations to three groups: Unlikely, About as likely as not, Likely.

In the left sidebar, questions appear with short labels such as Single, Multi, Feedback, and Rating.

​

How to Map Product with Answer

​

Single Choice

1. Open the Single Choice question in the left list.
2. Each answer option includes a Select button.
3. Click Select to assign the chosen recommendation to that answer.
4. After assignment, click Change Product to replace the existing recommendation.

​

Multiple Choice

1. Open the Multiple Choice question in the left list.
2. Each answer option includes a Select button.
3. Click Select to assign the chosen recommendation to that answer.
4. After assignment, click Change Product to replace the existing recommendation.

​

Feedback

The Feedback question type is divided into three ranges:

• Least Likely
• Average
• Most Likely

Assign recommendations separately for each range using Select. After assignment, use Change Product to replace it.

​

Rating

The Rating question type is divided into three groups:

• Unlikely
• About as likely as not
• Likely

Assign recommendations separately for each group using Select. After assignment, use Change Product to replace it.

​

Result Action

Customize the actions displayed on the result page, such as Retake quiz, Cart, and Checkout.

​

Section Visibility

1. Hover over Result Action.
2. Click the Eye icon to hide or show the Result Action section.

​

Result Action Content Settings

Retake Quiz: Button on the result page that lets shoppers restart the quiz from the beginning.

Setting	Details
Retake quiz	Customize the Retake quiz label. Maximum 25 characters.

View Cart: Show a button on the result page that takes shoppers to their cart.

Setting	Details
Cart button	Enable or disable the Cart button on the result page that takes shoppers to their cart.
Cart button text	Customize the Cart button label. Maximum 25 characters.

Proceed to Checkout: Show a button on the result page that sends shoppers to Shopify checkout.

Setting	Details
Checkout button	Enable or disable the Checkout button on the result page.
Checkout text	Customize the Checkout button label. Maximum 25 characters.

​

Result Action Design Settings

Setting	Options / Details
Background Color	Background color of the Result Action bar.
Section Placement	Where this bar appears on the result page: Top or Bottom.
Sticky Position	Keep this bar fixed at the top while scrolling. On your store, this only applies to fullsize popup quizzes.
Font Color	Text color.
Font Size	8 px – 50 px.
Font Weight	Light, Regular, Semi Bold, Bold.
Section Spacing	Top and Bottom: 0 px – 100 px each.

​

Retake Quiz Style / View Cart Button / Proceed to Checkout

Setting	Options / Details
Link Type	Anchor or Button.
Position	Left, Center, or Right.
Button Settings	Available only when Link Type is Button: Border Width (0–10 px), Corner Radius (0–50 px), Background Color, and Border Color.

​

Result Page Sections

Build the result page using content sections. Use + Add section to add sections. Available sections include:

Section	What it does
Discount	Shows a coupon code users can copy.
HTML	Adds custom HTML to the result page.
Rich Text	Adds Heading, Text, and Button blocks.
Hero Banner	Displays a full-width banner with an image and content blocks. Maximum 3 blocks.
Image with Text	Displays an image beside text and button blocks. Maximum 4 blocks.
Video	Displays a Shopify-hosted or embedded video.
Products	Shows recommended products for the fallback outcome

Hover over a section to:

• Hide/Show
• Delete
• Drag to reorder

​

Discount

The Discount section displays a coupon code on the result page for users to copy and redeem. Click on Discount to access the following settings.

​

Discount Content Settings

1. Click Discount under Result page.
2. Enter Coupon text, which is shown above the code. Maximum 125 characters.
3. Enter Coupon code. Maximum 25 characters.
4. Hover over Discount to access:
   • Hide/Show: Eye icon
   • Delete: Remove the section
   • Drag: Reorder the section on the result page

You can also add Custom CSS for styles that apply only to the Discount section, depending on your plan.

​

Discount Design Settings

Coupon Text

Setting	Options
Font Color	Text color.
Font Weight	Light, Regular, Semi Bold, Bold.
Font Size	8 px – 50 px.

Coupon Code

Setting	Options
Background Color	Code box background.
Font Color	Code text color.
Font Weight	Light, Regular, Semi Bold, Bold.
Font Size	8 px – 50 px.

Section Spacing

Setting	Range
Top and Bottom	0 px – 100 px each.

​

HTML

The HTML section lets you add custom HTML code to the result page. Click on HTML to access the following settings.

​

HTML Content Settings

1. Click HTML under Result page.
2. Enter your custom HTML code in the editor.
3. The HTML content is displayed in the Result Preview and on the storefront.

Custom CSS: Add Custom CSS to apply styles only to the HTML section, depending on your plan.

​

HTML Section Actions

Hover over the HTML section to access:

• Hide/Show: Enable or disable the section using the Eye icon
• Delete: Remove the HTML section
• Drag: Change the section order on the result page

​

HTML Design Settings

Section spacing

Setting	Range
Top	Adjust the spacing above the HTML section: 0 px – 100 px.
Bottom	Adjust the spacing below the HTML section: 0 px – 100 px.

​

Rich Text

The Rich Text section displays custom text and buttons on the result page. Rich Text supports blocks:

• Heading
• Text
• Button

Click Add block to add more content blocks. You can add multiple blocks and arrange them. Click on Rich Text to access the following settings.

​

Rich Text Section Actions

Hover over Rich Text to:

• Hide/Show
• Delete
• Drag to reorder

​

Rich Text Content Settings

Custom CSS: Add Custom CSS to style only the Rich Text section, depending on your plan.

​

Rich Text Design Settings

Setting	Options / Details
Background Color	Section background.
Content Position	Left, Center, Right. Automatically optimized for mobile.
Text Alignment	Left, Center, Right.
Section Spacing	Top and Bottom: 0 px – 100 px.
Space Between Blocks	0 px – 80 px. The first block does not get extra top spacing.

​

Rich Text — Heading

Setting	Details
Heading text	Maximum 300 characters.
Design	Font Color, Font Weight (Light / Regular / Semi Bold / Bold), Font Size (8–50 px).

​

Rich Text — Text

Setting	Details
Description text	Maximum 2,000 characters.
Design	Font Color, Font Weight, Font Size (8–50 px).

​

Rich Text — Button

Setting	Details
Button text	Maximum 50 characters.
Button link	Destination URL.
Button style	Solid, Outline, or Text.
Colors & Type	Background Color, Font Color, Font Weight, Font Size (8–50 px).

​

Hero Banner

The Hero Banner section displays a promotional banner with text, image, and a call-to-action. Hero Banner supports blocks:

• Heading
• Text
• Button

Click Add block to add blocks. Maximum 3 blocks per Hero Banner. Click on Hero Banner to access the following settings.

​

Hero Banner Content Settings

Banner Image: Upload a banner image.

• Supported formats: JPG, PNG, SVG, WEBP
• Maximum file size: 20 MB
• Custom CSS

​

Hero Banner Section Actions

Hover to access:

• Hide/Show
• Delete
• Drag

​

Hero Banner Design Settings

Setting	Options / Details
Show content card	Enable or disable the content card over the banner image.
Background Color	Container background. Shown when Show content card is enabled.
Block Alignment	Top Left, Top Center, Top Right, Middle Left, Absolute Center, Middle Right, Bottom Left, Bottom Center, Bottom Right.
Section Spacing	Top and Bottom: 0 px – 100 px.

​

Hero Banner Blocks

Heading, Text, and Button settings match the Rich Text blocks:

• Heading: Maximum 300 characters + font style
• Text: Maximum 2,000 characters + font style
• Button: Text (maximum 50 characters), link, Solid / Outline / Text, colors, and font size

​

Image with Text

The Image with Text section displays an image alongside text and a button. Image with Text supports blocks:

• Heading
• Text
• Button

Click Add block. Maximum 4 blocks per Image with Text section. Click on Image with Text to access the following settings.

​

Image with Text Image Settings

Upload an image.

• Supported formats: JPG, PNG, SVG, WEBP
• Maximum file size: 20 MB
• Custom CSS

​

Image with Text Section Actions

Hover to access:

• Hide/Show
• Delete
• Drag

​

Image with Text Design Settings

Setting	Options
Background Color	Section background.
Desktop Image Placement	Image First or Image Second.
Content Position	Top, Middle, Bottom.
Content Alignment	Left, Center, Right.
Section Spacing	Top and Bottom: 0 px – 100 px.

Note: Heading, Text, and Button block settings are the same as Hero Banner / Rich Text blocks.

​

Video

The Video section displays a Shopify-hosted or embedded video on the result page.

​

Video Section Actions

Hover to access:

• Hide/Show
• Delete
• Drag

​

Video Content Settings

Setting	Details
Heading	Title for the video section.
Heading Size	Small, Medium, Large.
Loop Video	Enable or disable loop video.
Make video full width	Makes the video expand to fill the entire available width of the page.
Shopify-hosted Video	Upload or select a video: MP4, MOV, WEBM.
Embed Video from URL	YouTube or Vimeo URL. Used when no Shopify-hosted video is selected.
Cover Image	Custom thumbnail. Maximum 20 MB. Supported formats: JPG, PNG, SVG, WEBP.
Video Alt Text	Descriptive text for accessibility.
Custom CSS	Optional styling for this section, depending on your plan.

​

Video Design Settings

Setting	Range
Section spacing	Top and Bottom: 0 px – 100 px.

​

Add Section

Click Add section to insert a new content section on the result page. Available sections:

• Discount
• HTML
• Rich Text
• Hero Banner
• Image with Text
• Video

You can add multiple sections of the same type. Newly added sections can be reordered, hidden, or removed.

​

Add Block

Click Add block inside a section to insert content elements.

• Available blocks depend on the selected section.
• Multiple blocks can be added and arranged.
• Hero Banner: Maximum 3 blocks.
• Image with Text: Maximum 4 blocks.

​

Products

The Products section displays the recommended products on the result page. Customize the product card layout by adding, removing, reordering, and styling product blocks.

​

Product Section Actions

Hover over Products to:

• Drag — Reorder the Products section
• Hide/Show — Enable or disable the section with the Eye icon
• Delete — Remove the Products section from the result page

​

Layout

Setting	Details
Desktop columns	Number of product cards per row on desktop. 1 to 4.
Mobile columns	Number of product cards per row on mobile. 1 to 2.
Image ratio	Adaptive image, Square image, Landscape image, or Portrait image.
Equal card height	Makes all product cards in the same row equal height when titles or content vary in length.

Note: Adaptive image uses a uniform square frame and crops each image consistently so product cards stay aligned.

​

Cart

Setting	Details
Add to cart all	Shows an Add to cart all control so customers can add all recommended products in one click.
Add to cart all text	Custom button label. Maximum 50 characters.

Note: Add to cart all is available only when fewer than 10 products are displayed on the result page.

​

Load More Button

Setting	Details
Button text	Customize the Load more button label. Maximum 50 characters.

This button appears only when additional recommended products are available. You can also style it under Style → Load more button.

​

Custom Input Field

Setting	Details
Show custom input	Enable or disable custom input fields for recommended products.
Label name	Shown when custom input is enabled. Used as the placeholder above price.

​

Product Actions & Messages

Setting	Details
No match found	Message shown when no products match the recommendation criteria.

Custom CSS: Add Custom CSS to customize the appearance and layout of the Products section, depending on your plan.

​

Product Design Settings

Background

Setting	Details
Background color	Background color of the Products section.
Product caption background color	Background color behind each product’s information.
Text alignment	Left, Center, or Right.

Product Spacing

Setting	Details
Max gap between products	Horizontal spacing between product cards. 0% to 20%.
Enable product shadow	Shows or hides the shadow around each product card.

Load More Button Style

Setting	Details
Background color	Button background.
Font color	Button text color.
Font weight	Light, Regular, Semi Bold, Bold.
Font size	Button text size.
Border color	Button border color.
Border width	Border thickness.
Corner radius	Button corner roundness.

Add to Cart All Style

Setting	Details
Font size	Button text size.
Font weight	Light, Regular, Semi Bold, Bold.
Font color	Button text color.
Link position	Above products or Below products.
Link type	Button or Text link.
Redirect after add to cart	None, Cart page, or Checkout page.
Button style	Available only when Link type is Button. Includes Background color, Border color, Border width, and Corner radius.

Section Spacing

Setting	Range
Top & Bottom	0 px – 100 px

​

Product - Image

Drag and drop this block to change the position of the product image. Section-level settings such as image ratio can be managed by selecting the parent Products section. Hover over Image to perform these actions:

• Delete
• Drag

​

Product - Heading

This shows the product name/product title on the result page. Hover over Heading to perform these actions:

• Delete
• Drag

Heading Design Settings

Option	Description
Font Color	Select the color to apply to the heading text.
Font Size	Adjust the heading font size between 8 px and 50 px.
Font Weight	Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.

​

Product - Variants

Drag and drop this block to change the position of the product variants selector. Hover over Variants to perform these actions:

• Delete
• Drag

​

Product - Price

Show the price of the product. Hover over Price to perform these actions:

• Delete
• Drag

Price Design Settings

Option	Description
Font Color	Select the color to apply to the heading text.
Font Size	Adjust the heading font size between 8 px and 50 px.
Font Weight	Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.

​

Product - Button

Use it to show the add to cart button. Hover over Button to perform these actions:

• Delete
• Drag

Button Content Settings Add to Cart

Setting	Description
Add to cart	Show or hide the Add to cart control on each product card.
Hide add to cart for free products	Hides the Add to cart control for products that are free.
Add to cart text	Customize the text displayed on the Add to cart button. Maximum 50 characters.
Sold out button text	Customize the text displayed when a product is sold out. Maximum 50 characters.

Quantity Buttons: Allow the user to add or remove the product.

Setting	Description
Show quantity buttons	Show or hide quantity controls for products.
In cart text	Customize the text displayed when the product is already added to the cart. Maximum 25 characters.

Button Design Settings

Setting	Description
Button style	Solid, Outline, or Text.
Font Color	Select the color to apply to the heading text.
Font Size	Adjust the heading font size between 8 px and 50 px.
Font Weight	Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.
Background Color	Custom color
Border Color	Custom color
Border Width	1 px to 10 px
Corner Radius	0 px to 50 px

​

Product - Text

Show the description of the product. Hover over Text to perform these actions:

• Delete
• Drag

Text Content Settings

Setting	Description
Show product metafield	Show or hide the product metafield on the product card.
Text	Add a product metafield using the database icon. You can remove a selected metafield using × or Backspace.

Text Design Settings

Option	Description
Font Color	Select the color to apply to the heading text.
Font Size	Adjust the heading font size between 8 px and 50 px.
Font Weight	Choose the font thickness. Available options are Light, Regular, Semi Bold, and Bold.