- Overview
- Step 1: Determine Where Script Should be Placed
- Step 2 (Option 1): Place Script in the <head>
- Step 2 (Option 2): Place Script before </body>
- Step 2 (Option 3): Place Script on Order Confirmation Page
Overview
You've got a sweet script from a third-party, and they told you to put it in a specific location. This article will show you where to stick it.
Determine Where Script Should be Placed
Check with the third-party to find out where the script should be located in the site's HTML. Here are some common locations:
- [1] Head (or Head Tags)
- [2] Bottom of HTML body just before </body>
- [3] Order Confirmation Page
Once you've determined the location, proceed to the corresponding Step 2.
Step 2 (Option 1): Place Script in <head>
The HTML Head is the first part of a page to load. Analytics scripts typically go here. There's two places in the admin that will place a script in the HTML head:
- Settings > Marketing > Analytics Script
- Themes > Edit Theme > Head Tags
The difference is that a script in Analytics Script will be added to the head of every page, regardless of theme. Whereas, Edit Theme > Head Tags adds the script to every page on whatever theme you edited.
Here's what a script in Settings > Marketing > Analytics Script location looks like:
Here's Themes > Edit Theme > Head Tags:
And here's what both look like in the page's source:
Step 2 (Option 2): Place Script Before </Body>
Scripts that modify the look of a page, or insert something onto the page (for example a contact form or chat box) typically go at the bottom of the HTML, just before the ending </body> tag. There's two ways to place a script just before </body>:
1.) By pasting the script into each template in Themes > Edit Theme > Templates:
2.) By using ##INCLUDESCRIPTBOTTOM[/path/to/file.js]## merge code in Head Tags:
##INCLUDESCRIPTBOTTOM[]## can also be used with externally hosted scripts. Notice in the example above, we use the ##THEMEDIR## merge code to fill in the theme's directory in Content > Files.
Here's what both look on a page's source code:
Step 2 (Option 3): Place Script on Order Confirmation Page
The Order Confirmation page is the page shown to the customer directly after placing an order. Order tracking and conversion scripts typically go here because they depend upon order information like order total.
To place a script here, navigate to Settings > Orders General and paste the script in the Place Order Script box:
Scripts that are placed on the Order Confirmation page are usually used in conjunction with Order Based Merge codes such as ##ORDERTOTAL## (which populates an order's grand total). For a full list of order based merge codes, see the Order Based Merge Codes section of What Merge Codes are Available.