Custom Meta Descriptions, Meta Keywords, and Title Tags in Shopify
// November 21st, 2007 // No Comments » // SEO, Shopify, Web Builders, eCommerce
UPDATED:
Shopify can be a great web builder, especially if you want complete product control and full customization to the template. The programming language in Shopify is mainly written in Ruby On Rails. Unfortunately, Shopify doesn’t have a way to do custom meta and title tags built in. However, with some tweaking having your own custom meta tags and title tags is possible. Similar directions can be found in Shopify’s forums where other great insights can be found. Well, with that said, here are the directions for doing this:
1. Login to your Shopify administration.
2. Now click on “Assets” and then click on “Theme Editor”.
3. You will need to edit some things in your template for this to work correctly. Click on “Theme.liquid” to go into the edit page for your main theme file.
4. On this page you will see something like this near the top of the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{shop.name}} - {{page_title}}</title>
{{ 'textile.css' | global_asset_url | stylesheet_tag }}
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
{{ 'prototype.js' | global_asset_url | script_tag }}
{{ 'effects.js' | global_asset_url | script_tag }}
{{ 'lightbox.js' | global_asset_url | script_tag }}
{{ 'layout.css' | asset_url | stylesheet_tag }}
{{ 'shop.js' | asset_url | script_tag }}
{{ content_for_header }}
</head>
You will need to DELETE the code that says:
<title>{{ shop.name }} | {{ page_title }}</title>
5. Now add the code the following code between your <head></head> tags:
{% case page_title %}
{% when 'Welcome' %}
<title>Title for your home page</title>
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="Your keywords go here" />
{% when 'Page Name' %}
<title>Title for your home page</title>
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="Your keywords go here" />
{% endcase %}
Replace in the “Page Name” with the name of your page or product exactly as it is named. For example, if I had the page called “The Elephant ate Here” I would replace “Page Name” with “The Elephant ate Here”. You will also want to place your meta own descriptions and meta keywords for the appropriate page.
So, the examples here would then look something like this:
{% case page_title %}
{% when 'Welcome' %}
<title>Title for your home page</title>
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="Your keywords go here" />
{% when 'The Elephant ate Here' %}
<title>The Elephant ate Here | and there is nothing left</title>
<meta name="description" content="The elephant ate everything that was here. There is now nothing left." />
<meta name="keywords" content="elephant, ate here, nothing left, all gone" />
{% endcase %}
You can repeat the following code for each page or product that you would like as well:
{% when 'Page Name' %}
<title>Title for your home page</title>
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="Your keywords go here" />
Click “Save” when finished and then click on “Close” next to the save button to go back to the Theme Editor page.
