How To Add Code To Your <head> Section In Shopify

Feb 12, 2024

Adding code or scripts (sometimes called snippets)  to the <head> area in Shopify isn't as a scary as it seems.

You'll sometimes need to do this when adding third party scripts, like tracking or analytics scripts, or when verifying your domain for Facebook, or Google.

Step 1 - Duplicate Your Live Theme

When working on your Theme's code, it's always good practise to duplicate it so you have a back up in case anything accidentally breaks.

  1. Navigate to Online Store > Themes
  2. In 'Current Theme' select the Actions drop down
  3. Select Duplicate
  4. It will take Shopify a minute or so to finish duplicated your live theme.
Click Duplicate to create a duplicate version of your live theme that we will work on safely.

---

Side Note - Theme Naming Conventions

If you're working with a developer, they'll likely have their own naming conventions. If it's just you, I recommend using a system like the below:

"MyTheme - LIVE"

This is always your current live theme

"MyTheme- DEV"

This is a duplicate of your live theme with any extra changes you have made. ie. Your 'work in progress' theme.

"MyTheme - BACKUP 04-05-21"

After a DEV theme is published, you rename it the LIVE theme. The previous LIVE theme becomes the new BACKUP (ie. a backup of your theme before you published your changes)

1. current DEV -> new LIVE
2. old LIVE -> new BACKUP
3. duplicate of new LIVE -> new DEV
4. repeat

As you work on, and publish new changes, you rename each theme per the conventions so you always know - which theme is live, which theme you are working on, and which theme you can quickly roll back to if something breaks.

---

Step 2 - Edit Code

  1. Navigate to Online Store > Themes
  2. Find your newly duplicated theme, select the Actions drop down
  3. Select Edit Code

This will open up a new area where you can view almost all of the code files that power your store.

Click Edit code to be taken to the area where directly edit your code files for that version of the theme.

---

Step 3 - Edit theme.liquid and add your snippet

  1. Find the theme.liquid file (under Layout)
  2. In your theme.liquid file, hit CMD + F (Mac) or CTRL + F (Windows) to open up a search bar
  3. Enter </head> in the search
    Be sure to include the / in </head>, without the / is <head> and this is the opening tag. If you put code above this, it won't work.
  4. This will take you to the closing tag, or the end of <head> section of your code. Generally, you want to put all your snippets, just above this closing tag.
  5. Add your snippet by copy and pasting it on the line directly above the </head> tag.
    If there's code directly above it, just add in extra lines between them with the ENTER or RETURN key.
  6. Ensure you don't overwrite, or remove any other little bits of code. Removing a single < or > accidentally can actually cause the code (ie. your site) to no longer function.
  7. Hit Save
  8. You can also hit the 'Older versions' link that appears at the top if you need to rollback to a previous version of this file, in case something goes awry.
Open theme.liquid and find the </head> tag, then add your snippet just above it

---

Step 4 - Preview Your Duplicated Development Theme

  1. Navigate to Online Store > Themes
  2. Find the duplicated theme you've been working, select the Actions drop down
  3. Select Preview

This will open up a preview of that theme on your store for you to check over before publishing it. If it all looks fine, then you did a great job!

---

Step 5 - Publish The Duplicated Development Theme

  1. If all looks good above, hit Actions > Publish on the theme you've been working on.
  2. It will take Shopify a few moments and the duplicated theme will move to the 'Current Theme' slot.
  3. You can then rename as discussed above.
  4. Rename ThemeName - PRODUCTION to ThemeName - BACKUP xx-xx-xx (put the date there)
    As it's now your backup theme
  5. Rename ThemeName - DEVELOPMENT to ThemeName - PRODUCTION
    As it's now your live/production theme
  6. Duplicate the new ThemeName - PRODUCTION and rename it to ThemeName - DEVELOPMENT
    So you'll have a new copy to work on when you need to make more changes.
    *Make sure your DEVELOPMENT theme is an exact, up to date, duplicate of your production theme before starting new work on it.