Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Code Injection

You can add custom code and scripts to your site using the Code Injection area in Advanced Settings.

Before you begin

  • If you add code to Code Injection, we may ask you to disable it while editing your site. To learn more, visit Disabling scripts in preview.
  • Code Injection changes you make while on the Developer Platform may disappear if you ever disable Developer Mode. If you might disable Developer Mode later, we recommend backing up your code in a plain text editor.
  • To add CSS to a Code Injection field, surround the code with <style></style> tags. To add JavaScript, surround the code with <script></script> tags.

When to use Code Injection

Use Code Injection to add HTML and scripts that enhance specific parts of your site. These might include Google Translate, live chat services, domain verification for custom email services, or site analytics.

Code Injection isn't intended for adding content or styles. To add content to your site, visit Building a page. To add custom CSS for styles, use the Custom CSS Editor.

Step 1 - Open Code Injection

In the Home Menu, click Settings, click Advanced, and then click Code Injection.

Step 2 - Add HTML code

Add valid HTML or scripts into the appropriate Code Injection fields.

Header

Code added here is injected into the <head> tag on every page in your site.

Footer

Code added here is injected into the <footer> tag on every page in your site.

The <footer> tag comes before the closing </body> tag.

Note: The footer area is defined by your template.

Lock page

The lock screen appears when a page or site is hidden behind a site-wide or page password. Code injected here displays above the lock screen's password field.

Although you can add code to this field, we recommend you use the Lock Screen panel to design your lock page instead. That panel allows you to add a background image or slideshow, adjust font styles, incorporate your logo, and more.

Order confirmation page

Code added here is injected into the order confirmation page that appears after a customer checks out. This works well for adding third-party tracking and affiliate programs to your store.

There are six tags you can use to insert information specific to the customer:

  • {orderId} – The unique ID of the confirmed order
  • {orderSubtotal} – The subtotal of the confirmed order
  • {orderSubtotalCents} – The subtotal of the confirmed order, in cents
  • {orderGrandTotal} – The grand total of the confirmed order
  • {orderGrandTotalCents} – The grand total of the confirmed order, in cents
  • {customerEmailAddress} – The customer's email address, as it was entered in the "Billing Info" section

Step 3 - Save

After adding your code, click Save.

Per-page Code Injection

You can also inject code into a specific page:

  1. Open the page while in the Pages panel.
  2. Hover over the content area.
  3. Click Settings.
  4. In the Page Settings window, click Advanced in the top-right corner.

Page Header Code Injection adds code to the <head> tag of that page. 

In Blog Page Settings, Post Blog Item Code Injection adds code to every blog post.

  • Depending on your template, it will appear above or below the post content.
  • In templates with the Grid/stacked Blog Page, the code displays on the blog landing page and not on individual posts. 

page-settings.png

Note: Adding or modifying code on your site is an advanced modification. We highly recommend that you have coding knowledge to use Code Injection. While we can't offer more help on this topic, there are many resources available that can point you in the right direction:

Was this article helpful?
45 out of 78 found this helpful
Using Code Injection