A solid understanding of custom code can significantly enhance your Squarespace website's functionality and appearance. Here's what you need to know about implementing custom code effectively.

Custom code capabilities vary by plan but typically include:

• CSS for styling
• HTML for content structure
• JavaScript for interactive features
• Markdown for content formatting

Code Blocks vs. Embed Blocks:

Code blocks are ideal for advanced customization and can handle:

• Custom HTML/CSS/JavaScript
• MLS searches
• Document embedding via services like Issuu
• Complex styling modifications

Embed blocks are better for simple third-party content integration like:

• Social media posts
• Videos from external hosts
• Basic widget embedding

Important Considerations:

1. CSS Customization:

• Suitable for: fonts, colors, backgrounds
• Avoid using for: padding, margins, float, sizes, alignment
• Character limit: 128,000

2. Security Notes:

• Custom code may not display while logged in
• Test implementations in a private browser
• Index pages may affect code rendering
• Ajax loading can conflict with custom code

Troubleshooting Tips:

If code isn't displaying:

1. Refresh your browser
2. Test in an incognito window
3. Remove pages from index if necessary
4. Disable Ajax loading if conflicts occur

For CORS errors:

• Ensure requests originate from server-side
• JavaScript browser requests may face CORS restrictions

Recommended Learning Resources:

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

Remember: Adding custom code is an advanced modification that falls outside standard support. Consider hiring a Squarespace Expert if you lack coding expertise.

Related Articles

Previous Articles