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.

{% 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 bluish.io --->
</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 Debut theme, so in this case the CSS/SCSS file is named theme.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;
}

details {
  padding-top: 20px;
}

details p {
  padding-left: 20px;
}

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 =*/
}

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

details[open] ~ * {
  animation: inherit;
}

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

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *