Creating custom meta tags

From Spiffy Stores Knowledge Base

Revision as of 10:36, 4 July 2016 by Shawn (talk | contribs)

Please note that we do not recommend using this method. You are now able to edit your title and description tags on all pages, products, collections, and blog articles.

Some store owners prefer to override the meta tags that are displayed in their store, and use custom meta tags for their Home Page, Collection pages and Product pages.

This is a quick tutorial on how you can quickly create custom meta tags for individual pages without changing the meta tags on all of your pages at once.

This tutorial assumes that you have a basic knowledge of HTML. If you do not, then you should find someone who does, or contact us for paid support. Spiffy Stores will not provide free support on how to edit your meta tags other than to provide these instructions on how to "hack" the built-in meta tag engine.


Step 1.

Create a text file called _meta_tags.liquid and save it somewhere on your computer.


Step 2.

Copy the text below and paste it into your text file, make whatever edits you need, and then save it.

The first section is for the meta tags for your home page. The second section is for product pages, and other page types follow after that.

You will notice that we are matching product, collection, and pages to their corresponding handle.

The handle of a product can easily be found out by viewing the product on the store. e.g. If the address of the product page is http://demostore.spiffystores.com/products/hello-there then it's handle will be "hello-there".

Similarly, you can find out the handle of a collection by viewing the collection in the store. e.g. If the address of the collection page is http://demostore.spiffystores.com/collections/purple-widgets then it's handle will be "purple-widgets".

After a custom meta tag has been added, we then tell the liquid engine that we are using a custom meta tag by assigning the value "true" to the "custom_tag" variable. If the "custom_tag" variable is set to "false", we use the default meta tags that are generated by your store.

{% assign custom_tag = false %}

{{# meta tags for home page }}

{% if template == "index" %}
   <title>Add your home page title here</title> 
   <meta name="description" content="Add your description text here"/>  
   <meta name="keywords" content="Add your keywords separated by commas"/>    
   {% assign custom_tag = true %}
{% endif %}



{{# meta tags for specific product pages }}

{% if template == "product" %}

  {% if product.handle == "enter-your-product-handle-here" %}
    <title>Add your special product page title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

  {% if product.handle == "enter-another-product-handle-here" %}
    <title>Add your special product page title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

{% endif %}



{{# meta tags for specific pages }}

{% if template == "page" %}

  {% if page.handle == "enter-your-page-handle-here" %}
    <title>Add your page title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

  {% if page.handle == "enter-another-page-handle-here" %}
    <title>Add your page title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

{% endif %}



{{# meta tags for specific collection pages }}

{% if template == "collection" %}

  {% if collection.handle == "enter-your-collection-handle-here" %}
    <title>Add your collection title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

  {% if collection.handle == "enter-another-collection-handle-here" %}
    <title>Add your collection title here</title>
    <meta name="description" content="enter your description here"/>  
    <meta name="keywords" content="enter your keywords separated by commas"/>
    {% assign custom_tag = true %}
  {% endif %}

{% endif %}


{% if custom_tag == false %}

  <title>{{shop.name}} — {{page_title}}</title>
  {{ header.description }}
  {{ header.keywords }}

{% endif %}

{{ header.author }}
{{ header.copyright }}

Step 3.

Upload the _meta_tags.liquid file in the "Design & assets -> Theme editor" section of your Toolbox. Ensure after you've uploaded it that it appears in the "Theme Snippets" section of the Theme Editor page.


Step 4.

Edit your Theme.liquid file, and replace your Title, Keywords, Author, and Description meta tags with the liquid tag below. If your theme only includes the tag "{% include 'headers' %}", that tag should also be replaced with the tag below.

{% include 'meta_tags' %}

Step 5.

You should now edit your "_meta_tags.liquid" file, and enter all of the meta tags you want to have in your store. At the very least you should set the title, description, and keywords for your home page... as if you don't do this, your home page will show up with the title "Add your home page title here".

After you've saved your changes, you can now make any edits to your _meta_tags.liquid file whenever you like. Any changes you make can be tested by viewing the source of the pages in your storefront.


For more information about the liquid tags that have been used in this tutorial, please refer to the Liquid Tag Reference.

Further Reference