Squarespace Hacks

Check out our Squarespace Mini Code Guide on this page to find out how to add code properly to Squarespace. Or scroll down for our overview of Squarespace plugins and extensions.

You can see some of the code hacks contained in these articles in action on the Marksmen Studio website:

• On the homepage, see an animated color gradient in action (look closely at the border).

• On the Case Study page, see a scrolling full-page screenshot.

• On the Contact page, see the contact form for a repeating background pattern.

You may have seen so-called “plugins” for Squarespace from third-party vendors, which have been around for years. The word plugins was adopted from its usage in the Wordpress ecosystem, which includes thousands of plugins to “extend your Wordpress experience.”

More recently, Squarespace introduced Squarespace Extensions. Both plugins and extensions are valuable additions to Squarespace, but they are different.

Squarespace plugins are code written by third parties that add functionality or, more often, change the look of design elements in Squarespace.

After you acquire one, you get code to cut and paste into Squarespace, plus instructions on where to add it.

Some of the best providers of Squarespace plugins include:

• SQSP Themes

• Ghost Plugins

• Squarepaste

• Squarewebsites

There isn’t any, except plugins are usually offered commercially and may have to be paid for. Any of the Squarespace Hacks presented here could be re-packaged as a plugin, or called a “code snippet” or other term.

Code needs to be added in site-wide Custom CSS, page header code injection, or other locations presented in our Mini Code Guide above. Unlike Wordpress plugins, there is no place in the Squarespace Home Menu to “plug in” your plugins. Plugins have been around for years and there are now many useful plugins written by talented members of the Squarespace community.

Squarespace Extensions are third-party tools that allow you to connect your website with other platforms for a variety of useful functions, such as shipping or inventory management.

Squarespace introduced Extensions in December 2019 after providing an API for third-party developers to use. Extensions more closely resemble Wordpress plugins in ease of use, because they utilize an API and do not require you to cut and paste code.

Extensions vs Plugins

Because an API is involved, Squarespace Extensions can do things Squarespace plugins cannot, like add order management and accounting functionality. They resemble Wordpress plugins more than Squarespace plugins do in that once you connect them, there is a seamless integration with Squarespace data. On the other hand, they do not actually integrate with the Squarespace Home Menu or panels, so the experience is different from working in Wordpress.

Some of the more useful Squarespace Extensions include Shipstation and TaxJar.

Code, including plugins, can be added to Squarespace in four different locations. It's important to enter it properly in the right place. This mini guide tells you how to add code to Squarespace with useful examples that really work:

• Preventing hyphenation in headings.

• Adding jQuery to Squarespace.

• How to change font color on one page in Squarespace.

• Changing a specific breadcrumb item in Google search results for products.

Click to expand images below.

Custom CSS

CSS, which stands for Cascading Style Sheets, usually affects the appearance of your site. This includes alterations to fonts and colors, as well as positioning of blocks and other elements on the site. If you want an entire Squarespace site to be affected by specific CSS, you should enter it directly in the Home Menu in Design > Custom CSS.

Code example: prevent hyphenation

Prevent hyphenation in all headings on a Squarespace website.

h1, h2, h3, h4 {-webkit-hyphens: manual !important;-moz-hyphens: manual !important;-ms-hyphens: manual !important; hyphens: manual !important;}

Code Injection

Code (except CSS) that applies to the entire site is added in the Home Menu in Settings > Advanced > Code Injection. This includes many of the scripts commonly added to Squarespace sites, including Google Tag Manager or Analytics scripts, a variety of verification codes (Google, Bing) or other third-party code such as for reviews. You can also manually enter more complete Organization or Local Business schema markup than Squarespace provides.

Code example: add jQuery

Add jQuery (a Javascript library) to a Squarespace website.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Page Header Code Injection

Sometimes code, including CSS, is best applied to a single page, not the entire site. Such code should be added in page header code injection on the individual page under Pages in Squarespace.

If the code is a script, it should be surrounded by <script> tags. If it is CSS, it must be surrounded by <style> tags.

Code example (CSS): change font color on one page only

Change font for H3 headings on a single Squarespace index page section.

<style> #custom-squarespace-websites h3 {color: #fff}</style>

Code example (Script): change breadcrumbs

Change breadcrumbs in Google search results for Squarespace products.

<script>
  $(function(){
    $(".ProductItem-nav-breadcrumb-link:first-child").attr("href", "/squarespace-seo/");
});
</script>

Code or Markdown Blocks

HTML can be added in a Code Block or Markdown Block. These can be moved around on a page like any other block in Squarespace. For more on the distinction, see the Squarespace help pages for each.