Recommenda Quiz Builder Documentation

Welcome to the Recommenda Quiz App documentation! đź‘‹
This guide will help you navigate through the key features of our quiz app. It built to create engaging product recommendation quizzes for your Shopify store. Whether you’re looking to personalize your customers’ shopping experience or increase sales, this app makes it easy for shoppers to find the perfect products.

Let’s Get Started!

Installation Process

  1. Go to the Shopify App Store
    Search for “Recommenda Quiz Builder” or directly visit the Recommenda Quiz Builder app page on the Shopify App Store.
  2. Click “Install”
    On the app page, click the Install button to begin the installation.
  3. Authorize the App
    Shopify will request permission to connect the app to your store. Click Install to authorize it.
  4. Configure the App
    Once installed, follow the in-app setup to create your first product recommendation quiz.

How to Create a Simple Quiz on Shopify

You can create a quiz on Shopify in just 4 easy steps:

  1. Add your questions and answers.
  2. Choose which products to recommend for each answer.
  3. Set your quiz title, styles, and etc.
  4. Copy the Quiz ID, go to the Theme Editor, select the Recommenda Quiz block, and paste the ID.

Creating a Quiz

Once the app is installed, you’ll see a dashboard with a Create Quiz button. Click this button to start building your first product recommendation quiz. This will guide you through the process of customizing your quiz, including adding questions, selecting product recommendations, and adjusting the design to match your store’s branding

Dashboard

The dashboard is divided into four main sections, which you can easily navigate using the tabs located at the top of the page. These sections are:

  1. Setup Your Quiz
  2. Recommend Products
  3. Styles & Settings
  4. Publish

1. Setup Your Quiz

The Quiz Builder section is designed to create and customize quizzes with an interactive interface.

Live Quiz Editor: On the left side of the screen, you’ll see a live version of the quiz where you can directly create and edit questions. This allows for real-time preview and adjustments.
Welcome Page Text: Customize the text on the welcome page of your quiz. This allows you to provide introductory information to users before they start the quiz.
Button Text: Modify the text on the start button of your quiz; the default is “Start”.
Question List: Use the “Question List” button to display all questions on the right side of the screen. This feature allows you to view and manage questions in a structured list format.
Next Question / Add Question: Add a new question by clicking the “Next Question” button or “Add Question” option.

When you click the “Next Question” button, you are taken to a screen where you can configure and customize your new question. The following features are available:

Question Title: Enter the title for your question.
Add Choice Button: Click this button to add answer options.
Question Types: Choose the type of question you want to create

  • Single Choice: Allows users to select one option from a list.
  • Multiple Choice: Allows users to select multiple options from a list.
  • Dropdown: Provides a dropdown menu with choices for users to select from.
  • Yes/No: A simple choice between yes or no.
  • Text: Allows users to enter a text response.
  • Email: Requests users to enter their email address.
  • Phone Number: Requests users to enter their phone number.
  • Name: Allows users to input their name for personalized communication.

Required: Mark the question as mandatory for users to answer.
Randomize Choices: Shuffle the order of choices.
Add “Other” Choice: Include an “Other” option for users to input a custom response.
Align Choices Vertically: Adjust the alignment of the choices to display vertically.
Logic Jump: Set conditions to automatically skip to different questions based on the user’s previous answers.
Apply Point System: Assign different weights to answer choices, affecting the final result based on user selections.
Delete Question: Remove the question from the quiz.

When you click on the “Result Page” button, you are redirected to the result page configuration screen, where you can set up the following options:

Text for Result Page: Enter the text that will be displayed on the result page.
Max Recommended Products Count: Specify the maximum number of recommended products to display on the result page. This helps control how many products are shown to users based on their quiz responses.
Show Only In Stock Products: Check this box if you want to display only products that are currently in stock. This ensures that users receive recommendations for products that are available for purchase.
Show Add to Cart Button: Show the “Add to Cart” button for recommended products.

2. Recommend Products

In this section, you can configure product recommendations based on quiz answers. For each answer choice, you have the option to either include or exclude specific products.

Select Product(s): Choose the products that should be recommended when a user selects this particular answer. These products will appear on the result page if this answer is chosen.
Exclude Product(s): Select products that should not be recommended when this answer is chosen.

3. Styles & Settings

This section consists of two tabs: Settings and Styles, allowing you to configure quiz functionality and appearance.

3.1 Settings Tab

Quiz Title: Enter the title of your quiz. This will be displayed to users at the start of the quiz.
Enable Quiz Retake: Enable or disable the option for users to retake the quiz. This gives users the flexibility to try the quiz again if needed.

3.2 Styles Tab

Themes: Choose the visual style of your quiz interface: Classic or Modern.
Background Color: Set the background color for the quiz interface to match your brand or design preferences.
Question Text Color: Choose the color for the text of your questions.
Choices Text Color: Select the color for the answer choices text.
Button Background Color: Customize the background color of the buttons to align with your overall theme.
Button Border Radius: Adjust the border radius of buttons to control their rounded edges.
Custom CSS: Add your own CSS code to further customize the quiz’s appearance beyond the default styling options.

4. Publish

In the Publish section, you can choose how to display your quiz on your website. There are 4 available options:

4.1 How to Embed Inline Quiz

This option allows you to embed the quiz directly within the content of your page.

  1. Copy the Quiz ID for the quiz you’ve created.
  2. Go to the Theme Editor in your Shopify store.
  3. Click on the Add Block option and select the Recommenda Quiz app block from the available options.
  4. Paste the Quiz ID into the designated field in the left sidebar settings.
  5. You can also adjust the quiz’s width and height in the same settings.


Alternatively, you can copy the provided Quiz iframe code and paste it anywhere in your store(blog posts, pages, etc).
Note: If using the iframe code, be sure to visit the App Embeds settings in your theme’s customization page and enable the Link Quiz option.

4.1 How to Create Popup Quiz

This option enables the quiz to appear as a popup window. The quiz will open in a separate, overlay-style window, providing a more dynamic user experience.

  1. Copy the provided quiz ID.
  2. Go to Sales Channel > Online Store, then click the Customize button.
  3. In the App Embed section, activate Popup Quiz.
  4. Configure the following options:
    Quiz ID: Paste the copied Quiz ID.
    Open Delay in Seconds: Set the time delay before the popup appears.
    Content Width: Adjust the width of the popup content.
  5. Save the changes.

4.3 How to Create Quiz as Separate Page

Create a standalone page for your quiz that opens as a full-screen popup for external uses.

Copy the provided link to display a full-screen popup quiz when visitors navigate to your store. This link can be used for external purposes, such as sharing it on social media, newsletters, etc.

Note: Be sure to visit the App Embeds settings in your theme’s customization page and enable the Link Quiz option.

4.3 How to Create Quiz on Button Click

Create a quiz that opens as a popup when customers click a selected button on your store.

  1. Copy the provided quiz ID.
  2. Go to Online Store > Themes > Customize.
  3. Create a new button or edit an existing one from the left sidebar.
  4. Paste the copied element in the button link input.
  5. Save your changes.

Note: Be sure to visit the App Embeds settings in your theme’s customization page and enable the Link Quiz option.

In the end, don’t forget to save your quiz by clicking the “Save” button to ensure all your changes are applied!

Analytics

In the Analytics section, you can track the performance of your quizzes by selecting the quiz you want to analyze. The following data is displayed:

Started: Track how many users started the quiz for:
Today
Last 7 days
Last 30 days

Top Recommended Product: See which product has been recommended the most based on quiz results, along with how many times that product has been shown.

Results Count: Monitor how many users have completed the quiz and received results for:
Today
Last 7 days
Last 30 days

Views: Check how many times the quiz has been viewed for:
Today
Last 7 days
Last 30 days