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.
- In the editor, click the
. - In the window that appears, add your code.
- Click Save & Close.
.Tip: Your code will appear as a Code Block icon while in the editor.
Code an entire page, widget, or post
HTML
To switch the entire editor to HTML, click the HTML button.
Tip: We recommend using the HTML button, not the drop-down menu to its right. Using the drop-down menu may delete any unsaved changes.
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 rich text formatting.
Markdown or Textile
To switch to Markdown or Textile mode, save your post or page, then use the drop-down menu in the top-right corner.
Add your code to the editor. When you're finished, you can click the drop-down menu and choose WYSIWYG to go back to rich text formatting.
Note: When switching to Textile or Markdown, any unsaved changes may be lost.
Add code to your footer
The site footer accepts both plain text and HTML. To edit your footer:
- Enter Structure mode.
- Scroll down to the bottom of your site.
- Click Edit Website Footer.
For more help, visit Editing footers.
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:
- Add the files to your file storage area.
- 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.