Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Adding custom code to your site

You can build a website on Squarespace without coding or design expertise. When you add a block, you're adding HTML to your site without writing the code yourself. Similarly, when you make style changes, you're changing your site's CSS. The Squarespace platform is powerful and flexible, and you can solve most design challenges with built-in style options.

To further customize your site, you can use custom code. We highly recommend that you have coding knowledge before adding custom code. Some coding changes will conflict with your site’s underlying code, and you may have difficulty styling these changes.

Note: Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support. If you use custom code, we might ask you to remove it while troubleshooting other issues with your site. Determining whether custom code is at the root of a problem can be an important troubleshooting step.

Watch a video

Ways to add custom code

Squarespace supports adding client-side code to your site. The options depend on your plan. All options are available during a trial:

Option Plan Supported code About
Code Block (Basic) All plans

CSS

HTML

Markdown

Add code to a specific page to change its layout or design.
Code Block (Advanced) Business and Commerce plans

CSS

HTML

iframes

JavaScript

Markdown

Add code to a specific page to change its layout or design.
Code Injection Business and Commerce plans

HTML
JavaScript

Add code that affects your entire site, or an entire page, like Facebook Pixel or live chat services.
CSS Editor All plans

CSS

Change fonts, colors, and backgrounds. Don't make layout changes.
Embed Block All plans

HTML

JavaScript

Embed content from external sites that use the oEmbed standard.
Squarespace Developer Platform Version 7.0 only on Business and Commerce plans

CSS
HTML
JavaScript
Markdown

Access your version 7.0 template’s entire underlying code, build custom templates, and stop receiving template updates from Squarespace.

Squarespace doesn’t support server-side code, including PHP, Ruby, Ruby on Rails, and SQL.

Code Blocks vs. Embed Blocks

The Embed Block pulls content from external sites and services that use the oEmbed Standard. You can use the Embed Block to display basic third-party content on your site, like a Facebook post, or a video from a host not supported by Squarespace.

If you have more advanced and customizable code, the Code Block is the best choice. It’s versatile and can render code in HTML and Markdown. You can also use it to display code snippets. It’s common to use Code Blocks for code-based customizations like:

  • Embedding documents through a service like Issuu
  • Adding unsupported forms through a service like Wufoo
  • Adding an MLS search

HTML, JavaScript, and CSS

Learn more about these common types of custom code you can add to your site.

HTML

The code used to add content to a web page. When you add a block, you're adding HTML to your site.

JavaScript

The code used to add interactivity to a web page. JavaScript works behind the scenes to make things like slideshows, sliders, and lightboxes work.

CSS

CSS is the coding language used to apply style and design to a web page written in HTML. All Squarespace templates have built-in CSS, and all templates have tweaks and style options. When you make changes in Site Styles, you're changing the CSS of your site. If you decide to apply custom CSS to your site, use it sparingly.

You can use the CSS editor to customize:

  • Fonts
  • Colors
  • Backgrounds

You shouldn’t use CSS to customize:

  • Padding
  • Margins
  • Floats
  • Sizes (blocks, images, or banners)
  • Positioning

Custom CSS has a 128,000 character limit.

The Squarespace Developer Platform (version 7.0 only)

If you’re an advanced user on version 7.0, you can use the Squarespace Developer Platform to access the underlying code of your site's template. This platform was designed for developers and design agencies to modify our existing templates and even create templates from scratch. Code Injection changes you make while on the Developer Platform will disappear if you ever disable Developer Mode.

If you can't paste custom code

If you're having issues pasting in your code, try the keyboard shortcut. Click in the area you want to paste, and then press:

PC Mac
Ctrl + V  Command + V

If your custom code doesn’t appear

Custom code may not appear for a few reasons:

  • You’re logged in - As a security measure, code in a Code Block may not appear for you when you’re logged in, even if visitors can see it. This happens when you try to view embedded JavaScript over a secure connection (https://). To test this, visit your site in an incognito browser.
  • The code is on an Index Page - Your code might not render if you've added it to a page within an Index. To test this, remove the page from the Index within the Pages panel, then visit your site in an incognito browser.

If the code still isn't working, reach out to the source of the code, as they're most familiar with the code and the way it’s supposed to work. Third party code falls outside the scope of Squarespace support, so we can’t help you with any additional troubleshooting.

Coding resources

Here are a few popular and credible websites we recommend for tutorials, troubleshooting, and reference guides:

Note: Custom code falls outside the scope of our support. This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:
Was this article helpful?
117 out of 218 found this helpful
Adding custom code to your site