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

Adding custom HTML, CSS, and JavaScript

Squarespace helps you build a site without coding or design expertise. When you add a block, you're actually adding HTML to your site without writing the code yourself. Similarly, when you make style changes, you're automatically making changes to your site's CSS. The Squarespace platform is powerful and flexible, and you can solve most design challenges with built-in style options or by switching to a different template.

To further customize your site’s style and enhance specific parts of 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 template's default code and may cause issues in the future as our developers make ongoing improvements to the platform.

Some options for adding code are Premium features available in Business and Commerce plans.
Note: Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support. For more custom code assistance, hire a Squarespace Expert.

Adding code

There are several methods for adding HTML, CSS, and JavaScript to a Squarespace site.

These features are available on all plans:

  • Custom CSS Editor - Modify fonts, colors, and backgrounds. CSS shouldn’t be used for layout changes such as padding or positioning.
  • Embed Block - Embed content from external sites that use the oEmbed standard.
  • Code Block - Add code within a page’s layout. You can use HTML, plain text, Markdown, and CSS in Code Blocks on all plans.

These Premium features are available in Business and Commerce plans:

  • Site-wide Code Injection - Add site-wide code by injecting it in your site’s header or footer.
  • Per-page Code Injection - Add code that affects a specific page.
  • Code Block - Add code within a page’s layout. You can use JavaScript and iframes in Code Blocks on Business and Commerce plans, in addition to HTML, plain text, Markdown, and CSS.

These are the recommended ways for inserting custom code:

Watch the following video for more examples of using code on your site. This video is an excerpt from our Next Steps with Squarespace Series.

Adding CSS or JavaScript to Code Blocks

The Code Block and Code Injection only accept HTML, but you can add CSS or JavaScript by surrounding the code with these HTML tags:

  • CSS - <style></style>
  • JavaScript - <script></script>

Developer Mode

If you’re an advanced user, the Squarespace Developer Platform gives complete access to 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.

The Developer Platform is best for advanced developers, typically those who create custom websites for others. Note that Code Injection changes you make while on the Developer Platform will disappear if you ever disable Developer Mode.

The Developer Platform is a Premium feature, available in Business and Commerce plans.
The Developer Platform isn't available in version 7.1.

More help

For more help with custom code:

Was this article helpful?
116 out of 210 found this helpful
Adding custom HTML, CSS, and JavaScript