Adding custom code to your site

Enhance your site’s style and appearance using advanced coding skills.

Last updated January 3, 2025

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.

Adding code to your site is an advanced modification that falls outside the scope of Squarespace support. If you have coding knowledge and need more help, visit the Squarespace Forum. If you've built three active sites, you can also join Squarespace Circle, a community of creative professionals who may be able to answer more technical questions. If you don't have coding knowledge but want to add custom code to your site, consider hiring a Squarespace Expert.

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 a single page, like Facebook Pixel or live chat services.
CSS Editor All plans

CSS

Change fonts, colors, and backgrounds.
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:

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.

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

If your custom code doesn't appear, refresh your browser. If that doesn't help, it may be because:

  • 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.
  • You enabled Ajax loading - Occasionally, Ajax may conflict with embedded custom code, code-based customizations, anchor links, and URL redirects. To resolve the issue, try disabling Ajax loading.

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.

If you receive a CORS error

You’ll receive a CORS (Cross Origin Resource Sharing) error if you use JavaScript to make requests from a browser. All requests must originate from a server side application. We don’t support CORS requests.

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:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.