Code injection is a powerful tool that allows you to enhance your site with custom HTML and scripts. Here's how to use it effectively:

Usage Guidelines:

• Use code injection for adding HTML and scripts like live chat services, domain verification, or analytics
• Don't use it for adding content or styles (use Pages for content and Custom CSS Editor for styles)
• JavaScript code must be wrapped in tags
• CSS code must be wrapped in tags

Main Injection Points:

Header

• Adds code to the tag on every page
• Best for third-party integrations and tracking scripts

Footer

• Adds code before the closing tag
• Ideal for elements that should load after the page content

Lock Page

• Displays above the password field on password-protected pages
• Recommended to use Lock Screen panel instead for better customization

Order Confirmation Page Available tags:

• {orderId}
• {orderSubtotal}
• {orderSubtotalCents}
• {orderGrandTotal}
• {orderGrandTotalCents}
• {customerEmailAddress}

Order Status Page

• Same tags as Order Confirmation Page
• Use {.if firstPageView} and {.end} tags to control script execution

Per-Page Injection

1. Hover over page in Pages panel
2. Click the settings icon
3. Select Advanced
4. Add code to Page Header Code Injection
5. For blogs, use Post Blog Item Code Injection

Important Notes:

• Disable scripts in preview if experiencing editing issues
• Checkout pages don't support code injection
• Ajax loading may affect CSS in code injection
• Test thoroughly after implementation

Cookie Banner Integration:

1. Enable cookie banner in Cookies & Visitor Data panel
2. Select Opt in & out banner type
3. Add necessary third-party integration code
4. Test visitor consent functionality

Remember to back up your code before making changes and verify functionality across different devices and browsers.

Related Articles

Previous Articles