How to Add Accordion to Squarespace Website
Watch the Video
Check out the YouTube video below 👇
Why Use an Accordion on Your Squarespace Website
Adding an accordion block is a great way to organize content, FAQs, or long text sections on your site. It keeps your pages clean and easy to navigate, allowing users to expand only the sections they’re interested in.
In this quick guide, I’ll walk you through how to add and customize a Squarespace accordion block step-by-step.
Step 1: Enter Edit Mode and Select the Section
Go to your Squarespace website and click “Edit.”
Scroll to the section where you’d like to add the accordion block.
If you’re creating a new section, simply choose “Add Section” and select “Blank.”
This gives you a clean canvas for placing the accordion wherever it best fits your layout.
Step 2: Add the Accordion Block
Once you’re in the section, click “Add Block” in the top-left corner.
From the list of available block types, find and select “Accordion.”
The accordion block will automatically appear in your section, ready for customization.
Step 3: Edit the Accordion Content and Design
Hover over your new accordion block and click the pencil (✏️) icon to open the editor.
Here you can:
Add or remove accordion items
Edit the text for each tab
Adjust the layout, spacing, and overall style
You can also customize fonts, colors, and padding in the section’s design settings to match your website’s aesthetic.
Step 4: Save Your Changes
Once you’re satisfied with how your accordion looks and functions, click “Save” in the top-left corner.
Your accordion block will now appear live on your site, expanding and collapsing smoothly for visitors.
Conclusion
That’s it! You’ve successfully added and customized an accordion block on your Squarespace website.
Using Squarespace accordions is an easy way to make your site more user-friendly while keeping long sections of content organized. If you need help styling or optimizing your Squarespace design further, feel free to reach out — I’d be happy to help.
Your Designer
I’m Dylan, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from E-Commerce sites to Real Estate and Insurance brokers. If you’re looking for a website and want to discuss a potential project, email me at dylan@highrlabs.com. You can also schedule a free 30-minute consultation call
