Shopify FAQ section accessible & seo friendly

Accessible and performant Shopify FAQ section with SEO FAQ rich schema. Section code available on GitHub

Words: Mircea Piturca

On most projects I've worked, I've come across this requirement. FAQ, accordion, or drop-down, is a core component of almost every store.

I've seen it done wrong too many times. Hard to configure, heavy on performance, lack of accessibility, or unsemantic markup, these are just a few things that this widget is trying to solve.

Installation

To install the FAQ section, download the files from Github, copy faq.liquid to your theme sections, and faq.js to your theme assets files. After installation, add questions and answers via Theme Editor.

Styles

All the styles are included inline in faq.liquid. This section follows an atomic CSS structure similar to tailwindcss.com but you can modify the CSS as per your requirements.

FAQ Rich Schema

JSON-LD FAQ structured data is automatically added. Learn more about the benefits and FAQPage schema format.

Performant and accessible

The Javascript is small written in plain vanilla, not other libraries like jQuery are required. The FAQ uses Aria roles to ensure accessibility. The component is keyboard accessible.

Section settings

In Theme Editor you can configure colors and desired font sizes. It has just basic settings but this can be easily extended to suit your needs.