How Superhero Design uses an Interact Quiz for selling website templates 

This quiz is for anyone with a Showit site (or any website for that matter) that needs an easy quiz solution to capture leads or make more sales.

Since the beginning of my existence as a web designer, one of the questions I get a lot is “What’s the best quiz for my business?” Of course everyone wants to know what’s the best option, you’d be a little off to ask for anything other than that. 

But I didn’t have a great answer. The most common solution was to send people live examples of what other companies were doing, which was great, but then the immediate question was – sooo how do I build a quiz like that?

That one stumped me for many years, until I had time to build up a portfolio of quiz templates that anyone can use to create their own quiz. 

What I did was to create a quiz to help people find the right template so they can not only answer the question of “Which Quiz is Best for My Business?” but also solve the problem of building the quiz because once you find a template you can copy it right into your interact account (or start a trial to use the template). 

I now use the quiz as a primary drive for new lead generation and customer acquisition. 

Here’s what it looks like. 


How to Embed Your Quiz into Showit

Step 1: Login to Showit and open the site you want to embed your quiz onto.

Step 2: Click on the area of the page you want to embed the quiz. Then click the

middle icon at the bottom of the page and select “Embed Code” from the dropdown list. This is where your quiz will appear; resize and/or move the frame as desired.

Step 3: Open your interact dashboard and click “Share & Embed” on your quiz you want to add to the Showit landing page.

Step 4: Click on “Embed Code” on the left sidebar, and click the “Javascript” tab.

Step 5: Toggle on the buttons for “Auto resize embed to fit quiz content” and “Use custom embed size” then change the width of the dimensions to 1,500.

Step 6: Click “Copy Code” then go back to Showit and double click in the embed code frame you just created.

Step 7: Paste the embed code into the Showit embed box. The embed code starts with <div. Immediately after that add align=”center” so it appears: <div align=”center” to center the quiz on all devices regardless of screen size.

Step 8: Click “Save.”

Preview your quiz on mobile and desktop to make sure everything functions as desired.

Here are some examples of what YOUR QUIZ might look like…

Example: When someone takes the quiz we ask them about where they are at in the quiz journey as well as what industry they are in and what tools they use for email marketing and website so we can help them build their quiz. 

To help point people in the right direction we ask them about what industry they’re in so we can surface templates that will be most helpful to them. 

Example: At the end of the quiz we have an opt-in form if anyone would like quiz tips via email. This form converts at 15% which is amazing for the software industry (the overall average is 40.8% but software is a different world since it’s B2B)

Example: After someone opts in or skips we show them their recommended quiz templates, we choose three for each result and then have a button to check out all templates in a category of nothing matches what they’re looking for. 

Example: If the quiz taker likes any of the templates we recommend, they can click the “Use this template” link and go check it out on a new page which looks like this. 

If they like that template after previewing it, they can click “Use this template” which will prompt them to start a free trial and copy the template into their account (for existing customers it just copies straight into their account). 

Then the quiz loads into your account and you can edit, connect to your email list, and publish. This takes the quiz building process from several weeks at best down to an hour or two, and answers the biggest question our customers have because we’re showing you the best quiz for your business. 

Results: How the quiz is performing

Example: We’ve only been running this quiz for one week, it has collected 75 leads and led directly to 8 paid signups. It’s only just in test mode and soon we’ll send a lot more traffic through it. (The reason there are so many views is that we have it as a popup on our blog, which gets a lot of views but most people aren’t the right fit which is totally fine).


Example: Sitting here writing this I’m blown away by how well the quiz works. We’ve effectively created the highest-performing lead magnet interact has ever had by a factor of 2x, and it actually leads to paid signups directly, not to mention the people who are opting in and may buy down the road. 

I can now truly empathize with all of the customers I’ve spoken with over the years who have put off making a quiz, we created the first commercially available quiz builder and it took us 10 years to actually put our own quiz in place. 

Hopefully now with this quiz in place, plus all the ready-to-use templates you won’t have to wait ten years and can have a quiz up and running in 10 minutes instead! 

Curious to try out our quiz recommender quiz? Check it out at

Comments +

Leave a Reply

Your email address will not be published. Required fields are marked *

read the recent posts

Are you ready to sell your products with Showit, but not quite sure which Ecommerce platform connects? I’m Melissa of superhero design and I hope ambitious women build bold Brands online – let’s get started! 

The easiest and most inexpensive way to sell products on your website is going to be with Shopify. Now when you go to their plans, you don’t want the basic plan, you just scroll down and the plan that you want is only $5 a month and it’s called the starter plan.

So go ahead and sign up for that starter plan and create some products in your shop. I’m going to jump ahead like you’ve already done that. Click on apps and sales channel settings and the thing that you want to add is called the buy button. Go to Shopify App Store to search for the “buy button”, to click on it click on ADD sales Channel.

Great so now that it’s added you’re going to click on create a buy button. 

Click on “add product buy button” and go ahead and choose one of your products. Again make sure that you have some products set up already and Shopify.

On the left hand side you will see a menu – this is where you customize your buy button styles & layouts. Once you have this customized the way you want, click next. You will see a snippet of code in a box.  Copy the code and then paste it into a blank embed box in your showit website template page. You can find the blank embed box on the bottom of your editor. It is the middle rectangle – click “embed code” double click on the box  and paste in the code that you just copied.

So now you have your product inside of your showit website template. You can resize it the way that you want to be on the page and just make sure you have enough space in the box and then also make sure that you do your mobile as well.

 Once this is all size the way that you want, click publish and you now have a shop & checkout live your Showit website template. Be sure to watch the video to follow along with this tutorial as well.

Showit and Squarespace are both popular website builders, but they have different strengths and features.

Here are some reasons why Showit is considered better than Squarespace for photographers:

  • Drag-and-Drop Flexibility: Showit provides a powerful drag-and-drop interface that allows photographers to create highly customized websites without any coding knowledge. You have complete control over the layout, design, and placement of elements, giving you the freedom to create a unique website that truly reflects your style and brand.
  • WordPress Integration: Showit integrates seamlessly with WordPress, which means you can leverage the powerful blogging capabilities of WordPress while still benefiting from Showit’s design flexibility. This combination allows photographers to have a visually stunning website with a robust blogging platform.
  • Design Freedom: Showit offers complete design freedom, allowing you to create a website that matches your artistic vision perfectly. You can create unique page designs, galleries, and portfolios that truly showcase your photography in a visually stunning way. Squarespace, on the other hand, has predefined templates with limited customization options.
  • Mobile Responsiveness: Showit excels in mobile responsiveness, ensuring that your website looks great on all devices, including smartphones and tablets. With Showit, you have complete control over the mobile version of your website, allowing you to create a tailored and optimized experience for mobile users.
  • Collaborative Workflow: Showit provides a collaborative workflow, allowing photographers to work with designers or teams easily. You can grant access to specific sections of your website and collaborate on design changes without sharing your entire account credentials.
  • SEO-Friendly: Showit allows you to optimize your website for search engines. You can customize page titles, meta descriptions, URLs, alt tags, and more to improve your website’s visibility and search engine rankings. Squarespace also offers basic SEO features, but Showit provides more flexibility in optimizing your website for better search engine performance.

It’s important to note that both Showit and Squarespace have their own merits, and the choice ultimately depends on your specific needs and preferences.

Consider trying out demos or free trials of both platforms to determine which one aligns better with your goals as a photographer.

So you’ve purchased a Showit website template – yay!  How in the world do you get it into your Showit account and start editing that website? 

Well don’t worry because I’m going to show you exactly how to do that in this tutorial!

If you are more of a “video person” like me, then just watch this video below. In fact you can find all of my tutorial videos here on my Youtube channel.

 My name is Melissa of Superhero Design and I help ambitious women launch bold brands online. Well let’s get to it! 

After you’ve purchased your Showit website template, you will most likely be provided with PDF or a document containing your site key.

This is what my PDF looks like that has my free Showit website template as a reference. If you would like a free Showit website template, please head over to this link.  

Follow these simple steps in order to add your purchased template to your Showit account and start editing your Showit website:

  • Go to your Showit account and make sure you are logged
  • Click on your name on the bottom left 
  • Click on create a new design 
  • Click on your designs tab 
  • Add design to library 
  • Paste in the key that you’ve been provided and click on enter 
  • Okay so it gives you a preview of the website 
  • Click on Add Now
  • Cick Close

Again this is my free website template that I offer so here’s a preview it’s successfully added so you click on clothes and then 

  • Select the image thumbnail of your Showit website template under the “your designs” tab
  • Click on start with this design 

So now you have created a website using your showit website template and that’s it!




I've created a beautiful free website template that is designed to convert. This is perfect for anyone wanting to try Showit for free

view demo

Almost there!

Free guide

You can embed an email signup form here by pasting the code for one in a blank "embed" box.