3 ways to add custom code to your Squarespace website.jpg

Hear ye, hear ye!

You’ve got questions about adding custom code to your Squarespace website…. and I’ve got answers!

Perhaps it’s the warmer weather or the excitement of the spring blooms, I have no clue but apparently everyone is hard at WORK with their websites lately- this is exactly what I like to see!

I’ve had quite a few emails land in my inbox lately about custom code and Squarespace websites, so I decided it was about time to create a blog post/video tutorial on the topic.

Consider this post/video part 1, where I give you an introduction into 3 ways you can insert custom code to your Squarespace website.

Part 2 is the follow-up where I answer the question, does adding custom code to your Squarespace website affect SEO?

Double whammy, you’re welcome ;)

As a Squarespace SEO expert and leader in this super random little niche, it’s my job/pleasure to introduce you to things like this and present it in a way that makes you think, yes Charlotte I can handle this!

This is the kind of insider info that I share with my Squarespace SEO consulting clients and students in my online course, Top Squarespace SEO. But since I’m not one for secrets and truly want the best for anyone with a website, I’m giving you the summarized goods here - totally for free!

Read the blog post or watch the video tutorial below - I’ve got you covered and you’re about to learn 3 ways to add custom code to your Squarespace website.

Some of you reading this might be totally new to Squarespace SEO and are looking for an introduction to this topic, someone to hold your hand and show you it’s not actually that scary. On the flip side, you might already be familiar with a few points on this list already but maybe you are looking for confirmation that you’re on the right track and haven’t missed anything important. No matter where you are in your Squarespace SEO journey, I know you’ll benefit from this info!

Ready to dive in? Let’s go! Read the post and watch the video tutorial below to learn about 3 ways to add custom code to your Squarespace website.

Related:

SQUARESPACE SEO SERIES

I have so many tips to share on the subject that it would have been crazy to put it all in one article! There are many misconceptions about Squarespace SEO which is why I've dedicate so many posts to this topic. Enjoy!

Click to view all posts in the Squarespace SEO Series

Visit my Squarespace SEO page for lots more resources.

3 ways to insert custom code into your Squarespace website

What do you mean by custom code?

Great question!

Let’s start off by reassuring you that anyone can build a website on Squarespace without coding or design expertise. This sh*t is NOT required. I love Squarespace for many reasons but one of the main benefits is that it’s such a powerful, flexible and inclusive platform that you don’t have to rely on custom code in order to get it to look & display the way you want… instead you can solve most design challenges/preferences with Squarespace’s built-in style options.

That being said, you always have the option to use/insert custom code into your Squarespace website to further customize it. But please proceed with caution - this is NOT for beginners and you should have at least a basic understanding of the code you plan to add and how it works!

With Squarespace, you can insert different types of code throughout your site, and each bit of code can be used to serve a different function.

Squarespace supports custom code such as:

HTML
CSS
Markdown
iframes
Javascript

Basically, Squarespace supports the most common types of code that you’d want to add.

Can anyone add custom code to their Squarespace website?

Yes, in theory…. but like I said above, you should only be working with code if you know what you’re doing!

If your Squarespace website is built on the Basic plan, you will have limited options to work with custom code. But if you’re on the Business and Commerce plans, then you have more robust options.

Alright without further ado, let’s take a look at 3 ways you can insert custom code into your Squarespace website!

1. Use code injection (sitewide)

The first options is to use Code Injection to add HTML and scripts that enhance specific parts of your Squarespace website. These might include live chat services, domain verification for custom email services, or site analytics.

* This is available in Business and Commerce plans only

How to add custom code to code injection:

Log into the back end of your Squarespace website
In the Home Menu > Settings > Advanced > Code Injection.
Add valid HTML or scripts into the appropriate Code Injection fields for the header, footer, lock page, or order confirmation page.
After adding your code, click Save.

Here’s a bit more info about the Header & footer options (because that’s what most people are using this for, in my experience)

Header

Code added here is injected into the <head> tag on every page in your site.

Footer

Code added here is injected before the closing </body> tag on every page in your site.

2. Add code injection to a specific page on your Squarespace website

The second way you can add custom code to your Squarespace website is by adding code injection to a particular page on your Squarespace website. If you want the same code on multiple pages, you’d just repeat the process below.

How to add code to a specific page:

Hover over the page in the Pages panel.
Click the gear icon to open Page settings
Click Advanced.
Page Header Code Injection adds code to the <head> tag of that page.

NOTE: any custom code you add via the code injection to a specific page won't display on Index landing pages.

3. Insert a code block

Last but not least, you can use Code Blocks to add custom code to any page, blog post, sidebar, footer, or other content area on your Squarespace website. Code Blocks are really great & popular options if you want to embed third-party widgets or customize pages beyond what's possible with other blocks.

*If you’re on the Basic plan then you can insert a code block for plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags. if you’re on a Business or Commerce plan, you can also use code blocks for JavaScript or iframes.

Add a code block to your Squarespace website:

Edit a page or post, click an insert point, and click Code from the menu.
Add your code in the text field.
If you're using the Code Block to display code snippets, check Display Source.
Click Apply to save your changes.

Also remember that your custom code might not render if you've added it to a page within an Index. So if you’re having that problem, test it on a normal page and see if it works like that.

Note: you can also add custom code with Markdown and Embed content blocks, the process is pretty similar!

Final Thoughts

And there you have it - a lovely little introduction to custom code and how it works on your Squarespace website. I hope you found this helpful!

Depending on the type of code you’re working with or how you want to use it on your site, you might end up choosing one or more of the options outlined above. totally up to you!

There’s a lot to consider with Squarespace websites, particularly SEO, and I totally understand that it’s a daunting subject when you’re first starting out, which is why I’m thrilled to help you out with this blog post/video tutorial all adding custom code to your Squarespace website.

Whether you’re just starting out with a brand new website and want to make sure that you’re setting it up correctly, or if you’ve had a site live for a while and now want to grow it to make more of an impact, SEO will get you where you want to go! From web pages to blog posts to product descriptions, these factors should be considered across your Squarespace website if you want best results.

Now it's your turn to tell me, do you use any custom code on your Squarespace website? Did you insert it yourself? What type of code are you working with?

Leave me your questions down in the comments below and I’ll do my best to answer them. As people are spending more time online than ever before, it’s SO important that your website shows up properly in search results so that you can reach your ideal audience online - but you can’t do this without SEO!

If you want more SEO goodness, be sure to check out my Squarespace SEO page for all resources on the topic.

My signature online course, Top Squarespace SEO, will be opening for enrollment again soon - sign up for the TSS waiting list here!

You can also sign up for my newsletter (right here or below), where I often share Squarespace SEO tips, tricks and high-quality exclusive content. I send out emails to my list every Wednesday, mostly focused on Squarespace websites and SEO, and I can guarantee that you’ll find the newsletter topics interesting, entertaining and worth your time. #humblebrag

Finally, shameless plug: hit me up with any specific questions you have about Squarespace SEO and your website because I’m your girl. You can reach out to me directly if you’re interested in working together on your website and we can talk about whether or not you would be a good fit for my consulting and ongoing services. I can’t take on every request to do Squarespace SEO consulting but I do pick a few websites and businesses to work with every month and I’d love for you to be one of them.