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 changes in the Style Editor, 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 the Style Editor 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.

Note: Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support.

Adding code

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

  • Code Block - Add code within a page’s layout. For example, you might use a Code Block to embed a video or add a widget to a Regular Page.
  • 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.
  • 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.

These are the recommended ways for inserting custom code:

  • Adding HTML - Code Block
  • Making CSS style changes - CSS Editor
  • Inserting JavaScript - Code Injection
  • Displaying raw code as plain text: Code Block with “Display Source” checked

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.

More help

For more help, visit Custom code FAQ.

Was this article helpful?
36 out of 64 found this helpful
Adding custom HTML, CSS, and JavaScript