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.
What you can customize about Squarespace with your code block
While you can add different types of code to a code block, it is most commonly used to add custom CSS to an individual page, post, or product.
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace.
When you use a code block to add custom CSS to a single page, the style changes will only be applied to content on that page.
To learn more about customizing Squarespace with CSS, download my free guide at insidethesquare.co/learn
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.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.