Add a Sliding Summary Drawer to Your Squarespace Blog Post
🪟 Summary Drawer Generator
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.
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
Scroll to the Sliding Drawer Generator
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
Click Generate Code
Copy the output
In Squarespace, go to your post → ⚙️ Pages→ Website Tools → Code Injection → Footer Code
Paste the code and save
How to Add the Summary Block
Scroll to the bottom of your blog post and click to add a block
Choose Summary
Set it to show posts from the same blog, or the same category
Choose how many posts to display — we recommend over 4
Style as needed — the drawer will inherit whatever layout (list/grid) and design you choose
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.
