How to Set up a Squarespace FAQ Accordion

If you're building a website on Squarespace and want a clean, organized way to present frequently asked questions (FAQs), look no further than the accordion block. This versatile feature allows you to hide content under clickable titles, making it easier for visitors to navigate your site without feeling overwhelmed.

Watch the video

Check out the YouTube video below 👇

What Is the Accordion Block in Squarespace?

The accordion block in Squarespace is a collapsible content block that allows users to expand and contract text sections. It’s especially useful for:

• FAQ sections

• Content-heavy pages

• Product details or feature breakdowns

• Condensing long-form information

Step 1: Add the Accordion Block to a Page

1. Navigate to the page where you want to add your FAQs.

2. Click Edit on the page.

3. Select Add Block and search for Accordion.

4. Drag the accordion block into the layout.

Tip: You can use multiple accordion blocks on the same page if you want to break up content into sections.

Step 2: Add and Manage FAQ Items

Once the accordion block is in place:

• Click into the accordion to open the editor.

• You’ll see items listed - these are your questions and answers.

• To add a new FAQ, click the Add button.

• To delete an item, click the trash icon.

• Reorder items by dragging them up or down.

Each item has two parts:

• Title – your question (e.g., “What is your return policy?”)

• Description – your answer (e.g., “We accept returns within 30 days…”)

You can also:

• Use bold, italic, bullet points, or numbered lists in your answers

• Leverage Squarespace AI to help write responses

Step 3: Customize Accordion Design Settings

Once your FAQ content is ready, head into the Design tab of the accordion block. Here are the best practices and recommendations:

Typography & Layout

• Title Heading Size: Use H4 for a clean, professional look (H3 may appear too large).

• Text Alignment: Keep it left-aligned for readability.

• Width: Always set to Large so the accordion uses the full page width.

• Padding: Adjust to your site’s style, but medium padding usually works best.

Functionality

• Expand First Item: Optional. Usually better to leave this off for cleaner UX.

• Allow Multiple Items Open: Leave off to keep the page tidy.

• Dividers: Keep them on to visually separate FAQ items.

Advanced Styling (Optional)

• Backgrounds: Add color or blur effects to fit your brand.

• Borders: Use sparingly for subtle separation.

• Blend Mode: Unless you know what you’re doing, it’s safe to skip.

Step 4: Save and Preview

Once you’re satisfied with your FAQ accordion block:

1. Click Save in the editor.

2. Preview the live page to ensure the layout and functionality are working as expected.

Test expanding and collapsing to check content spacing and readability.

---

📩 Join the inner circle to get exclusive code updates

---

Why Use Accordion Blocks for FAQs?

Using an accordion block is one of the best ways to:

• Improve your site’s usability

• Reduce visual clutter

• Keep your FAQ sections mobile-friendly

• Enhance SEO by organizing content under structured headers

Final Thoughts

The Squarespace accordion block is a simple but powerful tool for presenting FAQs and long-form content in a user-friendly format. With the right setup and styling, it can elevate your site’s design and improve visitor experience.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?