3 Ways to Use Code Blocks in Squarespace 7.1 (with Examples)

Apr 17

Code blocks are one of the many ways Squarespace allows you to add custom code to your site. It is one of the more flexible solutions because in addition to CSS and JavaScript (JS) code, it let’s you add HTML code. In this article, I will explain the three different ways you can use code blocks on your Squarespace site.

You can use code blocks to add custom code, such as HTML, CSS and JavaScript; embed third-party widgets and plugins, and display source code.

Here is a summary of what we will cover:

Add custom code (CSS, JS, rendered HTML)
Embed third-party widgets
Display source code

Before we delve into the tutorial, it’s important to make sure you have at least a Squarespace Business Plan. This is the minimum plan required for the addition of custom code to your site.

How to add a code block in Squarespace

To add a code block, you will need to add it to a page via the blue “+” button that shows up within page sections. Once you click the “Add” button, search for a “Code Block” element, and select it. To edit the content within a code block, click on the code block elements, and click the Pencil icon. Once the editor is open, you can add your HTML, CSS, or JavaScript (JS) code snippet.

Note that when you add code into a code block, it will only affect the current page to which it is added - it will not affect every page on your site.

1. Add custom code (rendered HTML, CSS, JS)

Code blocks allow for the addition of custom code snippets, including CSS, JavaScript (JS), and HTML.

Rendered HTML

Rendered HyperText Markup Language (HTML) is the result of a web browser turning the code into an interactive page that users can understand.

To display rendered HTML using a code block, you need to make sure the “Display Source Code” toggle is switched to “Off” (it should be off by default). Then, you can type whatever HTML code you want to be rendered on the page.

CSS

You can also add CSS styling rules to Code Blocks. When adding CSS code into a code block, you need to wrap the code in opening and closing “style” tags as pictured below.

You might wonder why you would need to add CSS to a Code Block when Squarespace 7.0 and 7.1 templates have a Custom CSS section designed for this purpose. Sometimes it can be helpful to keep HTML code and its matching CSS code together in one place so that it can be easily managed. For instance, in the Comparison Table Generator available on my website, The HTML and the CSS for the comparison table are generated as one unit that can be Copy & Pasted into a code block; this way, it is easy for both developers and people not familiar with code to know exactly where all of the code is placed without having to look in 2 different places.

When it comes to where to place CSS code, it really depends on both your needs and sometimes personal preference. To learn about all of the other places CSS code is allowed, you might enjoy my article How and Where to Add Custom Code in Squarespace (CSS, HTML, and JavaScript), where I explain the 6 different places where Squarespace allows you to add custom code.

JS

Code blocks also allow JavaScript (JS) code snippets. When adding JS code into a code block, you need to wrap the code in opening and closing “script” tags as pictured below. Note that the addition of JS to code blocks is only available with the Business and eCommerce plans.

To learn about all of the other places JS code is allowed, you might enjoy my article How and Where to Add Custom Code in Squarespace (CSS, HTML, and JavaScript), where I explain the 6 different places where Squarespace allows you to add custom JS code.

2. Embed third-party widgets and plugins

Sometimes, your Squarespace site has a need for third-party plugins or widgets. If you only want to include these on certain pages instead of across your entire site, you can add the code files required for these external code sources into code blocks, however, sometimes these code files operate more optimally if placed elsewhere, like your page header or footer code injection. Because of the nature of third-party solutions, it’s important that you follow the instructions given to you with the purchase of a third-party plugin or widget because different developers have different systems in place for how you should add code to your site.

3. Display source code

The “Display Source Code” option found in code blocks displays the code written in the block as formatted text instead of as rendered code. This use of code blocks is useful for fellow web developers and designers who may want to share code snippets because it allows site visitors to easily copy & paste code.

To display source code on your website, add a code block and make sure to toggle the “Display Source Code” option to “On”. This will make sure the code you write is not actually rendered on the web page, but displays as formatted text. In the images below, you can see how the source code is displayed when the source code option is toggled “On” vs. “Off”.