Preview Section | Password = Chingi
1 2

Version: 1.0.0

Latest Update:

MINIMAL FAQ ACCORDION - BOXED - LUX

MINIMAL FAQ ACCORDION - BOXED - LUX

$5.00 USD
$5.00 USD
Sale Sold out
Taxes included. Download Available in less than 2 minutes

Minimal FAQ Accordion

This section renders a boxed‐width FAQ accordion with a built-in search filter — perfect for presenting frequently asked questions in a clean, professional layout. Each question expands downward, and you can customize font, font size, font color, and margins directly in the theme editor. No category buttons or extra clutter—just focused, minimal styling.

Key features

  • Boxed container — limited to max-width: 1200px and centered, ensuring consistent alignment with the rest of your site.
  • Search filter — real-time text search matches both question and answer content, hiding any non-matching items.
  • Accordion toggle — click or tap a question to reveal its answer downward, avoiding any upward shift of other items.
  • Minimal JavaScript — lightweight script only for filtering and toggling, optimized for performance.
  • Editable typography & spacing — adjust font family, font size, font color, margin-top, and margin-bottom from the section settings.
  • Theme compatibility — works seamlessly in any Shopify theme.

Editable settings

  • Section heading — text field.
  • Search placeholder — text field (default: “Search FAQs…”).
  • Font family — text field (e.g. “Arial, sans-serif”).
  • Font size — text field (e.g. “16px” or “1rem”).
  • Font color — color picker (default: #000000).
  • Margin top — text field (e.g. “20px”).
  • Margin bottom — text field (e.g. “20px”).
  • FAQ items (blocks) — each block has:
    • Question (text)
    • Answer (textarea)

How to add the section

  1. In Shopify Admin, go to Online Store → Themes, click the kebab menu (⋮) next to your theme, and choose Edit code.
  2. Inside the sections folder, click Add a new section.
  3. Name the file: faq-accordion.liquid and click Create section.
  4. Remove any placeholder code and paste in the code from the FAQ Code.TXT (as provided).
  5. Click Save.
  6. Open the Theme Editor (Customize), click Add section, and choose Minimal FAQ Accordion

View full details