Putting the quiz on your store

#Before you start

Shoppers see a quiz when it’s published and a Teacup Quiz block on your live theme shows it. Publishing alone doesn’t place it anywhere.

Open Put it on your store from the quiz’s status area in the editor. It also opens by itself after a quiz’s first publish. On Home, the setup guide’s Put it on your store step has two shortcuts: Add to home page and Add a popup.

The dialog says “Pick a place. Your theme editor opens with the quiz already added: move it where you like, then click Save.” Each option opens your theme editor in a new tab with the block already added. Nothing changes on your store until you click Save there.

#The four ways

#The Teacup Quiz block

The whole quiz, as a block in a section. It centers itself and never grows wider than a comfortable reading width.

If your quiz shows its results on a page of your store, that page needs this block too, showing the same quiz: see Results.

#The Teacup Quiz button block

A button that opens the quiz in a popup. Add to product pages puts it in your product page’s main section; you can also add it to any other section that takes app blocks, like a banner.

#The Teacup Quiz popup

The popup is an app embed: you switch it on once for the whole theme, under App embeds in the theme editor, and it’s on every page from then on.

• “Once per visitor” means once per browser, for all your quizzes together. It opens only after the shopper has spent that long on one page, and not while another popup is open.
• Browsers that block site storage never get the automatic open.
• The popup’s window is white unless the quiz has a background color of its own (Noir stays dark).

#Showing a quiz that isn’t your main quiz

Every block shows your main quiz unless you give it a Quiz ID. For any other quiz, Put it on your store says This isn’t your main quiz. After adding it, click it in the theme editor and paste this into Quiz ID: followed by the ID and Copy ID.

1. In the quiz’s Put it on your store, click Copy ID (you see Quiz ID copied).
2. In the theme editor, click the block to open its settings.
3. Paste the ID into Quiz ID, then click Save.

The ID is also in the Welcome step, under Quiz name. It’s made from the quiz’s first name, like gift-finder, and never changes, even if you rename the quiz. Capitals don’t matter.

Prefer one quiz everywhere? Click Make main quiz next to Or make it your main quiz, and no ID is needed.

#Quiz links: #teacup

A link ending in #teacup opens a quiz in a popup on the page the shopper is on, without leaving it.

Any link or menu item gives you the right one for the quiz: /#teacup for your main quiz, /#teacup- plus the ID for others. Paste it into a menu item, a button or a banner link.

• It works on pages where the popup, or a Teacup Quiz button for that quiz, is on. With the popup on, that’s every page.
• On a page with neither, the link goes to your home page, and the quiz opens there if the home page has the popup or a button for it.
• A full address like https://yourstore.com/#teacup opens the quiz as soon as the page loads, so you can use it in emails and ads.
• A quiz in a section doesn’t open from these links. Link to its page instead, optionally with an answer already picked: see Links that start with an answer.

#Finding the blocks in the theme editor

Every Teacup Quiz block is under Apps when you add a section or a block: Teacup Quiz (the whole quiz) and Teacup Quiz button. Teacup Quiz popup is under App embeds. Remember to click Save.

In the theme editor, a block with nothing to show says why, for example Teacup Quiz: publish a quiz in the Teacup Quiz app to show it here. Shoppers never see these notes. See When the quiz doesn’t show.

If you can’t add the block to a section, your theme may not support app blocks there. The popup and #teacup links still work.

#How Teacup Quiz knows it’s placed

Until shoppers start taking your quizzes, the setup guide on Home checks your live theme each time you come back to the Teacup Quiz tab. It looks for a Teacup Quiz or Teacup Quiz button block in your theme’s templates, header and footer, and for the popup being switched on.

Its Try it like a shopper step then lists what it found, like “On your store: Home page, Product pages, Popup.” The Put it on your store step is done once a block is found, or once shoppers have started a quiz.