Enhance your site’s style and appearance using advanced coding skills.

You can build a website on Squarespace without coding or design expertise. When you add a block, you're adding HTML to your site without writing the code yourself. Similarly, when you make style changes, you're changing your site's CSS. The Squarespace platform is powerful and flexible, and you can solve most design challenges with built-in style options.

To further customize 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 site’s underlying code, and you may have difficulty styling these changes.

Adding code to your site is an advanced modification that falls outside the scope of Squarespace support. If you have coding knowledge and need more help, visit the Squarespace Forum. You can also join Squarespace Circle, a community of creative professionals who may be able to answer more technical questions. If you don't have coding knowledge but want to add custom code to your site, consider hiring a Squarespace Expert.

Watch a video

Ways to add custom code

Squarespace supports adding client-side code to your site. The options depend on your plan. All options are available during a trial:

Squarespace doesn’t support server-side code, including PHP, Ruby, Ruby on Rails, and SQL.

Code blocks vs. embed blocks

The embed block pulls content from external sites and services that use the oEmbed Standard. You can use the embed block to display basic third-party content on your site, like a Facebook post, or a video from a host not supported by Squarespace.

If you have more advanced and customizable code, the code block is the best choice. It’s versatile and can render code in HTML and Markdown. You can also use it to display code snippets. It’s common to use code blocks for code-based customizations like:

• Embedding documents through a service like Issuu
• Adding an MLS search

HTML, JavaScript, and CSS

Learn more about these common types of custom code you can add to your site.

HTML

The code used to add content to a web page. When you add a block, you're adding HTML to 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.

CSS

CSS is the coding language used to apply style and design to a web page written in HTML. All Squarespace templates have built-in CSS, and all templates have tweaks and style options. When you make changes in site styles, you're changing the CSS of your site. If you decide to apply custom CSS to your site, use it sparingly.

You can use the CSS editor to customize:

• Fonts
• Colors
• Backgrounds

You shouldn’t use CSS to customize:

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

Custom CSS has a 128,000 character limit.

The Squarespace Developer Platform (version 7.0 only)

If you’re an advanced user on version 7.0, you can use the Squarespace Developer Platform to access 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.

If you can't paste custom code

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

If your custom code doesn’t appear

If your custom code doesn't appear, refresh your browser. If that doesn't help, it may be because:

• You’re logged in - As a security measure, code in a code block may not appear for you 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://). To test this, visit your site in an incognito browser.
• The code is on an index page - Your code might not render if you've added it to a page within an index. To test this, remove the page from the index within the Pages panel, then visit your site in an incognito browser.
• You enabled Ajax loading - Occasionally, Ajax may conflict with embedded custom code, code-based customizations, anchor links, and URL redirects. To resolve the issue, try disabling Ajax loading.

If the code still isn't working, reach out to the source of the code, as they're most familiar with the code and the way it’s supposed to work. Third party code falls outside the scope of Squarespace support, so we can’t help you with any additional troubleshooting.

If you receive a CORS error

You’ll receive a CORS (Cross Origin Resource Sharing) error if you use JavaScript to make requests from a browser. All requests must originate from a server side application. We don’t support CORS requests.

Coding resources

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

• W3Schools
• Codecademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

Note: Custom code falls outside the scope of our support. This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

• Learn best practices for adding custom code.
• Read our general guide on code-based customizations.
• Visit the Squarespace Forum, our customer and developer forum.
• Hire a Squarespace Expert to help build custom code for your site.
• Explore our premium and enterprise-level plans to develop a more customized solution for your business.