How to Use Code Injection for Custom Scripts and HTML Integration
Code injection allows you to enhance your site by adding HTML code and custom scripts. Here's how to use it effectively:
Basic Usage
Code injection lets you add various elements like messaging services, domain verification, analytics tools, and other custom functionality to your site. Note that it's not meant for content or styling - use Pages for content and Custom CSS Editor for styles.
Adding Code
To inject code:
- Open the Code Injection panel
- Add valid HTML or scripts in appropriate fields (header, footer, etc.)
- Click Save
JavaScript code must be wrapped in
<script>tags, while CSS should ideally go in the Custom CSS Editor.
Key Injection Areas
Header
- Injected into
<head>
tag on every page - Affects entire site
Footer
- Injected before closing
</body>
tag - Appears on all pages
Lock Page
- Displays above password field on protected pages
- Better to use Lock Screen panel for customization
Order Confirmation & Status Pages
- Supports customer-specific tags:
- {orderId}
- {orderSubtotal}
- {orderGrandTotal}
- {customerEmailAddress}
Malicious code injection warning
Page-Specific Injection
To add code to individual pages:
- Hover over page in Pages panel
- Click the settings icon
- Select Advanced
- Add code in Page Header Code Injection
Cookie Banner Integration
For third-party integrations:
- Enable cookie banner in Cookies and Visitor Data panel
- Select Accept/Reject banner type
- Add necessary integration code
- Save changes
Important Notes:
- Disable scripts in preview when troubleshooting
- Payment pages don't support code injection
- Ajax loads may affect CSS in code injection
- Blog post injection appears differently based on template version
- Code won't appear on Index landing pages
For best results, consult documentation specific to your integration needs and test thoroughly before deployment.
Related Articles
Developer Tools: A Guide to Advanced Website Settings and Security Features
