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.
Adding the code block
- Ensure you’re on the pages panel and select “Add block“.
- Choose “</> Code” from the pop-up window that appears.
- 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:
- Open “Design” and select “Custom CSS“.
- 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:
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:
- 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.
Below is a quick 3-minute tutorial explaining exactly how you can add custom code to Squarespace quickly & easily.
Are there any limitations to adding custom code to Squarespace?
Yes, there are limitations to adding custom code to Squarespace. Squarespace does not oversee custom code added to their sites, and therefore, they cannot guarantee the stability or performance of your site after adding custom code. Additionally, Squarespace support is limited when it comes to supporting custom code.
What kind of custom files can I add to my CSS code?
You can add images and custom fonts to your CSS code. The supported file types for images are .jpg, .png, and .gif, while the supported font file types are .ttf, .otf, and .woff. Keep in mind that when adding custom files, you should make sure they are properly formatted and hosted on a reliable server to ensure they can be accessed by your site visitors.
Do I need to have coding experience to add custom code to Squarespace?
Yes, it is 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.
What kind of code can I add to Squarespace using a code block?
Code blocks allow you to add CSS, HTML, and Markdown code to your site. This can be useful for making changes to the layout, design, or functionality of your site.
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.