FAQ Accordion

File: sections/faq-accordion.liquid

Templates: index.json, product.gateway-voyage.json

Description

FAQ Accordion Section

Flexible, reusable FAQ section with two layout modes, theme presets, and optional “Load More” pagination. Built with Tailwind utility classes and vanilla JavaScript.

Layouts:

• side-by-side (default): Two-column grid — sticky title/description on the left, bordered accordion items on the right. Collapses to single column below the lg breakpoint (1024px).
• stacked: Single-column centered layout with card-style accordion items (rounded corners, subtle shadow). Suitable for landing pages.

Theme Presets (color_theme setting):

• white: #FFFFFF bg, mi-green titles, mi-black text
• light-gray: gray-100 bg, mi-green titles, mi-black text
• beige: mi-beige bg, mi-green titles, mi-black text
• dark: mi-green bg, white titles, white text, translucent cards/borders

Settings:

• layout (select) — “side-by-side” | “stacked”
• color_theme (select) — “white” | “light-gray” | “beige” | “dark”
• title (text) — Section heading
• description (richtext) — Subheading / intro paragraph
• items_to_show (range) — Number of FAQ items visible before Load More (1–50, default 50)
• load_more_text (text) — Button label (default “Load More”)

Blocks:

• faq_item: question (text) + answer (richtext)

Settings

ID	Type	Label	Default	Info
“	header
layout	select	Layout	side-by-side
color_theme	select	Color Theme	white
“	header
title	text	Title	Frequently Asked Questions
description	richtext	Description	<p>Get answers to the most common questions about our programs and experiences</p>
“	header
items_to_show	range	Items to Show Initially	50
load_more_text	text	Load More Button Text	Load More

Blocks

FAQ Item

• Type: faq_item

ID	Type	Label	Default
question	text	Question	Question goes here?
answer	richtext	Answer	<p>Answer goes here. You can include multiple paragraphs and formatting.</p>

Presets

• FAQ Accordion

Usage

This section can be added via the Shopify theme editor.

{% section 'faq-accordion' %}