How to Add Custom Code to Your Squarespace Website: A Complete Guide
Custom code allows you to enhance your site's functionality and appearance beyond built-in features. Here's what you need to know about implementing custom code effectively.
Types of Supported Code:
- HTML (for adding content and structure)
- CSS (for styling and design, limited to 128,000 characters)
- JavaScript (for interactive features)
- Markdown
Note: Server-side code like PHP, Ruby, and SQL is not supported.
Adding Custom Code:
- Use Code Blocks for advanced customizations
- Use Embed Blocks for basic third-party content (uses oEmbed Standard)
CSS Customization Options:
- Fonts
- Colors
- Backgrounds
Avoid using CSS for:
- Padding
- Margins
- Floats
- Size adjustments
- Alignment
Troubleshooting Common Issues:
If code isn't displaying:
- Refresh your browser
- Test in private browsing mode
- Check if the code is in an index page
- Verify Ajax loading settings
If you can't paste code:
- Use keyboard shortcuts
- Check for formatting issues
CORS Errors:
- All requests must come from server-side applications
- JavaScript browser requests may trigger CORS errors
Recommended Learning Resources:
- W3Schools
- Codecademy
- Mozilla Developer Network
- Stack Overflow
- Shay Howe
- SitePoint
- Treehouse
Important Considerations:
- Custom code is an advanced modification
- Acquire coding knowledge before implementation
- Code changes may conflict with built-in features
- Consider hiring a Squarespace Expert if needed
- Test all custom code thoroughly before deployment
Remember: Custom code implementation is outside the scope of standard support. For technical assistance, visit the Squarespace Forum or join Squarespace Circle if you've built three or more active sites.