You know that your website is the digital representative for your brand. And you definitely don’t want visitors (and potential customers!) feeling ignored, confused or unsure. They probably have questions about your products or services and want answers before they buy or book.

Including a section with frequently asked questions (and answers) is a great way to make it easy for visitors to get the information they want without having to search for it or contact you. It also shows that you can anticipate their needs and helps them feel confident about buying from or working with you.

And an accordion-style or drop-down FAQ section is a clean, simple way to provide information. I’ll show you how to make one step-by-step In this post and video tutorial. If you’re more of a reader, just scroll down for the written instructions!

So let’s get started.

How to Make a Question Canvas for Your FAQs in Showit

We need to have a canvas for each of our questions and a canvas for each of our answers, and we’re going to start with the question.

1. Create a new blank canvas with a height of about 100 pixels. Rename this canvas Question 1.
2. Add a text box and write/paste your first question here.
3. (Optional) Add a long rectangle behind the text, with the bottom side right on the edge of the canvas. You might want to make the colour the same as your canvas background (or transparent) with a soft border.
4. Choose to add an icon – usually a “+” or “>” – and change the colour to suit your brand
5. Once all of these elements are aligned and formatted the way you want (including on mobile!), add a canvas view. Drag only the icon into the view.
6. Now duplicate that canvas view. Go into view 2 and select the icon. If you’ve chosen a +, change it to a “-”. If you’ve chosen an arrow, go into the size and position tab and rotate it 90 degrees (so it’s pointing down).

Great! We’ll come back to these icons in just a minute. But first, let’s create our answer canvas. 

How to Make an Answer Canvas for Your FAQs in Showit

1. Add a blank canvas to your page (again, around 100 pixels tall, depending on your font size and the length of your answer!). Rename this canvas Answer 1.

Important: Under the canvas tab in the right side menu, scroll down a bit and check the box “Hidden to start”. Make sure you do this for both the desktop and mobile versions.

2. Add a text box and write/paste the answer to your first question here.
3. (Optional) Add a rectangle behind your text. This is usually a different colour than the rectangle you used for the question to make the answer stand out a little bit more. Make sure the top side of the rectangle extends a few pixels beyond the upper edge of the canvas. This helps to make a visual connection between the answer and question.

Perfect! Now we’ve got the basics, let’s make the magic happen.

How to Make Your FAQ Accordion Work

When you’ve got everything formatted and aligned, go back to the answer canvas. In view 1, select the icon and go into the Click Actions tab in the right side menu. Under Link, choose Add. And the from the drop-down menu, select:

• Type -> “Canvas”
• Canvas -> “This Canvas” 
• Canvas View -> “View 2”

That means when someone clicks on the icon, it will shift to View 2, your alternate icon.

I also recommend unchecking all three of the boxes (“Scroll to Canvas”, “Reverse Transition Direction” and “Submit Contact Form”).

Now under Actions, choose Add. And the from the drop-down menu, select:

• Type will be “Show Canvas”
• Under Canvas, choose “Answer 1”

This means when someone clicks the icon, it won’t just shift to view 2, but it will also reveal the answer!

Great! Now go into view 2 and select the icon. Go into the Click Actions tab in the right side menu. Under Link, choose Add. And the from the drop-down menu, select:

• Type will be “Canvas”
• Canvas will be “This Canvas” 
• Canvas View will be “View 1”

That means when someone clicks on the icon, it will shift back to View 1, your primary icon.

I recommend unchecking all three of the boxes (“Scroll to Canvas”, “Reverse Transition Direction” and “Submit Contact Form”) here, too.

Now under Actions, choose Add. And the from the drop-down menu, select:

• Type will be “Hide Canvas”
• Under Canvas, choose “Answer 1”

This way your website visitor can “hide” the answer to their question when they’ve finished reading.

Now go ahead and test your first FAQ on both mobile and desktop!

Duplicating your FAQs in Showit

When everything is working and is perfectly aligned and formatted, you can use these question and answer canvases as templates for the rest of your FAQs. Here’s what you need to do…

1. Duplicate the canvas Question 1 -> Rename it to Question 2
2. Duplicate the canvas Answer 1 -> Rename it to Answer 2

3. Drag both canvas into the proper order on your page (so you have Question 1, Answer 1, Question 2, Answer 2).

4. Now go into the Question 2 canvas, View 1. Select the icon and under the Click Actions, change the Action to show the canvas Answer 2.

5. Then go into View 2 and select the icon. Under Click Actions, change the Action to hide the canvas Answer 2.

Repeat these 5 steps for each additional question and answer you have (change the canvas names appropriately, of course!). The most common mistake people make is to forget to change the click action to reveal the right answer!

It can be a little time consuming to create all these canvases, but it’s worth it in the end! It shows visitors to your website you’re there to help and gets them the information they need to buy from or book in with you. 

But if you just haven’t got the time or patience to do this yourself, never fear! I have a FREE FAQ template that even comes with a free video tutorial! You can get your copy here.

And if you have any questions, just pop them into the comment section and I’ll get back to ASAP.

Thanks for reading and happy designing!

Michele xo