How to create FAQ page for Shopify store ?

The FAQ page is one of the most vital sections for business websites. If you still don’t know what a FAQ page is, the importance of a FAQ page and how to create one for your online store, this is the right place for you to come. 

What is a FAQ page?

FAQ stands for Frequently Asked Questions so a FAQ page contains all questions people often ask about a product or service. 

The FAQ page can be regarded as an automated customer support or a simplified product manual. Customers can easily figure out answers to products or services-related questions by themselves.

The importance of a FAQ page 

A lot of businesses get asked the same questions over and over again from potential consumers. Their concerns can be about the payment method, shipping method, plan upgrade etc. 

Consequently, the support team spends most of the time answering the same questions while it can be effectively solved by placing a FAQs section on the website. This helps reduce not only support time but also human resources for this kind of task.

An effective FAQ page should meet the following requirements:

• Common questions included: Just as the name suggests, a FAQ page is a set of simple questions and replies. Gather all questions your support team often gets asked about and include them in the FAQs.
• Keep It Short: Write short and precise questions and replies to make it easier for customers to read.
• Categorize: Use categories to organize questions and replies related to specific topics
• Add Links: You can also link FAQ answers to your knowledge base articles to offer additional details and even boost your page SEO.

FAQ pages can be customized depending on your business, while still offering valuable information which helps build trust with your website visitors.

How to create FAQ page for your store ?

Solution 1: Using code

Click here to see the demo first. Password: glaold

Step 1: Create a faq.liquid section

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Sections directory, click Add a new section.

4. Name the new section faq and click Create section.

5. Paste the following code into your newly created faq file:

<div class="faq-list">
  {% for block in section.blocks %}
  {% if block.type == 'faq' %}
  <div class="accordion {{ block.id }}">
    <input id="toggle-{{ block.id }}" type="checkbox">
    <label for="toggle-{{ block.id }}">
      <h3>{{ block.settings.faq_question}}</h3>
    </label>
    <div class="response">
      {{ block.settings.faq_answer }}
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>

<style>
  .faq-list input[type="checkbox"] {
    display: none;
  }

  .faq-list label {
    padding: 12px 0 0;
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
  }

  .faq-list label:after {
    content: '\002B';
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .faq-list label h3 {
    margin: 0 0 12px 0 !important;
    padding: 0 20px 0 0 !important;
  }

  .faq-list label .toggle-icon svg {
    width: 12px;
    display: block;
  }

  .faq-list .response {
    padding: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 100ms ease-in-out;
  }

  .faq-list input[type="checkbox"]:checked~.response {
    padding: 12px 0 12px 0;
    max-height: 900px;
  }

  .faq-list input[type="checkbox"]:checked~label:after {
    content: '\2212';
  }
</style>

{% schema %}
  {
    "name": "FAQ Page",
    "settings": [],
    "blocks": [
      {
        "type": "faq",
        "name": "FAQ Block",
        "settings": [
          {
            "type": "text",
            "id": "faq_question",
            "label": "FAQ Question"
          },
          {
            "type": "textarea",
            "id": "faq_answer",
            "label": "FAQ Answer (HTML allowed)"
          }
        ]
      }
    ]
  }
{% endschema %}

6. Click Save

Step 2: Create page template

1. In the Templates folder, click Add a new template.

2. In the modal that appears, set following info

• Create a new template for: page
• Template type: liquid
• File name: faq

3. In the Templates folder, open the page.liquid file, then copy all code on this file.

4. Paste the code the page.liquid into your newly created page.faq.liquid file. Right below {{ page.content }}, paste this code:

{% section 'faq' %}

5. Click Save

Step 4: Create new page

1. Go to Online Store > Pages.

2. Click Add page.

3. Enter a title and content for the page (Optional). FAQ will be added in the next step.

4. Set Template suffix tofaq

5. Click Save

Step 5: Add FAQ

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Within the Shopify theme editor, navigate to your page

4. On the left of the page, add one block for every FAQ you would like on your page

5. Click Save

Solution 2: Using apps

Creating a FAQ page is extremely easy, especially when you are selling on Shopify. All you need is an app to set it up. Below are the top 5 apps for creating a FAQ page.

Floatify: Floating Help Center

This is a Shopify app that helps to create a knowledge base or collection of answers to frequently asked questions, guidelines and troubleshooting instructions.

This app allows you to integrate a FAQ directly into your service or page with a box near the bottom of the page. This way, people can easily find answers to their questions without navigating to another page just for an answer and may even forget to make a purchase. 

Floatify also requires no coding and can be easily customized with millions of colors to choose from, so you can find the color matching your site’s look and feel. Featuring a responsive design, the help center box can work and look great on both desktop and mobile devices. 

Beyond that, this app allows users to sub-questions up to N levels. This means you can add infinite sub questions or sub-categories under a question or category. According to its recent users, the support team is also quick and helpful, which is surely a plus. 

Floatify costs only 5.99/month for access to all features. You can have 3 days for trial before purchasing this app.

HelpCenter | FAQ HelpDesk Tabs

If you want a FAQ page to be created automatically then give  FAQ HelpDesk a try. The FAQs can be created, updated and edited from your Shopify admin. This app also offers several layouts so you can choose the one which best fits your store theme.

You can further personalize the look of your FAQ page with functions like changing colors, changing backgrounds, updating fonts and anything else.

FAQ Help Desk is free with basic features. For further customization features, you can upgrade to paid plans which range from $9.99/month to $29.95/month.

FAQ by POWr

The FAQ page will be set up with an accordion layout which users can click to expand or collapse categories. There are also many options for customizing your FAQ page such as icons for questions, interactive hover effects, and colors of your choice.

FAQ pages built with this app are mobile-responsive and can include links, text, images, and videos. Users can quickly get the answer with the search functionality provided, and the most frequently asked questions can be left open to gather more answers. 

This app also enables upvoting or downvoting on answers, which makes your answers more truthful to customers and this app also requires no coding.

FAQ by POWr is free for up to 5 queries, and paid plans are from $4.49/month to $49.99/month.

FAQ & Accordion

This application helps generate a set of the most asked questions with answers on your business site. An informative app with uncomplicated navigation lets you provide as many details about your offers as possible, focusing customer’ attention on your strong points and combat any doubts and distrust.

With two predefined layouts and diverse paintable elements, you can shape your FAQ page with a sameless look on your website to engage more visitors. You can create a list layout showing answers below the questions, or use accordion layouts which will reveal the answer on click.

FAQ Accordion is free with 1 FAQ only, paid plans cost from $4.99/month to $9.99/month depending on features included.

Reamaze Live Chat & Helpdesk

Not only for FAQs, but Reamaze Live Chat & Help Desk also offers all-around customer support apps. It centralizes customer support from live chat and other types of social media and syncs up with customer profiles in Shopify to offer personalized support.

When it comes to your FAQ page, the content is a resource not only for shoppers but also for your support team — human or not. Chatbots will automatically reply to questions with the appropriate answer, and associates can use it as a reference library. Embed FAQs anywhere on your site for a seamless customer experience.

Re:amaze Live Chat & Helpdesk starts at $29/month, with $49 and $69 monthly plans also available.

FAQ page examples

Roody Originals

Roody Originals offers unique products: customized ugly sweaters, knit beanies or swag boxes. You can feel the creativity all over their site as the brand has room to get creative with their brand voice. This is also incorporated on the FAQ page, and questions are kept related to their product and audience and carefully considered before being put here. 

Shwood

This FAQ page is more lively with a cover image. Questions are divided into 4 categories. 

The design is unique and fitting with the website style. If you click on specific questions, you can see longer explanations below. 

Press

Press is an aesthetically pleasing brand with healthy products like juices& smoothies, meals plans, etc and its FAQ page is no exception. It is set up with a clean design, simple color palette, and easy-to-read font which gives the products a feeling of clean and clear. They offer a list of brief and complete answers, and even include links for that further information.

Colorado Crafted Box

Colorado Crafted Box just keeps things simple. Questions are placed in a list form with brief answers so as not to overwhelm customers with too much information. 

They also have a bit of fun with it: “Hey, I just placed my order and I forgot to include a gift note. Is it too late?” It’s a legit question, but written in a conversational and playful tone.

Manscaped

The last ecommerce store is Manscaped which specializes in basic essentials for men like skincare applications, trimmers, fingernail clippers, and even underwear.

The FAQ page is set up with an accordion layout, the answer will appear when you click on the question, and even includes links for that seamless user experience.:

Conclusion

If you want to leverage the FAQ page, you need to make it discoverable during the customer journey: from the moment a potential customer is considering making a purchase to when an existing customer is about to reach out to you.

You may see most FAQ pages at the bottom of a website’s footer or at the top of the website’s header. However, it is better off incorporated into your site as a  part of your Support or Contact Us page. It’s also important to update the FAQ page usually as new user concerns come up or as new opportunities arise.

There are lots of potential apps for creating a FAQ page on your Shopify store, which one you choose will depend on your needs.