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

Key Areas for Code Injection

1. Header

• Injected into the tag on every page
• Perfect for site-wide scripts and tracking codes

2. Footer

• Added before the closing tag
• Ideal for chat widgets and other site-wide elements

3. Lock Page

• Appears above the password field on protected pages
• Best managed through the Lock Screen panel

4. Order Pages

• Order Confirmation Page: Displays after gift card/membership purchases
• Order Status Page: Shows payment confirmation for physical/digital products

Available Customer Tags:

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

Best Practices

1. Code Format

• Wrap JavaScript code in
• Use Custom CSS Editor instead of code injection for styles
• Add CSS in

2. Cookie Banner Integration

• Enable cookie banner in Cookies and Visitor Data panel
• Use Acceptance and Refusal type for consent options
• Integrate third-party codes with cookie consent

3. Page-Specific Injection

• Access through Pages panel > Advanced settings
• Available for individual pages and blog posts
• Appears differently based on site version (7.0 or 7.1)

Troubleshooting

1. Disable Scripts in Preview

• Use when making site changes
• Add /safe to editing URL if needed
• Visitors won't see preview-related messages

2. Common Issues

• Ajax loads may affect CSS loading
• Payment pages don't support code
• Header transparency can affect HTML display

Remember to regularly test your injected code and keep backups before making significant changes.

Related Articles

Previous Articles