Develop a FAQ page as a Knowledge Panel on the Dawn Theme

  1. Overview
  2. Shopify
  3. Develop a FAQ page as a Knowledge Panel on the Dawn Theme

To create a FAQ page with an interactive knowledge panel where answers are revealed when questions are clicked, you can use Shopify's built-in customization tools. Here’s a step-by-step guide to achieve this in the Dawn theme:

Step 1: Create a New Page for FAQ

  1. Access Your Shopify Admin:

    • Log in to your Shopify admin panel.

  2. Navigate to Pages:

    • In the left-hand sidebar, click on “Online Store” and then “Pages”.

  3. Create a New Page:

    • Click on the “Add page” button.
    • Title the page “FAQ” or “Knowledge Panel”.
    • Leave the content area empty for now.

Step 2: Customize the FAQ Page Template

  1. Go to Theme Editor:

    • In the left-hand sidebar, click on “Online Store” and then “Themes”.
    • Click on the “Customize” button next to the Dawn theme.

  2. Add a New Template:

    • At the top of the theme editor, click on the dropdown that might say “Home Page” and select “Pages”.
    • Click on “Create template”.
    • Name your template (e.g., “faq”) and base it on the default page template.

Step 3: Add FAQ Section Using Custom Liquid

  1. Edit the FAQ Page Content:

    • Go back to the Pages section in your Shopify admin and edit the FAQ page you created.
    • In the content editor, switch to the HTML (</>) view.

  2. Add HTML for FAQ Accordion:

Use the following HTML structure to create the FAQ accordion:

<div class="faq-container">
  <div class="faq-item">
    <div class="faq-question">What is your return policy?</div>
    <div class="faq-answer">Our return policy lasts 30 days...</div>
  </div>
  <div class="faq-item">
    <div class="faq-question">How do I track my order?</div>
    <div class="faq-answer">You can track your order using the tracking link...</div>
  </div>
  <!-- Add more FAQ items as needed -->
</div>

 

Step 4: Add CSS and JavaScript for Interaction

Add CSS:

    • Go to “Online Store” > “Themes” > “Actions” > “Edit code”.
    • In the Assets folder, find or create a CSS file (e.g., faq.css).
    • Add the following CSS to style the FAQ:
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}
 
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
 
.faq-question {
  cursor: pointer;
  font-weight: bold;
}
 
.faq-answer {
  display: none;
  padding: 10px 0;
}

Add JavaScript:

    • In the Assets folder, find or create a JavaScript file (e.g., faq.js).
    • Add the following JavaScript to handle the click events:

 

document.addEventListener('DOMContentLoaded', function () {
  var faqItems = document.querySelectorAll('.faq-item');
 
  faqItems.forEach(function (item) {
    item.querySelector('.faq-question').addEventListener('click', function () {
      var answer = item.querySelector('.faq-answer');
      if (answer.style.display === 'none' || answer.style.display === '') {
        answer.style.display = 'block';
      } else {
        answer.style.display = 'none';
      }
    });
  });
});

Include CSS and JavaScript in Theme:

    • In the theme.liquid file (or the specific template file for your FAQ page if you have one), include the CSS and JavaScript files
<!-- Add this in the <head> section for CSS -->
<link rel="stylesheet" href="{{ 'faq.css' | asset_url }}">
 
<!-- Add this before the closing </body> tag for JavaScript -->
<script src="{{ 'faq.js' | asset_url }}"></script>

Step 5: Save and Test

  1. Save Changes:

    • Save all changes in the Shopify admin.

  2. Test FAQ Page:

    • Navigate to your FAQ page on your store and test the accordion functionality to ensure it works as expected.

By following these steps, you can create a FAQ page with a knowledge panel style interaction similar to Google’s accordion-style answers. 

Was this article helpful?