Website Code Injection: How to Add Custom HTML and Scripts to Your Site
Code Injection Guide
Use code injection to enhance your site with custom HTML and scripts for features like live chat, domain verification, or analytics.
Important Notes:
- Code injection is for HTML/scripts only, not for content or styles
- For styles, use the Custom CSS Editor instead
- Some features may need to be disabled during site editing
- Surround JavaScript with
<script></script>
tags - Surround CSS with
<style></style>
tags - Checkout pages don't support code injection
Main Injection Points:
- Header
- Injects into
<head>
tag on all pages - Best for meta tags and tracking scripts
- Footer
- Injects before closing
</body>
tag - Ideal for third-party integrations
- Lock Page
- Appears above password field on locked pages
- Recommended: Use Lock Screen panel instead
- Order Confirmation Page
- Displays after gift cards/memberships purchases
- Supports customer-specific tags:
{orderId}{orderSubtotal}{orderSubtotalCents}{orderGrandTotal}{orderGrandTotalCents}{customerEmailAddress}
- Order Status Page
- Shows after physical/digital product purchases
- Supports same tags as confirmation page
- Use
{.if firstPageView}for single-run scripts
Adding Code:
- Open Code Injection panel
- Insert valid HTML/scripts in appropriate fields
- Click Save
Cookie Banner Integration:
- Enable cookie banner in Cookies & Visitor Data panel
- Select "Opt in & out" type
- Add integration code
- Save changes
Gray box with custom Instagram link
Per-Page Injection:
- Access through page settings (⚙️ icon)
- Available for individual pages and blog posts
- Varies by site version
Troubleshooting:
- Use "Disable Scripts in Preview" when editing
- Test custom code in incognito/private window
- Remove problematic code temporarily if issues persist
- Follow best practices for custom code implementation
Remember to always test your injected code thoroughly and keep backups of your modifications.