Adding custom code

Squarespace 5 helps you build a site without coding or design expertise. When you add content to your WYSIWYG editor, 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. 

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.

Certain editors can accept code, including the HTML Page, Text/HTML sidebar widget, and Journal Page blog posts. This guide explains the options for adding code to these editors and answers common questions about custom code. 

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

Add a code snippet

To embed or add a piece of code to a page, widget, or blog post, add it as a Code Block.

  1. In the editor, click the gear-icon.
  2. In the window that appears, add your code.
  3. Click Save & Close.
Tip: Your code will appear as a Code Block icon while in the editor.

code-block.png

Code an entire page, widget, or post

In the editor, click the HTML button.

Tip: Use the HTML button, not the drop-down menu to its right.

HTML-1.png

The editor will switch to HTML mode. You'll see the code for any existing content.

Add your code to the editor. When you're finished, you can click HTML again to go back to the WYSIWYG.

html-2.png

Add code to your footer

The site footer accepts both plain text and HTML. To edit your footer:

  1. Enter Structure mode.
  2. Scroll down to the bottom of your site.
  3. Click Edit Website Footer.

For more help, visit Editing footers.

edit-website-footer.png

Add code to other areas of your site

To add code to other areas of your site, add it to your Code Injection. You can find this in your Website Management bar by clicking Website Settings, then Code Injection.

For more help, visit Code Injection.

Formatting CSS or JavaScript

To add CSS or JavaScript, surround the code with these HTML tags:

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

Can I style my site with CSS?

To add styles not available in your built-in style options, you can add CSS to your site with the CSS Editor. To access this, click the Style icon, then click the Custom CSS tab in the Appearance Editor.

For more information, visit Using the CSS Editor.

Can I add code files?

To add files that your code can reference:

  1. Add the files to your file storage area.
  2. Within your code, preface calls to these files with /storage/

What code can I add to my site?

You can add client-side code

Client-side code is code that is sent to and executed by a browser (like Chrome, Firefox, Safari, and Internet Explorer). This includes:

  • HTML
  • CSS
  • JavaScript

You can't add server-side code

Server-side code is handled by a server, not by a browser, and includes:

  • PHP
  • Ruby
  • Ruby on Rails
  • SQL

Help with HTML

For help with HTML, visit w3schools, the Squarespace 5 example code site, or the Squarespace 5 HTML cheat sheet.

Was this article helpful?
1 out of 1 found this helpful