Inserting Custom Code: A Guide to Website HTML and Scripts Integration
Here's how to use "Insert Code" to add custom HTML and scripts to your website:
Insert Code allows you to add functional elements like live chat services, domain verification, and analytics to specific areas of your website. This feature is meant for scripts and HTML, not for content or styling.
Important Notes:
- Scripts may need to be disabled while editing your website
- JavaScript must include proper
<script>
tags - CSS should be added via the CSS editor instead
- Checkout pages don't support custom code
- Ajax loading may prevent CSS from loading properly
Adding Custom Code:
- Open the "Insert Code" menu
- Add valid HTML/scripts to desired sections:
- Header (appears in
<head>
tag) - Footer (appears before closing
</body>
tag) - Lock page (shows above password field)
- Order confirmation page
- Order status page
- Header (appears in
- Click Save
Cookie Banner Integration:
- Activate cookie banner in Cookies & Visitor Data menu
- Select Opt-In/Opt-Out banner type
- Add required integration code
Available Order Tags:
- {orderId}
- {orderSubtotal}
- {orderSubtotalCents}
- {orderGrandTotal}
- {orderGrandTotalCents}
- {customerEmailAddress}
Code Injection on Confirmation Page
Adding Code to Individual Pages:
- Hover over page in Pages menu
- Click settings icon
- Select Advanced
- Add code to Page Header Code Injection
Preview Safety:
- Disable scripts in preview mode if editing issues occur
- Add "/safe" to URL for safe editing
- View custom code in incognito window
- Remove problematic code during troubleshooting
Best Practices:
- Use CSS editor for styling
- Test code thoroughly before implementation
- Follow platform guidelines
- Consider hiring an expert for complex customizations