How to add a meta tag to your shopify pages

Jul 21 2016

What are meta tags

Meta tags are, as the name suggests, pieces of html that you add to your web pages to provide meta data. In other words, meta tags describe your web page and can include things like who authored the page, the keywords to associate with the page, a general description of the page and various other pieces of data that apply to your web page but aren’t necesary for the end user to see

Why you might want to add meta tags to your shopify page

Meta tags are sometimes used to verify the ownership of a site. For example, if you want to hook up a Pinterest business account to your Shopify shop, Pinterest will ask you to add a meta tag to your site; the assumption being that only the owner of the site will have access to the underlying html and if you manage to shoe-horn your meta tag in, you’ve basically proven that you own the site.

How to add a meta tag to your Shopify page

The process of adding a meta tag to your Shopify site is pretty simple. It does, however, require you edit the template. Be warned, you’ll be diving into the actual code of your chosen theme and modifying that. This can seem scary, but it’s pretty simple in reality, and all you are doing is editing text.

Log in to Shopify, click on the Online Store under Sales Chanel in the left hand menu.

Navigating to the theme {: .center-block}

A secondary menu should slide in and Themes should already be selected for you. If not, click on Themes.

Secondary menu {: .center-block}

Take a backup

It’s always a good idea to backup your theme in case you break something so click on the elipses(three dots) towards the right hand side of the page near the Customize theme button and select Download theme to get a backup emailed to you.

Edit the html/css

Now you have your backup, click on the elipses again and this time select Edit HTML/CSS.

Edit html/css {: .center-block}

You’ll see a file listing in and a helpful message saying ‘Pick a file from the left sidebar to start editing’.

In general, you’ll need to edit a file called theme.liquid. Shopify uses a special type of markup or templating language which gets converted into HTML, which is why the file has a .liquid extension. These template files are a combination of HTML and essentially ruby code which allows for things like loops and other coding constructs not normally available in plain HTML.

HTML pages (and by extension, liquid templates) contain various sections which are contained within opening and closing tags. One of these sections is called the head. As it’s name implies, the head section sits at the top of the page and it’s here that meta tags are inserted. If you look at the template for your site, you’ll probably already have a few meta tags. That’s great.

To inlude your Pinterest meta tag, just copy the meta tag that Pinterest has supplied you and insert it somewhere between the <head> and </head> tags. If you have a few meta tags in your document, that’s great, just paste your new one in below those and hit the Save button.

The Pinterest meta tag will probably look something like

<meta name="p:domain_verify" content="987e54321234a678909f7654321234"/>

Below you can see an example of the first few lines of a liquid template with a Pinterest meta tag included and highlighted in yellow.

Add meta tag to liquid template {: .center-block}

Remember to save your work.