How to Add Custom Code with Insert Code: A Step-by-Step Guide

By Michael Thompson

December 12, 2024 at 01:36 PM

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

Code Injection on Confirmation Page

Page-Specific Code:

  1. Hover over page in Pages menu
  2. Click settings icon
  3. Select Advanced
  4. 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:

  1. Enable cookie banner
  2. Select Opt-In/Opt-Out options
  3. Add conditional code for third-party services
  4. 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

Related Articles

Previous Articles