Questions
Shopify

How to Add a FAQ Page on Shopify

Need to know how to create a FAQ page on the Shopify store? Follow our step by step guide to implement it!

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.

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.

create a FAQ page for 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. Or if the template is empty then just place the below code

{% section 'faq.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 %}

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%;
  }
}

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.

create a FAQ page for Shopify

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.

create a FAQ page for Shopify

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!

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

8 Replies to How to Add a FAQ Page on Shopify

  1. “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’ %}

    1. 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.

  2. 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.

    1. 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.

  3. 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!

    1. 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.

Leave a Reply

Your email address will not be published.

Bluish has rebranded to Jotting :) X