How to Add Custom Header and Footer Code to Your Storefront

To enhance your Storefront by adding tools like Google Analytics, chat widgets, or custom meta tags to improve SEO. The Custom Code feature allows you to insert your own scripts or tags into the header or footer of your Storefront to achieve this.

What You Can Do with Code Injection

• Add analytics tools (e.g., Google Analytics)
• Embed live chat or support widgets
• Improve SEO with custom meta tags
• Integrate third-party services with JavaScript

How It Works

You can insert code snippets into two areas of your Storefront:

• Header: For things like meta tags or tracking scripts
• Footer: For chat widgets, support tools, or scripts that load after the page content

Each area has a dedicated text box for your code, along with a toggle to enable or disable the code injection.

Step-by-Step Instructions

1. Access the Custom Code Settings

• Log in to Storefront.
• Navigate to: Storefront > Settings > Advanced Settings

2. Insert Your Code

• You'll see two text fields: Header and Footer
• Paste your code snippet into the appropriate field
  • Header: Inserted just before the </head> tag
  • Footer: Inserted just before the </body> tag

3. Enable or Disable the Code

• Each section has an Enable/Disable toggle at the top of the box
• When enabled, your code will be live on the Storefront
• When disabled, your code is saved but won’t be shown to visitors

4. Save Your Changes

• Click Save to apply your changes
• Your code will immediately affect your Storefront if toggled on

Helpful Tips

• We recommend using code from trusted sources only.
• Syntax matters! Unclosed tags or errors can break your Storefront.
• Use proper formatting for HTML, CSS, or JavaScript.
• Need a tool to help? We suggest CodeMirror for writing and testing code.
• You can preview code in the Storefront Test Environment before applying the changes to your live Storefront.

Limitations & Safety Notes

• There is no strict character limit, but extremely large scripts may be truncated by backend limits.
• Disabling a section removes it from your live site but keeps your code saved in the editor.
• Storefront will not validate the code for errors, so double-check before saving.

Was this article helpful? If not please submit a request here