Code Blocks: Adding Custom Code to Your Pages

A Code Block allows you to enhance your site with custom HTML, Markdown, CSS, JavaScript, and third-party widgets. It's ideal for customizations that can't be achieved through standard blocks.

Adding a Code Block:

1. Click [Add Block] while editing
2. Select [Code]
3. Click the pencil icon to open the editor
4. Enter your code in the text field

Working with Different Code Types:

• Select HTML or Markdown from the Type menu
• For CSS: Wrap code in
• For JavaScript: Wrap code in <script> tags
• Toggle "Show Source" to display formatted code snippets

Important Tips:

• Preview embedded items using "View in Safe Mode"
• Remove pages from index if code doesn't render
• Disable Ajax to troubleshoot loading issues
• Use Safe Mode to edit problematic code

Troubleshooting Solutions:

• Test code outside of index pages
• Check Ajax loading conflicts
• Use preview mode with scripts disabled
• Contact widget providers for specific support
• Consider consulting Squarespace Experts

Best Practices:

• Follow code-based customization guidelines
• Test thoroughly before publishing
• Keep backups of your custom code
• Ensure code is compatible with your site's structure
• Monitor site performance after adding custom code

For complex customizations, consider working with a Squarespace Expert or consulting the Squarespace Forum for community support.

Related Articles

Previous Articles