Creating a Categorized FAQ Page in Shopify

Buttons Kavanagh

Having an FAQ section on your Shopify store can help improve your customer service while saving you from headaches of being asked the same questions over and over. This is a pretty easy task by using a Blog for FAQ’s and then just posting the questions and answers. But what if you have multiple categories you want things to be organized by? That’s where we can use the power of tags to create top level categories and improve the user’s experience to find the answer’s they need so they can get back to what’s important: Shopping.

  1. Create a new Blog
    Go into your admin and create a new blog for all your FAQs to go into, lets call it “FAQ.”
  2. Identify your top level FAQ categories
    These top level categories will be the first thing users see when they get to your FAQ page. So try to make them clear and concise to help direct them in the right direction. For this example, we’ll create 3 categories: Returns, Shipping and Legal.
  3. Add some content to the FAQ blog
    Let’s add a couple posts to your FAQ blog so we have some content to work with. To put a certain question into one of our three categories, we have to add a tag to the post with the same name of the category you want it to go into. For example, if we want to add a question to “Returns,” go to your post’s tags and add “returns.” Add a couple posts to each category and then we can start diving into the code.
  4. The Code
    Now that we have some content to work with, we can get into the code. Open up your template for your FAQ page and find the section you want the content to appear in. Then copy and paste this loop into your template. You may have to adjust some variable names to match your project:
     
    <!– Create a list to hold the categories –>
    <ul id=”faq-list”>
        <!– Loops over all the tags used in your FAQ blog –>
        {% for tag in blogs[‘FAQ’].all_tags %}
            {% assign current_tag = tag %}
            <!– Creates a category for each tag. –>
            <li class=”question”>
                <h2>{{ tag }}</h2>
                <!– Creates a list for the current category –>
                <ul id=”{{ tag | handle }}” class=”sub-question-list”>
                    <!– Loop over all the articles in your FAQ blog –>
                    {% for article in blogs[‘FAQ’].articles %}
                        <!– If the current post has the current list’s tag, print out the FAQ –>
                        {% if article.tags contains current_tag %}
                            <li class=”question”>
                                <!– Article Question –>
                                <h3>{{ article.title }}</h3>
                                <!– Article Answer –>
                                <p>{{ article.content }}</p>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>

     
  5. All Done!
    With the loop put into the correct container within your template, you should start seeing some FAQ categories with their questions listed below!

 

Last updated by on .

What Are Your Thoughts?

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