This guide reviews common questions about adding custom code to Squarespace sites.
Does Squarespace support custom code?
- Some options are Premium features, available only on the Business and Commerce plans.
- 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 are premium features?
Some custom code options are Premium features:
- CSS Editor - Available in all plans
- Embed Block - Available in all plans
- Code Block - Premium feature
- Code Injection - Premium feature
Premium features are available in the current Website Business plan and higher:
- Available in: All Business and Commerce plans
- Available in: Legacy Personal plan (no longer available for new subscriptions)
- Not available in: Current Personal plan
- Trial: Available during a trial.
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:
You can't add server-side code
Server-side code is handled by a server, not by a browser, and includes:
- Ruby on Rails
- 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.
What changes can I make with code?
All sites allow for flexibility with custom code, though the available options depend on your plan. If adding custom code, 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.
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:
Custom CSS shouldn't be used to adjust the layout of your site. These site areas shouldn’t be modified with CSS:
- Sizes (blocks, images, or banners)
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?
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:
|Ctrl + V||Command + V|