How To Create An Accordion In Squarespace

If you're selling services or products on your website then you might want to add an FAQ section to your sales pages. A frequently asked questions section is a good way to eliminate the last minute objections and get visitors from just randomly browsing your store to actually converting and buying whatever it is that you're selling.

So in this video tutorial I want to show you how you can add an accordion section or an FAQ accordion section to your sales page.

Watch the tutorial:

Transcript: How To Create An Accordion In Squarespace

So I'm going to click on edit and I'm going to scroll all the way down, just to that very last section after the Testimonials and I'm going to click Add Section.

And Squarespace already offers pre-made FAQ sections that you can choose from, but I want to show you how you can create one from scratch.

So we're going to add a Blank Section and I'm going to enter FAQ for the title.

I'm going to style the text make it Heading 2 and make it centered.

And then just below that we're going to add a Spacer and then I'm going to add another Spacer to create two columns.

And then I'm going to add the Accordion Block which is the new block that Squarespace recently introduced and it's absolutely awesome for adding FAQ sections.

So now that we've added the accordion, now you have the option to enter the content and style how it appears. So as you can see, it comes with three accordion items, and you can easily add an item by clicking Add An Item.

And to enter the content click on this little Arrow, and now you can enter the title which would be our Frequently Asked Question.

And then you can enter the answer in the Description Box. You would put the answer here.

And now you can either duplicate it or delete it. So if you want to add more questions, when you get to the last one it's a good idea to just Duplicate this one if you want.

And then you would repeat this process for any other accordion item that is in here. And I'm just going to delete this one.

And then for the design you can choose the size of the Title. So we can set this for Heading 1, Heading 2, Heading 3, or whatever size text you want. And then for the Description, you can choose between Paragraph 2, uh Paragraph 1, 2, and 3.

I like to set it as Paragraph 2 or 3, and then you can choose the width of the answer, the padding in between uh individual items, whether you want the text Aligned Left or Right or in Center, and whether you want the placement to be to the Left, in the Center or to the Right.

You can also choose whether to automatically expand the first item so that they see that this is a section that expands.

You can allow multiple open items, you can leave the dividers on or off; up to your personal preference, I like to leave them on and then just show or hide the first one so that it's not visible.

And then you can choose the thickness of the dividing line like this, and you can also choose the opacity; so whether you want it to be fully black or if you want it to be maybe gray like this.

Another thing you can do is you can choose whether you want the icon to be a plus sign or if you want an arrow. And then you can style how the icon looks.

And then the last setting you have is choosing the row padding, so whether the padding or spacing between each individual item is small, medium, or large.

And then if you want to add another accordion section right here, all you have to do is go over here click Plus, click Accordion and now you have two accordions.

The only thing you really need to pay attention is that they're styled the same way. So in this case we would change the Title to be Paragraph 1.

And for the dividers, we need to turn off the first divider, reduce the opacity of the line. And for the icon we need to select the arrow.

And that's how you can add accordions to your sales page or FAQ accordion, or expanding section as they're also called; to your sales pages.

And if you want even more tips about building a Squarespace website, I have a free training that walks you through the entire process.

Wrapping Up

And if you’re still working on your website, why not save time with a Squarespace template? With a Ley Design Studio template, you can refresh your website quickly and without any tech overwhelm. Browse the collection of templates to find the one that fits your brand and business best and you’ll go live in no time.

More Squarespace Tips: