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

This guide reviews common questions about adding custom code to Squarespace sites.

Does Squarespace support custom code?

The Squarespace platform has built-in features for adding custom code, including the Code Block, CSS Editor, and Code Injection. However, adding code to your site is an advanced modification that falls outside of the scope of Squarespace support.

While we can't help you troubleshoot or provide specific directions for custom code modifications, there are many resources available that can point you in the right direction:

  • If you're adding CSS to your site, review our recommendations for what you should and shouldn't change with CSS.
  • Squarespace Answers is our customer and developer forum. As a part of this community, you can ask fellow Squarespace users for help with custom code and design.
  • If you're looking for comprehensive assistance in developing your site (as opposed to small code modifications), or if you'd rather leave the customization to the professionals, consider reaching out to someone from our list of vetted Squarespace Specialists.
  • Visit our recommended resources for tutorials and troubleshooting help.
  • If you're adding code from a third-party source, we recommend reaching out to the source for help.

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

To learn how, visit Adding custom HTML, CSS, and 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

What are the differences between HTML, CSS, and JavaScript?

  • HTML (HyperText Markup Language) - The code used to add content to a web page. When you add a block, you're adding HTML to your site.
  • CSS (Cascading Style Sheets) - The code used to add style and design to a web page. All Squarespace templates have built-in CSS, and all templates offer tweaks and style options. When you make changes in the Style Editor, you're changing the CSS of your site.
  • JavaScript - The code used to add interactivity to a web page. JavaScript works behind the scenes to make things like slideshows, sliders, and lightboxes work.

What changes can I make with code?

All sites allow for flexibility with custom code, but we highly recommend that you have coding knowledge and that you follow our best practices. We urge you to proceed with caution, and for best results, consult with a developer for help with these changes.

HTML and JavaScript

There isn’t a limit to what you can do with HTML and JavaScript, though you may run into some difficulties with styling the content as it could conflict with a template’s CSS.

CSS

Custom CSS should be used only for changing fonts, colors, and backgrounds. If you decide to apply custom CSS to your site, it should be used sparingly.

Custom CSS can be used to modify:

  • Fonts
  • Colors
  • Backgrounds

Custom CSS shouldn't be used to adjust the layout of your site. These site areas shouldn’t be modified with CSS:

  • Padding
  • Margins
  • Floats
  • Sizes (blocks, images, or banners)
  • Positioning

These changes can conflict with the default template code and may interfere with improvements our developers make to the platform. Additionally, these changes will likely affect mobile styles or break mobile styling completely.

For custom CSS, there is a 128,000 character limit.

Why doesn’t my code appear when I’m logged in?

As a security measure, sometimes code in a Code Block doesn't appear when you're logged in, even if visitors can see it. This happens when you try to view embedded JavaScript over a secure connection (https://).

Your code also might not render if you've added it to a page within an Index. To test, remove the page from the Index within the Pages panel and log out of your site.

If you can't see code that you added to a Code Block, click Preview in Safe Mode to view the embedded item. You can also log out of your site or view your site in a private or incognito browser.

It can be helpful to have two browser windows open: one where you're logged in and editing code, and a second that's in private mode so you can see your code live.

If the code still isn't working, we can't help you troubleshoot these issues. Third-party code falls outside the scope of Squarespace support.

We recommend reaching out to the source of the code (for example, the service where you received a code snippet for a widget) as they're most familiar with the code and the way it’s supposed to work.

What are some good coding resources?

Here are a few popular and credible websites we recommend for tutorials, troubleshooting, and reference guides:

How does the Answers community work?

Squarespace Answers is a peer-to-peer forum dedicated to answering questions about the Squarespace platform, specifically questions related to coding.

Answers isn't connected to your Squarespace account. Create an Answers account and log in separately to post questions and answers. 

Read our Answers FAQ before using the Answers forum. We recommend searching for an existing thread before posting a new one.

I can't paste my custom code

If you're having issues pasting in your code, we recommend you try the keyboard shortcut. First click in the area you want to paste, and then press:

PC Mac
Ctrl + V  Command + V

 

Was this article helpful?
3 out of 13 found this helpful