Back to Blog

How to Add Plugins to Squarespace: A Beginner's Guide

How to add plugins to Squarespace, showing the Outline Text plugin effect by Ghost Plugins

How to Add Plugins to Squarespace: A Beginner's Guide

One of the most common questions new Squarespace owners ask is how to add plugins. If you are coming from WordPress you might expect a plugin store with an install button, and Squarespace does not work that way. The good news: adding plugins to Squarespace is genuinely simple once you understand where things go, and this guide walks you through every method step by step.

How Do Squarespace Plugins Work?

Squarespace plugins are small pieces of code, usually CSS (which controls how things look) or JavaScript (which controls how things behave), that you paste into specific places in your site settings. There is no installation in the traditional sense: the code runs as part of your site, and removing the code removes the plugin. That makes plugins easy to try, easy to undo, and safe to experiment with.

Some larger tools work differently, connecting to your site as external services or browser extensions rather than pasted code. We will cover those too.

Plugins vs Extensions: What's the Difference?

  • Plugins are code snippets from third-party creators that change your site's design or behaviour, like the ones featured on SquareLocator's plugin collection.
  • Extensions is the name Squarespace gives its official marketplace of connected business services (shipping, accounting, marketing integrations), and it is also what we call the standalone tools like SEOSpace and SquareKicker covered in our Extensions guides.

This guide focuses on plugins, the code kind, because that is what most people mean when they ask this question.

Before You Start: The Two Places Code Lives

Almost every Squarespace plugin is installed in one of two places:

  • Custom CSS (for CSS plugins): Design, then Custom CSS. This is where visual styling lives.
  • Code Injection (for JavaScript plugins): Settings, then Developer Tools, then Code Injection. This is where scripts live, usually in the Header or Footer box.

The plugin's instructions will always tell you which one it needs. Note that Code Injection requires a Squarespace Business plan or higher, while Custom CSS is available on all plans.

Method 1: Adding a CSS Plugin (Most Common)

Tilt Hover CSS plugin for Squarespace by Ghost Plugins

CSS plugins change how your site looks: buttons, hovers, text styles, navigation layouts. To install one:

  1. Copy the plugin's CSS code from the product page or the file you received.
  2. In your Squarespace dashboard, go to Design, then Custom CSS.
  3. Scroll to the bottom of any existing code and paste the new snippet on a fresh line.
  4. The preview updates instantly. If it looks right, click Save.

That is the whole process. To remove the plugin later, delete the snippet and save again.

Method 2: Adding a JavaScript Plugin via Code Injection

Mega Announcement Bar, a JavaScript plugin installed via Squarespace Code Injection

JavaScript plugins add behaviour: animations, dynamic menus, interactive elements. To install one:

  1. Copy the plugin's script, including the surrounding script tags.
  2. Go to Settings, then Developer Tools, then Code Injection.
  3. Paste the code into the Header or Footer box, whichever the plugin's instructions specify (Footer is most common, as it loads after your content).
  4. Click Save and refresh your live site to see the result.

Method 3: Adding a Plugin to a Single Page

Sometimes you only want a plugin on one page, a landing page animation for example. Squarespace supports per-page code:

  1. Hover over the page in the Pages panel and click the gear icon to open its settings.
  2. Go to the Advanced tab.
  3. Paste the code into Page Header Code Injection.
  4. Save. The plugin now runs on that page only.

Method 4: Plugin Suites and Visual Installers

Some premium options skip the copy-and-paste entirely. Tools like SquareKicker work as a visual editor layered on top of Squarespace: you click, adjust, and it writes the code for you. Plugin suites like Spark install once and give you a menu of effects to switch on. These suit non-technical users who want plugin results without touching code. You can browse both on our Extensions page.

Is It Safe to Add Plugins to Squarespace?

Yes, with two sensible rules. First, only use code from reputable creators: established plugin makers publish clean, documented snippets that thousands of sites already run. Second, add plugins one at a time and check your site after each, so if something looks off you know exactly which snippet caused it. Because plugins are just pasted code, the worst-case fix is always the same: delete the snippet and save.

Squarespace does not officially support third-party code, which simply means their support team will not debug it for you. It does not break your terms of service, and the creators themselves provide support for their plugins.

Troubleshooting: When a Plugin Does Not Work

  • Nothing changed: hard-refresh the page (Cmd+Shift+R or Ctrl+Shift+R), as your browser may be showing a cached version.
  • Only partly working: check you copied the entire snippet, including the first and last lines.
  • CSS in the wrong place: CSS goes in Custom CSS, not Code Injection, and scripts go in Code Injection, not Custom CSS.
  • Conflicts: if two plugins target the same element, remove one, save, and test. Order in the file can matter for CSS.
  • Template differences: some plugins are built for specific Squarespace versions. Check the plugin lists 7.1 support if your site is 7.1 (most modern sites are).

Where to Find Good Plugins

Vertical Navigation, one of the best free Squarespace plugins to start with

Start free. Our roundup of the best free Squarespace plugins covers navigation fixes, button effects and styling touches that cost nothing and take minutes to add. When you need more capability, the best Squarespace plugins guide covers the full landscape, and our mega menu and navigation plugins guide goes deep on the most-requested category.

Frequently Asked Questions

How do I add plugins to Squarespace?

Copy the plugin code, then paste CSS into Design, Custom CSS, or paste scripts into Settings, Developer Tools, Code Injection. Save and refresh your site. Most plugins take under five minutes to install.

Does Squarespace have a plugin store like WordPress?

No. Squarespace has an official Extensions marketplace for business integrations, but design plugins come from third-party creators and are installed as code snippets. Directories like SquareLocator bring these creators together in one place.

Do I need a special plan to use plugins?

Custom CSS works on every Squarespace plan. Code Injection, needed for JavaScript plugins, requires a Business plan or higher.

Can plugins break my Squarespace site?

Not permanently. Plugins are pasted code, so removing the snippet always restores your site. Add plugins one at a time so you can identify the cause if anything looks wrong.

Are Squarespace plugins allowed?

Yes. Adding custom code is a built-in Squarespace feature. Squarespace support will not troubleshoot third-party code, but plugin creators provide their own support and documentation.

Do plugins slow down Squarespace sites?

CSS plugins have effectively no impact. Each JavaScript plugin adds a small amount of load, so keep the ones that earn their place and remove any you stop using.

Related SquareLocator Guides

Final Thoughts

Adding plugins to Squarespace is far simpler than it first appears: copy the code, paste it in the right box, save. Start with one or two free plugins to get comfortable with the process, and within an afternoon you will be customising your site in ways the standard editor cannot reach.