Inserting Custom Code: A Guide to Website HTML and Scripts Integration

By Michael Chen

December 12, 2024 at 01:36 PM

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:

  1. Open the "Insert Code" menu
  2. 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
  3. Click Save

Cookie Banner Integration:

  1. Activate cookie banner in Cookies & Visitor Data menu
  2. Select Opt-In/Opt-Out banner type
  3. Add required integration code

Available Order Tags:

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

Code Injection on Confirmation Page

Code Injection on Confirmation Page

Adding Code to Individual Pages:

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

Related Articles

Previous Articles