How to Add Custom Code with Embed Code: A Guide to Embedding HTML & Scripts

By Michael Turner

December 12, 2024 at 01:36 PM

Custom HTML and Scripts Integration Guide

Add custom HTML or scripts to enhance your website's functionality through the "Embed Code" feature. This tool allows integration of live chat services, domain verification, analytics, and other third-party services.

Key Considerations:

  • Use for functionality, not content or styling
  • Include proper HTML/JavaScript tags
  • CSS should be added via CSS editor
  • Code may need disabling during website editing
  • Checkout pages don't support custom code

Adding Code Locations:

  1. Header
  • Inserts into tag on all pages
  • Best for meta tags and analytics
  1. Footer
  • Appears before tag
  • Ideal for tracking scripts and widgets
  1. Lock Page
  • Displays above password input field
  • Recommended to use lock screen menu for design
  1. Order Confirmation Page Available Tags:
  • {orderId}
  • {orderSubtotal}
  • {orderSubtotalCents}
  • {orderGrandTotal}
  • {orderGrandTotalCents}
  • {customerEmailAddress}
  1. Order Status Page
  • Same tags as confirmation page
  • Use {.if firstPageView} for single-execution scripts

Cookie Banner Integration:

  1. Enable cookie banner
  2. Select Opt-In/Opt-Out type
  3. Add required integration code
  4. Save settings

Code Injection on Confirmation Page

Code Injection on Confirmation Page

Page-Specific Code:

  • Access via Pages menu > Advanced
  • Add custom header code per page
  • Blog posts support custom code injection
  • Not visible on index landing pages

Troubleshooting:

  • Use /safe URL suffix for secure editing
  • Disable preview scripts if needed
  • Test in incognito mode
  • Remove problematic code temporarily

Best practices:

  • Follow coding standards
  • Test thoroughly
  • Keep backup of original code
  • Monitor performance impact
  • Regular maintenance and updates

Related Articles

Previous Articles