How to Add a FAQ Page on Shopify

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!