20+ FREE Squarespace 7.1 Plugins You Should Install Now
I love using plugins on my Squarespace website because it helps add some new elements and makes my site feel more unique. Plugins can also help make your website feel on-brand, and more interesting!
The plugins I’ll be sharing are essentially CSS snippets which you’ll need to add to the custom CSS box on your website.
If you’re not familiar with Custom CSS, it’s a way of changing the look of existing blocks in Squarespace, using code. These free Squarespace plugins are super simple to install – you simply copy and paste the following CSS snippets into your website.
This post was created for Squarespace 7.1. If you're on Squarespace 7.0, it will not work for you. Find out which Squarespace version you have here.
How to Install a Plugin with Custom CSS
Installing a plugin is very simple and the plugins I’m about to recommend will all follow the exact same process - just follow the steps below:
Head over to Squarespace and access your website.
In your Squarespace menu, click Design > Custom CSS.
A box will appear which will allow you to paste the custom CSS into your website.
Are Squarespace plugins safe to use?
Yes! Unlike other website platforms (looking at you, Wordpress) it’s generally very safe to add plugins and code to your website. Since these ones only use Custom CSS, it’s literally impossible for them to do anything other than change the appearance of something on your website.
On the other hand, platforms like Wordpress allow you to install third party plugins with the click of a button. Since you can’t easily access the code, they can have all sorts of hidden malware and leave your website vulnerable to attacks.
Can custom CSS break my website?
Custom CSS is one of the easiest coding languages out there to pick up, so don’t be put off using plugins because you need to “code”.
Adding CSS to your Squarespace website is a very simple process, and all of the plugins I’m recommending I have tried and tested myself. The only way you could possibly “break” your site is by adding the custom CSS wrong.
As long as you copy and paste the snippets correctly (and make the recommended changes only) then you won’t have any problems!
Here are some tips to help you avoid any mishaps when using plugins:
Only make the recommended changes to the CSS. These are usually very basic changes and could include swapping out a hex code so the colour is right for your website.
Make sure you haven’t missed any punctuation, and everything is spelt correctly. One deleted letter or semi-colon can cause all of your CSS to stop working!
Test your CSS snippets. I always double check mine in an incognito tab on Chrome, and on my phone too.
Make sure you label your CSS snippets. Use a double forward slash // to mark the beginning and end of your labels. Add these before each CSS snippet and make sure it’s clear what the CSS is for!
Since all of these plugins are just Custom CSS, they will work no matter which Squarespace plan you are on. View the Squarespace pricing plans here.
Free Squarespace Plugins for the Navigation and Announcement Bar
Remove Active Header Link Underline
Author: Wolf & Wild
By default, Squarespace adds an underline to the active (current page) navigation link. I’m not a huge fan of this, and always remove it on my website projects. I also add a hover animation instead, which helps the navigation to feel a bit more responsive.
// Remove Active Link Underline //
.header-nav-item--active a {
background-image: none !important;
}
// Add Hover Animation //
.header-nav-item a:hover {
opacity: 0.7 !important;
}Announcement Bar Button
Author: Ghost Plugins
The announcement bar on Squarespace is clickable, but you can make it more obvious by adding a button.This can also be good for drawing attention to your announcement bar, whether it’s promoting your services or offering a discount!
Hide the Site Header on a Specific Page
Author: Ryan Dejaegher
It might sound counterintuitive at first, but hiding your site header (and footer) can be useful for specific pages. For example, if you have a sales page on your website, hiding your header can reduce distractions and help guide the visitor towards purchasing.
Add a Second Button on the Site Header
Author: Ghost Plugins
Squarespace only gives you one option for a button, but with this plugin you can have two (or even more) buttons on your site header. I recommend turning off the original button though, as it won’t align perfectly with the new ones.
Get a Vertical Site Header
Author: Ghost Plugins
Squarespace has quite a few site header options, but they all feature a horizontal navigation bar. Try out this vertical site header and get a more contemporary look on your website.
Free Squarespace Plugins for Sections
Add Lines Between Sections
Author: Christy Price
I’m usually not a fan of “trends” and prefer minimal, timeless website design. But one trend I’ll get onboard with is the thin line between sections of your website. In fact, I have them on my own website!
Create Slanted Dividers Between Sections
Author: Rebecca Grace Designs
Get creative with how you divide your page up, and add a diagonal slant between sections! You can use the regular colour backgrounds or an image background - either way, the plugin still works great.
Use Images as Section Dividers
Author: Schwartz Edmisten
Swap out your plain dividers for images and add almost anything you can think of. Whether it’s waves, zig-zags or mountain silhouettes, feel free to play around with this plugin as it’s super fun.
Zoom Section Background Image on Hover
Author: Ghost Plugins
Add a dynamic, moving element to your sections with a zoom hover effect. This plugin needs a background image to work, so make sure you’ve uploaded a photo or pattern to see the zoom effect!
Free Squarespace Plugins for Text
Upload and Add a Custom Font
Author: Wolf & Wild
Squarespace already has an extensive collection of fonts that you’re able to use straight away. But if you have existing brand fonts or prefer something that isn’t on Squarespace, you’ll want to install a custom font with this plugin!
Add a Custom Font to Specific Words
Author: Finding Design
A trick I love to utilise on websites is having a custom font on 1-2 specific words in a sentence. This works best with unusual fonts or script fonts, and at a large size like heading one or two. It can help emphasise certain words and phrases!
Vertical Text on Desktop
Author: Ghost Plugins
Vertical text is a fun way to add some personality to your website or fill in an empty space on the page. It only applies on desktop, so don’t worry about things looking weird on mobile!
Change the Text Highlight Colour
Author: Station Seven
Make your website standout with a custom text highlight colour. When people highlight text on your website, the default colour is a bright blue. Switch this for a more on-brand colour with this plugin!
Add Custom Bullet Points
Author: Christy Price
Swap the standard round bullet points for something interesting - and even add your own colour with this plugin! Pick from hundreds of unicode symbols and shapes to find the perfect custom bullet point for your website.
Free Squarespace Plugins for Blocks
Modernise the Form Block
Author: Wolf & Wild
The default Squarespace form isn’t very customisable…and to be honest, it doesn’t look great either. Add your brand fonts and colours to the form with this plugin, and get rid of the ugly corners and borders too.
Numbered Accordion Block Tabs
Author: Ghost Plugins
Have a lot of FAQs? Or maybe you just want to add an extra something to your accordion block. With this plugin you can add automatic numbers to your tabs - no more rearranging or label changing when you add new information.
Turn the Summary Block Read more Link into a Button
Author: Ghost Plugins
If you’re tired of the ugly “read more” link on summary blocks, this plugin will turn them into a more obvious button and help boost the number of clicks through to your blog post!
Add Custom Social Icons
Author: Rebecca Grace Designs
Squarespace allows you to add any link to the social icons block, but will only display the correct icon for a small number of websites and platforms. I love using this plugin for an email link, but you can customise it for any URL you like!
Free Squarespace Plugins for Other Elements
Create a Instagram Links Page
Author: Wolf & Wild
This is less of a plugin and more of a tutorial that I love to share - you really don’t need to use Linktree for your Instagram “link in bio” page! You can make a much better looking page for free on your Squarespace website.
Style the Cookie Notice Banner
Author: Wolf & Wild
The cookie banner is probably the most un-customisable thing that exists on Squarespace. This plugin will let you change the colours and fonts to make the banner match the rest of your website!
Custom Pin It Button for Images
Author: Beatriz Caraballo via Ghost Plugins
Customise the Pinterest button that appears when hovering over an image on a Squarespace blog. Swap out the default icon for something more on brand, colourful or better suited to your website!
