Code insertion allows you to enhance your site with custom HTML and scripts. Here's a comprehensive guide on how to use it effectively:

Code Insertion Overview

Code insertion lets you add HTML and scripts for features like live chat services, domain verification, and site analytics. It's not meant for content addition or styling - use Page and Content Basics for content and the Custom CSS Editor for styles.

Important Notes:

• JavaScript must be wrapped in
• CSS should go in the Custom CSS Editor
• Code may need to be disabled during site editing
• Checkout pages don't support code insertion

Adding Custom Code

To insert custom code:

1. Open the Code Insertion Panel
2. Add HTML or scripts to appropriate fields
3. Click Save

Main Insertion Areas:

• Header: Injected into tag
• Footer: Added before closing tag
• Lock Page: Appears above password field
• Order Confirmation Page: Shows after completed purchases
• Order Status Page: Displays order confirmation details

Cookie Banner Integration

To integrate third-party code with cookie consent:

1. Enable cookie banner in Cookies and Visitor Data panel
2. Select "Opt in & out" banner type
3. Add conditional code based on user consent

Order Tracking Tags

Available tags for order pages:

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

Page-Specific Code

To add code to specific pages:

1. Hover over page in Pages panel
2. Click gear icon
3. Select Advanced
4. Add code to page header or blog post fields

Troubleshooting Tips

If code interferes with editing:

1. Use "Disable scripts in preview" option
2. Test in incognito/private window
3. Temporarily remove custom code while troubleshooting
4. Add "/safe" to edit URL if needed

Best Practices:

• Test code thoroughly before implementation
• Keep backup copies of custom code
• Use appropriate code placement for desired functionality
• Monitor site performance after adding custom code

Related Articles

Previous Articles