Code injection lets you enhance your site by adding custom HTML and scripts to specific areas. Here's a comprehensive guide on how to use it effectively:

Code Injection Locations

• Header: Adds code to the tag on all pages
• Footer: Inserts code before the tag on all pages
• Page-specific: Adds code to individual pages
• Lock Screen: Displays code above password fields
• Order Confirmation/Status Pages: Shows transaction-specific information

Best Practices

• Wrap JavaScript in
• Use the CSS editor instead of code injection for styles
• Consider Ajax loading limitations with CSS code
• Note that payment pages don't support custom code

Adding Code

1. Open Code Injection panel
2. Insert valid HTML/scripts in appropriate fields
3. Click Save

Cookie Banner Integration

1. Enable cookie banner in Cookies and Visitor Data panel
2. Select Accept/Reject banner type
3. Add necessary integration code
4. Save changes

Order Status Page Tags

• {orderId}: Order number
• {orderSubtotal}: Order subtotal
• {orderSubtotalCents}: Subtotal in cents
• {orderGrandTotal}: Final total
• {orderGrandTotalCents}: Final total in cents
• {customerEmailAddress}: Customer email

Troubleshooting

• Disable scripts in preview for safe editing
• Type /safe at end of URL to bring up disable message
• Use incognito/private window to view custom code
• Remove problematic code temporarily for troubleshooting

For complex customizations, consider consulting a Squarespace Expert or exploring premium plans for additional features.

Related Articles

Previous Articles