How to Add Code to Squarespace

If you’re a Squarespace user looking to add code to your website, you might wonder where to start. Squarespace is a popular website builder that offers a variety of templates and features, but sometimes you need to go beyond what’s provided out of the box.

Whether you want to add tracking code, embed a custom widget, or tweak the design of your site with CSS, you’ll need to know how to add code to Squarespace.

In this post, we’ll walk you through the process step-by-step, so you can customize your Squarespace website to your heart’s content.

3 Free methods of adding code to Squarespace

It’s strongly recommended that you have extensive knowledge of code before adding it to your site, as adding custom code isn’t overseen by Squarespace support, and they won’t be able to help with it.

You can add custom code to your site in Squarespace in many ways. We’ll go over each method as quickly and as necessary as possible.

Method 1: Code block

Code blocks are the easiest and most accessible way to add code to your site. These add code to a page to change its layout or design. They can also add Shopify buy buttons and many other things.

Supported code:

• CSS
• HTML
• Markdown

Adding the code block

1. Ensure you’re on the pages panel and select “Add block“.

2. Choose “</> Code” from the pop-up window that appears.

3. Once done, select the Pencil icon on the newly added code block on your page.

You’ll see a space in this new pop-up window that says “Hello, World“. You can safely delete this and replace it with any custom code you like.

Method 2: CSS Editor

The CSS (Cascading Style Sheets) editor allows you to make changes that you otherwise wouldn’t be able to make within the design panel.

This means you can make advanced changes to any fonts, colors, or backgrounds on your site with few limitations.

Ensure you’re on your pages panel menu before you follow the below steps:

To use the CSS editor:

1. Open “Design” and select “Custom CSS“.

2. You will see a new panel appear, this new panel contains a box where you can input any CSS code you like.

Note: Be careful with CSS when editing an existing site, CSS has the potential to break your site so always monitor any changes you make. Squarespace support is limited when it comes to supporting custom code.

You also have the option of adding custom files to your CSS code. This is for adding images & custom fonts to your page through CSS.

Supported file types:

• .jpg
• .png
• .gif
• .ttf
• .otf
• .woff

Important: Ensure you click “Save” when you’re finished with your changes.

Method 3: Embed Block

The embed block allows you to place content from other sites, on your site as direct content. You can embed things like YouTube videos & social media posts with ease.

Ensure you’re on your pages panel editor before you follow the below steps.

To add an embed block:

1. Click “Add Block“, then “Embed“.

You can decide whether you’d like to embed your content as a link or just a code snippet if you’re only looking to add a specific piece of content from a site.

You can also add your own custom featured image if you’re embedding a video off of YouTube or another video streaming platform as well as the ability to add your own description.

Video tutorial

Below is a quick 3-minute tutorial explaining exactly how you can add custom code to Squarespace quickly & easily.

FAQ

Conclusion

Code can help you achieve many, otherwise impossible, things on Squarespace. Add custom buy buttons, and embed videos, content & posts from other sites. Whatever it is you want to add, there should be a way to do it through code.

If you have any questions about the above content or need help with anything, don’t hesitate to contact us, we’re quick to reply. We pride ourselves on our expert knowledge & support.

Related

• How to Add Blogs on Squarespace + Professional Advice
• How to Add Buttons on Squarespace [10 Styles]
• How to Add Tax to Orders on Squarespace