Help Center · Building a quiz

Designing the results page

Sections, blocks, a page per result, and each section's style.

Open Results → Editor. Under your results is the list of sections on the results page. Click a section in the list or in the preview to edit it. Use the arrows to reorder, the eye to hide, or delete it. Click Add section for more.

Sections

  • Heading: the results heading and text, plus your discount code.
  • Products: the recommendations, with "Because you said …" reasons (you can turn these off). See Product cards.
  • Text: a small line above the heading, a heading, text and a button.
  • Hero banner: a large image with a heading, text and a button on top.
  • Featured collection: more in-stock products from a collection, leaving out ones already recommended.
  • Image with product: an image next to one product shoppers can add to the cart.
  • Image with text: an image beside a heading, text and a button, on the left or right.
  • Image: a picture, with an optional link.
  • Newsletter: an email sign-up for shoppers who didn't give their email.
  • Articles: the newest posts from one of your blogs (enter the end of its address, like "news").
  • FAQ: a heading, an optional description, and questions shoppers can open for the answer (up to 20).
  • Custom content: up to 2 blocks side by side. See Blocks below.
  • HTML & CSS: your own code. Scripts don't run.
  • Buttons: Retake quiz and Add all to cart, each with its own colour, size and style.

A page for each result

With Automatic + manual results, click a result in the list to see its page.

  • At first, every result shows the shared page. Changing it changes it for every result that shares it.
  • Click Give this result its own page to make a copy just for that result. Change its sections, products, look and text freely. These results are marked Own page.
  • Click Use the shared page instead to go back.

On a result's own page, the Heading section edits that result's heading and text.

Blocks (Custom content)

Put up to 2 blocks side by side on computers (stacked on phones). Each block can be:

  • Text: a heading and text.
  • Image: a picture with an optional link.
  • Video: a YouTube or Vimeo link, or a video file. Add a thumbnail image to show a picture with a play button; the video loads when shoppers press play.
  • Product: one product shoppers can add to the cart.
  • Collection: a few products from a collection.
  • Newsletter: an email sign-up form.

Mix them freely, like an image next to a sign-up form, or a video next to a collection.

Text on images

On a Hero banner, choose where the text sits (9 spots, from top left to bottom right) and the colour of the box behind it, or tick No box behind the text to put it right on the picture. Image with text and Image with product can also show a heading and text on the image. Add an overlay to darken the picture so the text stays readable; above 35% the text turns white.

Newsletter sign-up

Set the small line above the heading, the heading, text, the words in the email box, the button and the thank-you message. Tick Add a consent checkbox (GDPR) so shoppers must agree before signing up, and write its text. Emails go to your connected email apps and Shopify customers, as subscribed.

Section style

Every section has a Content tab and a Style tab:

  • Height on computers and phones: auto, a share of the screen (from a fifth to full), 500, 650 or 800 pixels, your own height in pixels, or Image height (the whole picture shows, with the text on top).
  • Colours: background colour or image, and text colour.
  • Spacing: gutters, side padding, space above and below, and corner roundness.
  • Width (full, medium or narrow), text alignment and heading size.
  • Show on computers and phones, or only one of them.
  • Animation as the section appears: fade, slide up or zoom in.

Tick Use for all sections to give several sections one shared style. Changing it in one changes all of them.

Still stuck? Email support@quizpep.com and we'll help.