How to Show Quiz Only to Logged-in Customers¶
It’s possible to use the customer metafields to render quiz results onto different elements of your Shopify Theme liquids. This article explains how to show the quiz only to logged-in customers in Shopify.
Warning
This guide is meant for developers and Shopify Partners. If you're not familiar with Shopify liquid, it is advised to ask for help from a professional to implement this. You can find/hire a developer here.
Note
This method works only for Shopify accounts using our RevenueHunt app. Unfortunately, we don't have a solution yet on how to do this in WooCommerce, Magento or BigCommerce.
Step 1: Create a New Page Template¶
- In your
Online Store > Themes
section, head toActions > Edit Code
. - Create a new Page template.
- Template type:
liquid
. - Template name:
quiz
.
- Template type:
Step 2: Add New Page Code¶
Replace your new page.quiz.liquid
code for the following code and adapt the texts to your store:
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div><div class="grid myaccount">
{% if customer %}
<div class="grid__item rh-inline" style="margin: 60px 0 120px;">
<script src="https://admin.revenuehunt.com/embed.js" async></script>
{% if customer.metafields.prq.response_permalink %}
<h2>Your Profile</h2>
<iframe src="{{ customer.metafields.prq.response_permalink }}" style="width:100%; border: none; margin-bottom: 30px; position: absolute; left: 0;" />
{% else %}
<h2>Take our Quiz to determine your skincare routine</h2>
<iframe src="https://admin.revenuehunt.com/public/quiz/dbqHqN" style="width:100%; border: none; margin-bottom: 30px; position: absolute; left: 0;" />
{% endif %}
</div>
{% else %}
<div class="w-100"><h3>You're not logged in.</h3></div>
<div class="w-100"><p>Please <a href="https://skincarequiz.myshopify.com/account/login">log in</a> or <a href="https://skincarequiz.myshopify.com/account/register">sign up</a> to take the quiz.</p></div>
{% endif %}
</div>
</div>
</div>
</div>
Remember to replace the URL sections in the code with the correct URLs to the quiz and your website, respectively.
Step 3: Apply the theme to the page¶
- Go to
Online Store > Pages
and click on theAdd Page
button. -
Add the title, then select the
quiz
Theme template. -
Click on
Save
.
The result should look something like this: https://skincarequiz.myshopify.com/pages/logged-in-quiz.
- If you’re not logged in, you’re prompted to log in or sign up.
- If you’re logged in, you’re either shown the results page (if you already took the quiz) or the quiz’s start page.
By following this article, developers can learn how to show a quiz to logged-in customers only.