Every website needs an FAQ section. It saves your customers from emailing you the same questions, it builds trust, and — here is the kicker — it can get you featured in Google's "People Also Ask" boxes if you add the right schema markup.
Squarespace does have a built-in accordion block, but it is pretty basic. In this guide, we will cover the native option and then show you how to build a custom FAQ with smooth animations and proper schema for SEO.
Option 1: Squarespace's Built-in Accordion Block
The quickest way to add an FAQ. In the Squarespace editor:
- Click Add Block → Accordion in any content section
- Type your question as the title and answer as the body
- Click the + to add more items
- Style in Design → Block Styles
Limitations: Minimal styling control, no smooth open/close animation, and — critically — no FAQ schema markup. That means Google will not recognize it as an FAQ for rich results.
Option 2: Custom FAQ Accordion (Copy-Paste)
This custom solution gives you smooth animations, clean styling, and works in any Code Block. Paste this HTML into a Code Block on your page:
<div class="faq-section">
<div class="faq-item">
<button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
<span>What is your return policy?</span>
<svg class="faq-icon" viewBox="0 0 24 24" width="20" height="20">
<path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<div class="faq-answer">
<p>We offer a 30-day money-back guarantee on all purchases. Simply contact our support team and we will process your refund within 5 business days.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
<span>How long does shipping take?</span>
<svg class="faq-icon" viewBox="0 0 24 24" width="20" height="20">
<path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<div class="faq-answer">
<p>Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout for an additional fee.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
<span>Do you offer custom orders?</span>
<svg class="faq-icon" viewBox="0 0 24 24" width="20" height="20">
<path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<div class="faq-answer">
<p>Yes! We love custom work. Reach out through our contact form with your requirements and we will get back to you within 24 hours with a quote.</p>
</div>
</div>
</div>
<style>
.faq-section {
max-width: 700px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid #e5e5e5;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
font-size: 17px;
font-weight: 500;
color: #1a1a1a;
text-align: left;
font-family: inherit;
}
.faq-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 16px;
}
.faq-item.open .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
max-height: 500px;
padding-bottom: 20px;
}
.faq-answer p {
color: #555;
line-height: 1.7;
font-size: 15px;
}
</style>Duplicate the .faq-item block for each question. The JavaScript is inline and minimal — just toggling a CSS class.
Adding FAQ Schema for Google Rich Results
This is where it gets exciting. FAQ schema tells Google that your content is a proper FAQ, which can earn you expanded listings in search results — taking up more real estate and driving more clicks.
Add this to Settings → Advanced → Code Injection → Footer (or the page-specific header):
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is your return policy?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We offer a 30-day money-back guarantee on all purchases. Simply contact our support team and we will process your refund within 5 business days."
}
},
{
"@type": "Question",
"name": "How long does shipping take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout for an additional fee."
}
},
{
"@type": "Question",
"name": "Do you offer custom orders?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes! We love custom work. Reach out through our contact form with your requirements and we will get back to you within 24 hours with a quote."
}
}
]
}
</script>Important: The questions and answers in your schema must exactly match what is visible on the page. Google penalizes mismatches. You can validate your markup with Google's Rich Results Test.
Tips for Great FAQ Sections
- Use real questions from real customers. Check your inbox, support tickets, and social DMs for the questions people actually ask.
- Keep answers concise. If the answer needs more than 2-3 sentences, link to a dedicated page instead.
- Put the most common questions first. Do not bury the important stuff at the bottom.
- Update regularly. FAQs go stale. Review yours every quarter.
- Do not keyword stuff. Write naturally. Google is smart enough to understand your content without awkward phrasing.
Want to skip the manual coding? Our FAQ Accordion tool lets you type your questions and answers, choose a style, and generates the complete code — including the schema markup. Our Schema Builder can also generate FAQ schema (and other types) from a simple form.
