Click here to view our example store
Yes! That’s right, we are going to learn how to create an fully functional FAQ page for any Shopify theme. Unlike other blogs, where they will just tell you to install an app which could slow down your store or cost $$$ per month to use. We’ll go through a step by step tutorial on how to code your FAQ page to your Shopify store.
Let’s get down to business.
Create a New Template Page
Go to the Shopify theme code editor. Head over to the Templates folder and click Add a new template. With the new Shopify 2.0 release you may get a popup with some confusing options. From the first drop down find the page option. Then click the liquid option out of the 2 radio options, then lastly name the file name faq and click the create template button. Below is a screen shot of the options.

After creating the page above, open the template you just created and look for the {{ page.content }} line and replace it with the below code. Or if the template is empty then just place the below code
{% section 'faq.liquid' %}
Create a New Section Liquid
Now, head over to the Sections folder and click Add a new section, and name the section faq and click add. You will now have a bare bone section liquid file with minimal code. Delete all the default code and add the below code to that liquid file.
<div class="faq_page">
{% for block in section.blocks %}
{% case block.type %}
{% when 'faqheader' %}
<h3 class="faq_page_subheader">{{ block.settings.faqheader }}</h3>
{% when 'faq' %}
<details>
<summary>{{ block.settings.faq_title }}</summary>
<p>{{ block.settings.faq_content }}</p>
</details>
{% endcase %}
{% endfor %}
<!--- Coded by jotting.com --->
</div>
{% schema %}
{
"name": "FAQ",
"blocks": [
{
"type": "faqheader",
"name": "FAQ Split Header",
"settings": [
{
"type":"text",
"id": "faqheader",
"label": "FAQ Header Splitter"
}
]
},
{
"type": "faq",
"name": "FAQ QnA",
"settings": [
{
"type":"text",
"id": "faq_title",
"label": "FAQ Title"
},
{
"type":"richtext",
"id": "faq_content",
"label": "FAQ Content"
}
]
}
]
}
{% endschema %}
Add Code in Theme.css
Great, now we are almost there! the final step is to add CSS to make the FAQ page look pretty. Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Dawn theme, so in this case the CSS/SCSS file is named base.css. Scroll to the very bottom and paste the below code.
.faq_page {
width: 100%;
margin: auto;
}
.faq_page_subheader {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
letter-spacing: 0;
text-transform: inherit;
font-size: 24px;
}
.faq_page details {
padding-top: 20px;
}
.faq_page details p {
padding-left: 20px;
}
.faq_page summary {
padding: 25px;
background: #fff; /*= Change this to change the background color of your FAQ element =*/
border-radius: 16px;
outline: none;
position: relative;
border: 2px solid #000; /*= Change this to change the border color & thickness of your FAQ element =*/
}
.faq_page details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
.faq_page details[open] ~ * {
animation: inherit;
}
.faq_page summary::after {
content: ' ❮';
transform: translateY(-50%) rotate(90deg);
position: absolute;
right: 5%;
color: #000; /*= Change this to change the color of your arrow of the FAQ element =*/
top: 50%;
}
.faq_page details[open] summary:after {
content: " ❯";
}
@keyframes sweep {
0% {opacity: 0; margin-left: -10px}
100% {opacity: 1; margin-left: 0px}
}
@media only screen and (max-width: 767px) {
.faq_ready_subheader {
width: 100%;
text-align: center;
font-size: 20px;
}
summary {
padding: 10px 25px;
}
summary::after {
right: 4%;
}
}
Create The FAQ in the Customizer
You’re done! That takes care of all the coding. Now it’s time to implement the page. You first need to go back to your Shopify CMS platform. Under Online Store click page. Click the Add Page button, name the newly created page FAQ and in the template section make sure you choose the FAQ option. This is the template you created in your theme editor code.

Now you have the page created, it’s time to customize your FAQ page. Head over to your theme customizer. Navigate to the FAQ page using the drop down at the top of the theme customizer. It’s time to add the elements! On the left hand side you will see the FAQ option, click it and you will be asked to choose 2 options. An FAQ header, which will split your FAQ in order to create groups, and the FAQ question and answer.

As you can see by the above picture, we have already created some elements. Create our elements and viola, you now have a FREE working FAQ page, ready to answer all your customers frequently asked questions!
8 Replies to How to Add a FAQ Page on Shopify
“After creating the page above, open the template you just created and look for the {{ page.content }} line and replace it with the below code.”
{{ page.content }} doesn’t exist in the base template – where should I add {% section ‘faq.liquid’ %}
Hi Yoga, if it’s empty just paste the code {% section ‘faq.liquid’ %}
If it isn’t can you screenshot what’s there. I can’t know unless you let me know what theme you are using aswell.
Hey Bluish,
Is there any way you could add padding around the QNA?
Nevermind, figured it out. Just changed the page width%.
Hey, your help is awesome. I have further question:
How can I do this FAQ on another site then on the faq site? I would love to have this as well on my HOME site and on my product pages.
Thank you.
Hi Larissa,
Just in the middle of a new branding, unfortunately taking slower than expected. I will revamp the FAQ page so that its 2.0 compatible. I.E you can put it anywhere.
Thanks for sharing this! Is there a way to add paragraph text at the top of the page? I’d like to include a page title and a paragraph of text before launching into the FAQs.
Thanks!
Hi Rachel,
Right after the first div, add a h1 tag and put {{ page.title }}. That should show the title of the created page first and foremost.
How to Create a Product Image Slider on Dawn Theme
How to Create a Featured Product Slider on Shopfiy
How To Create A Sticky Add To Cart On Shopify
How to Create a Color Swatches on Dawn Theme
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent