Home » How to create an FAQ page on Shopify?

How to create an FAQ page on Shopify?

  • by
How to create an FAQ page on Shopify?

FAQs or Frequently Asked Questions are very popular on websites and even more on e-commerce stores like Shopify to help customer service. When an FAQ is regularly updated, it provides answers to recurring customer questions about the products and services offered by the company.

An FAQ reduces the number of queries customers send to a Shopify store’s customer service since most of the questions they have are answered in the store’s FAQ.

In addition to your customers, your company’s employees can also use the frequently asked questions set up on your site when they need to know how certain things work.

On Shopify, you have two different methods to create an FAQ.

You can manually create a page dedicated to frequently asked questions with a template that you have created, or you can install an application that will take care of creating the FAQ system for you.

We’ll cover both methods in this article starting with creating an FAQ by hand and ending with the automated solutions with apps.

Create an FAQ with code on Shopify

Creating a Shopify FAQ requires a few additions to your store’s theme files.

See also
How to create a contact pro email with shopify?

Before you can create a Shopify page where your FAQ will appear, you will have to create a new section containing the structure (in code) of your FAQ and then add this same section in a template.

It is this template that will allow you to create an FAQ simply by adding a new page to your Shopify store.

Edit theme code

To get started, log in to your Shopify store admin panel and go to the theme’s code edit where you want to add your FAQ.

To access the code edition of a theme, you must go to your “Online store” then to the “Themes” section (1).

In this section you will find your used theme and the theme library of your store.

Click on the “Actions” button (2) to the right of the topic to which you want to add the FAQ and then click on the “Edit code” option (3).

Edit theme code Shopify

In the theme’s file management interface, find the “Sections” file category and click on “Add a new section” (1) to add a file to the theme.

In the field “Create a new section called” name this section “faq” (2) then click on the button “Create a section” (3) to validate the creation.

Edit theme code Shopify

Replace the existing code with the code given below:

<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: '
<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": "Page FAQ",
"settings": [],
"blocks": [
{
"type": "faq",
"name": "Bloc FAQ",
"settings": [
{
"type": "text",
"id": "faq_question",
"label": "Question FAQ"
},
{
"type": "textarea",
"id": "faq_answer",
"label": "Réponse FAQ (HTML autorisé)"
}
]
}
]
}
{% endschema %}
2B'; 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: '12'; } </style> {% schema %} { "name": "Page FAQ", "settings": [], "blocks": [ { "type": "faq", "name": "Bloc FAQ", "settings": [ { "type": "text", "id": "faq_question", "label": "Question FAQ" }, { "type": "textarea", "id": "faq_answer", "label": "Réponse FAQ (HTML autorisé)" } ] } ] } {% endschema %}

CSSCopy

See also
E-commerce store: What alternatives to create a store?

Save the “faq.liquid” file you just created and edited before moving on.

Once the new “faq” section has been created, you can search for the “template” category in the theme files and click on “Add a new template” (1) to add a second file to the theme.

In the interface for creating the file model or “template”, select the “page” content type from the list under the label “Create a new model for” (2).

Then choose the type of model ”  liquid  ” (3) then finally fill in the name “faq” to the file (4) before clicking on “Create a model” (5) to complete the creation of the model.

Edit theme code Shopify

Then, add under the line of code “{{ page.content }}”, the following code:

{% section 'faq' %}

Then click on the “Save” button to save the modified file.

Add and configure the FAQ

Now that you have added the section and the template needed to create an FAQ, you will be able to add a page to your Shopify store containing this FAQ.

Go to your store pages under “Online Store” and click on the “add a page” button located at the top right of the Shopify interface.

Name this page “FAQ” (1), or give it the name you want for your Frequently Asked Questions, and in the theme template select the template you just created, namely “faq” (2).

Add and configure the FAQ Shopify

Save the “FAQ” page after following these instructions and go back to your store themes.

See also
Cookie Banner: 10 Free Cookie Banner Apps on Shopify

On the theme where you added the FAQ “section” and “template” files, click on the “Customize” button located next to the “Actions” button.

On the theme customization interface, display your FAQ page using the drop-down list at the top of the interface (1).

On the left of the interface, you will find an “FAQ Page” section in which there is an “Add your FAQ Block” button (2), click on it to add a new block that corresponds to a question and an answer from your Frequently Asked Questions Issues.

Manage and select the blocks you display in your FAQ and select an FAQ block (3) to add the question and answer it will contain (4).

Add and configure the FAQ shopify

Add an FAQ using a Shopify app

If you prefer to use an app to create an FAQ rather than creating it manually, that’s fine since there are several great apps out there for that.

Head to your Shopify store’s app library “Apps > Customize your store” and find one of these apps:

Install the application of your choice by clicking on the “Add application” button present on the presentation sheets of each application.

See also
How Shopify works: How does JavaScript work?

Add an FAQ to your Shopify site with HelpCenter

For the example, we will install the “HelpCenter” application which is the most complete application and which includes a graphical interface for creating the FAQ.

Right after authorizing the installation of “HelpCenter” app on your Shopify store, the app will ask you to read and accept their usage policy in order to start using the app.

Once the policies are accepted, you will be redirected to the application dashboard where you will be offered 3 different templates of items to add on your store.

Here, the model that interests us is that of the FAQ, so click on the “Start” button of the block of the FAQ.

Add an FAQ to your Shopify site with HelpCenter

A default FAQ template will then be created to show the example.

HelpCenter’s FAQ creation interface is interactive, you can move the FAQ blocks with a simple drag and drop to rearrange the order of your FAQ’s questions/answers.

There are 3 types of blocks: Category, Section and Article.

In the free version of the application, you will not be able to add more “Category” and “Section” blocks than there are by default, so there is no need to dwell on it.

However, if you choose to take the paid version, these blocks will be useful to you in part to create categories of questions in the same FAQ or even create several types of FAQ on the same page.

See also
Shopify payment: How do I install PayPal on my store?

The last “Article” block is the one that contains the FAQ questions and answers, so it is the most important block of your Frequently Asked Questions.

You can modify the “Article” blocks of the FAQ by clicking on the pencil located to the right of each “Article” block (1).

Depending on your needs, you can activate or deactivate certain elements of the FAQ by clicking on the “Deactivated/Activated” button (2). This can be useful for temporarily removing questions from the FAQ while updating them without having to delete and recreate them later.

Another advantage of the “HelpCenter” application is that it offers FAQ models (template) already created and laid out. You will only have to add the questions and answers, but you will not have to worry about the structure or the appearance of your FAQ.

To use an FAQ template, click on “Choose template” (3) and choose the one that suits you best from the list of templates provided.

For your FAQ to be 100% complete, you will also need to go through the “Settings” (4) tab of “HelpCenter”.

These are the settings of the Frequently Asked Questions where you can configure certain parameters such as the translation of the FAQ, work on the SEO of the Frequently Asked Questions or modify its appearance.

See also
How to configure your Shopify site?

Once your FAQ is finished, you can preview it simply using the “Preview” button (5).

Add an FAQ to your Shopify site with HelpCenter

Find on your site the FAQ created by the “HelpCenter” application at the following address: “maboutique.myshopify.com/apps/help-center” replacing “maboutique.myshopify.com” with the address of your MyShopify store or your domain name.

Conclusion

It is important to add a Frequently Asked Questions to your store.

Thanks to Shopify, this becomes possible quite easily even without using an app with the CMS file management system.

However, if you prefer to use an application, this is quite possible and you will have the choice between multiple free or paid applications.

Creating a well-filled FAQ can significantly reduce the number of emails or calls to your customer service.

Leave a Reply

Your email address will not be published.