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.

Some options for adding code are Premium features available in the current Website Business plan and higher:

  • Available in: Business and Commerce plans
  • Available in: Personal plan for websites active before December 1, 2017
  • Not available in: Personal plan for websites active after December 1, 2017
  • Trial: You can use Premium features during a trial.

To learn more, visit Premium features.

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.

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.

These Premium features are available in the current Website Business plan and higher:

  • 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.

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.

Note: The Developer Platform is a Premium feature, available in the current Website Business plan and higher.

More help

For more help, visit Custom code FAQ.

Was this article helpful?
43 out of 74 found this helpful
Adding custom HTML, CSS, and JavaScript