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

Key Points:

• Use code injection for adding HTML scripts, analytics, or third-party integrations
• Don't use it for content or styles (use Custom CSS editor instead)
• JavaScript must be wrapped in
• CSS should be added through the Custom CSS editor

Locations for Code Injection:

1. Header

• Inserts into tag
• Affects all site pages

2. Footer

• Inserts before closing tag
• Applies site-wide

3. Lock Page

• Appears above password field
• For password-protected pages

4. Order Confirmation Page

• Displays after gift card, membership, or subscription purchases
• Supports customer-specific tags:
  • {orderId}
  • {orderSubtotal}
  • {orderGrandTotal}
  • {customerEmailAddress}

5. Order Status Page

• Shows after physical goods/digital products purchase
• Includes same tags as confirmation page
• Use {.if firstPageView} for one-time tracking scripts

Adding Code:

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

Page-Specific Injection:

1. Hover over page in Pages panel
2. Click Advanced Settings
3. Add code in "Code Injection into Page Header"

Important Notes:

• Cookie banner integration available for third-party scripts
• Preview mode may require script disabling for safe editing
• Checkout pages don't support code injection
• Blog post injection varies by template version
• Always test code in preview before publishing

Best Practices:

• Use Custom CSS editor for styling
• Test thoroughly before implementation
• Follow platform-specific guidelines
• Consider mobile responsiveness
• Keep code organized and documented

Related Articles

Previous Articles