top of page
Gift Quiz

Gift Quiz

Help customers find the perfect gift with a quiz and product recommendations.

Intermediate.png

Intermediate

5K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, a visitor provides information about who they want to buy a gift for, and the site makes recommendations based on their answers.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

The Collection We Added: productsKeywords

The productsKeywords collection has the following fields:

  • product: A reference field that points to an item in the Products collection

  • keywords: A list of keywords that relate to the product


Adding the Quiz


We added a multi state box on the Gift Quiz page. Each slide contains a quiz question. The slideshow is set up so that when a question is answered, the next state appears.


Displaying the Recommendations


When the last question is answered, we query the productsKeywords collection for all the products with keywords that match the answers.

 

The last state in the multi state box then displays a random selection of the query results in a repeater. Each repeated item has elements that display the image, name, and price of the recommended gifts.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Stores collections appear in the Database.

  3. Learn how to work with examples in Velo.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Print on Demand

Print on Demand

Change the color, add text or upload images to personalize products.

Intermediate.png

Advanced

Upsell Products

Upsell Products

Promote products based on items in your cart

Intermediate.png

Intermediate

Product Configurator

Product Configurator

Let customers create one-of-a-kind products.

Intermediate.png

Advanced

Anchor 2
bottom of page