How to add a sidebar to Squarespace

* This is an old post from 2018. Things may have changed since then.

I found and installed a super awesome sidebar plugin for Squarespace. I use Squarespace for my website and the theme I have, Jasper, does not come with a sidebar for the blog section.

The plugin works by using an unlinked page and importing that content onto your desired blog list/post pages.

Start by creating an unlinked page named sidebar. This is where the desired sidebar content is added. It's super easy to do since it's just a regular page but skinnier (default 260px, or however you want to set your sidebar width to), so you have all the same Squarespace blocks. Add the plugin's css and js as unlinked files in your Squarespace dashboard. Then paste some code into the Code Injection sections for your blog.

The plugin is easy to set up and there's step by step video instructions. The plugin costs $50 and it's a more satisfying solution than any workarounds I encountered. The first workaround is changing my Squarespace theme to one that supports a blog sidebar. After spending a month and a half customizing my current theme, I am not about to change themes now.

The second is creating a page with a fake sidebar by using a two column 3/4 + 1/4 layout and placing the sidebar content in the 1/4 section. Then using a summary block for the blog excerpts. With this second option, the fake sidebar would not show up on every blog post without manually creating it nor is there the ability to click Next or Previous to see more blog posts.

Using the plugin: how the sidebar looks alongside a blog post.

Customizations

Following the installation instructions, I added a 50px margin-top in addition to the default 30px margin-left. This is so the top of my photo will be lower than the top of the blog post date.

Then I made one small change to the code to remove the margin around the sidebar when viewed on a mobile device (or a device under 767px). I simply added the following media query to the bottom of the plugin-sidebar.css file.

@media (max-width: 767px) {
  .sidebar__inner {
    margin: auto;
  }
}

The change on mobile

Before (left) and after (right) setting the margin to auto. The difference is subtle.