Add a Sliding Summary Drawer to Your Squarespace Blog Post

🪟 Summary Drawer Generator

Drawer Title (e.g. More Articles):
Blog Slugs (one per line, e.g. /blog):
Background Color:
White Light Gray Soft Yellow Light Blue Light Red Light Green Generate Code

Is This Free to Use?

Personal use is free forever.
If you’re using this tool on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a license here

requently Asked Questions

How do I show related posts in a Squarespace blog post?

This tool uses the built-in Summary Block and converts it into a toggleable drawer that appears on the right-hand side of your blog post. It keeps your layout clean while encouraging visitors to read more content.

Can I create a sliding drawer in Squarespace without code?

Squarespace doesn’t offer this natively. This tool provides ready-to-use code that creates a sliding panel for related articles — no plugin or developer mode required.

What is a Summary Block in Squarespace?

A Summary Block displays previews of other posts or pages. This tool enhances its functionality by hiding it in a drawer that readers can open when they want to explore more articles.

Is this drawer mobile-friendly and responsive?

Yes, the drawer adapts to all screen sizes and stays unobtrusive on mobile. You can customize its width and background color for better readability and branding.

How do I make the drawer appear only on certain pages?

The tool uses blog slugs (e.g. /blog, /articles) to control where the drawer is activated. This prevents it from showing up on your homepage or landing pages.

Do I need a license to use this on a client’s Squarespace site?

Yes. Personal use is free, but client or commercial projects require a one-time license of £49.99. It covers all tools and future updates.

Disclaimer

This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.

Long blog posts often benefit from a list of related articles — but placing those links directly on the page can clutter the layout or distract from the main content.

This tool turns a standard Squarespace Summary Block (which displays previews of other posts) into a sliding drawer that readers can toggle open from the right-hand side. It stays hidden by default, keeping your post clean and focused, while still offering an easy way for visitors to explore more of your content.

What It Does

• Converts a Summary Block you place at the bottom of a post into a hidden sliding drawer

• Adds a small vertical tab fixed to the right edge of the screen that toggles the drawer open/closed

• Uses custom CSS and JavaScript to inject styling and behavior

• Only appears on the pages you specify in the slug (to avoid interfering with homepages or landing pages)

Example of what the tab will look like

What You'll Need

Before using this tool, make sure:

✅ You’ve added a Summary Block to the end of your blog post (e.g., showing 3 related posts from the same category)
✅ There is only one Summary Block on the page — having more than one can cause unexpected behaviour
✅ You know the slug (URL path) of your blog section (see below)

What Is a Blog Slug?

A slug is the part of your page URL after the domain name. For example:

URL:
https://yourdomain.com/blog/my-post-title

Slug:
/blog

The tool uses slugs to decide which pages should load the drawer. This keeps it from showing up on the homepage or other non-blog pages.

You can enter one or more slugs into the tool — just one per line:

/blog

/articles

How to Use the Drawer Tool

1. Scroll to the Sliding Drawer Generator

2. Fill in the fields:

   • A title for the drawer (e.g. "Summary", "Explore More", "Key Posts")

   • The slug(s) where your blog content lives (one per line)

   • A drawer width (default: 300px is good for most)

   • A background color to match your site

3. Click Generate Code

4. Copy the output

5. In Squarespace, go to your post → ⚙️ Pages→ Website Tools → Code Injection → Footer Code

6. Paste the code and save

How to Add the Summary Block

1. Scroll to the bottom of your blog post and click to add a block

2. Choose Summary

3. Set it to show posts from the same blog, or the same category

4. Choose how many posts to display — we recommend over 4

5. Style as needed — the drawer will inherit whatever layout (list/grid) and design you choose

6. Important: Use only one Summary Block per page to avoid drawer conflicts

Troubleshooting

The drawer isn’t showing up?

• Check that your page URL starts with one of the slugs you entered

• Make sure there’s a Summary Block on the page

• Confirm you pasted the full code into the Footer Code Injection, not the header

The drawer looks broken or overlaps other content?

• Try reducing the drawer width

• Use a lighter background color for contrast

• Ensure your page has no other conflicting fixed-position elements

You see two drawers?

• Make sure you only have one Summary Block on the page

Summary

The Sliding Summary Drawer is a clean way to keep your blog layout minimalist while still offering related content or key recaps and fits naturally into any Squarespace 7.1 blog post — no plugins or developer mode required.