A Beginner’s Guide to Squarespace Code Blocks

You can use a Squarespace code block to add HTML, Javascript, and CSS to an individual page on your Squarespace site.

Code blocks are a great way to add custom elements to your Squarespace site. You can use them to display code snippets, embed interactive features, or add special styling.

If you're showing off code, use the "Display Source" option for a clean, formatted look.

Two important things to know:

Javascript codes are only available for business or commerce plans and are not supported for Squarespace sites on a personal plan.
Squarespace doesn't offer support for custom code troubleshooting. If you run into issues, try searching online resources like the Squarespace forum, or this article with custom code troubleshooting tips for Squarespace.

How to add a code block to Squarespace

Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the code option form the list of content blocks.
Double click on the block to edit the content, or select the pencil icon.
Remove the placeholder text taht says Hello, World! and add your own code here.

Pro tips:

Toggle on display source code if you want the code to be visible to your site visitors.
If you are placing CSS in this code block, make sure to add your custom CSS code in HTML mode, between style brackets like this:
<style> custom css here </style>
If you are using functional javascript this code block, make sure to add your code in HTML mode, between script brackets like this:
<script> javascript here </script>

*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*

What you can customize about the code block using Squarespace

The code block itself is commonly used to add code to a site. This content block type doesn’t use any standard design settings.

Where you can learn more about Squarespace content blocks

Squarespace Made Simple

This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.

LEARN MORE →