How to Add Custom Code with Insert Code: A Step-by-Step Guide
Insert Code allows you to add custom HTML and scripts to enhance your website's functionality. Here's everything you need to know about using this feature effectively:
Key Uses
- Add live chat services
- Implement domain verification
- Install website analytics
- Include third-party integrations
Important Limitations
- Not intended for general content or styling
- CSS should be added via the CSS editor
- Custom code may need to be disabled during editing
- Checkout pages don't support custom code
Adding Code
Header Section:
- Places code in the
<head>
tag - Appears on every page
- Best for meta tags and tracking scripts
Footer Section:
- Inserts before closing
</body>
tag - Appears on every page
- Ideal for chat widgets and analytics
Lock Page:
- Displays above password input field
- Customizes password-protected pages
- Best to use lock screen menu for design
Order Confirmation Page: Available tags:
- {orderId}
- {orderSubtotal}
- {orderSubtotalCents}
- {orderGrandTotal}
- {orderGrandTotalCents}
- {customerEmailAddress}
Order Status Page:
- Same tags as Order Confirmation
- Use {.if firstPageView} for single-trigger scripts
- Accessible after checkout completion
Code Injection on Confirmation Page
Page-Specific Code:
- Hover over page in Pages menu
- Click settings icon
- Select Advanced
- Add custom code for that page only
Best Practices:
- Test code thoroughly before implementation
- Keep backup copies of custom code
- Use CSS editor for styling changes
- Consider mobile responsiveness
- Monitor site performance after adding code
Cookie Banner Integration:
- Enable cookie banner
- Select Opt-In/Opt-Out options
- Add conditional code for third-party services
- Save changes
Troubleshooting:
- Use preview scripts disable feature when needed
- Test in incognito mode
- Add '/safe' to URL for safe editing
- Remove problematic code temporarily
- Seek expert help for complex implementations