3 Ways to Add Custom Code to Your Squarespace Website
OPTION 01: ADDING CUSTOM CODE TO CODE INJECTION
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
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.
OPTION 02: 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.
OPTION 03: 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!
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!
If you’re looking to make your business stand out with a unique website, grab our service guide and check out our services and pricing :)
