Shopify: How To Program Dynamic Theme Titles and Meta Descriptions for SEO using Liquid

If you’ve been reading my articles the last few months, you’ll notice that I’ve been sharing a lot more about ecommerce, especially with regard to Shopify. My firm has been building out a highly customized and integrated Shopify Plus site for a client. Rather than spending months and tens of thousands of dollars on building a theme from scratch, we talked the client into allowing us to use a well-built and supported theme that was tried and tested. We went with Wokiee, a multipurpose Shopify Theme that has a ton of capabilities.

It still required months of development to incorporate the flexibility we needed based on market research and our clients’ feedback. At the core of the implementation was that Closet52 is a direct-to-consumer ecommerce site where women would be able to easily buy dresses online.

Because Wokiee is a multipurpose theme, one area we’re highly focused on is search engine optimization. Over time, we believe that organic search will be the lowest cost per acquisition and shoppers with the highest intent to purchase. In our research, we identified that women shop for dresses with 5 key decision influencers:

• Styles of dresses
• Colors of dresses
• Prices of dresses
• Free Shipping
• Hassle-Free Returns

Titles and meta descriptions are critical at getting your content indexed and displayed properly. So, of course, we want a title tag and meta descriptions that have those key elements!

• The title tag in a your page heading is critical to ensure your pages are indexed properly for the searches of relevance.
• The meta description is displayed in search engine result pages (SERPs) that provides additional information that entices the search user to click through.

The challenge is that Shopify often share titles and meta descriptions across different page templates – home, collections, products, etc. So, I had to write some logic to dynamically populate the titles and meta descriptions properly.

Optimize Your Shopify Page Title

Shopify’s theme language is liquid and it’s quite good. I won’t get into all of the details of the syntax, but you can dynamically generate a page title pretty easy. One thing you have to keep in mind here is that products have variants … so incorporating variants into your page title means that you have to loop through the options and dynamically build the string when the template is a product template.

Here’s an example of a title for a plaid sweater dress.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

And here’s the code that produces that result:

{%- capture seo_title -%}
  {{- page_title -}}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}{{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}{%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " on sale today for " }}{{ product.variants[0].price | money }}{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.name == 'Color' %}{{ product_option.values | join: ', ' }}{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != blank %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}{{ my_separator }}{{ shop.name }}
{%- endcapture -%}
  
<title>{{ seo_title | strip_newlines }}</title>

The code breaks down like this:

• Page Title – incorporate the actual page title first… regardless of the template.
• Tags – incorporate tags by joining tags associated with a page.
• Product Colors – loop through the color options and build a comma-separated string.
• Metafields – this Shopify instance has the dress length as a metafield that we wish to include.
• Price – include the first variant’s price.
• Shop Name – add the shop’s name at the end of the title.
• Separator – rather than repeating the separator, we just make it a string assignment and repeat it. That way, if we decide to change that symbol in the future, it’s only in one place.

Optimize Your Shopify Page Meta Description

When we crawled the site, we noticed that any theme template page that was called was repeating the home page SEO settings. We wanted to add a different meta description depending on whether the page was a home page, collections page, or actual product page.

If you’re not sure what your template name is, just add an HTML note in your theme.liquid file and you can view the source of the page to identify it.

<!-- Template: {{ template }} -->

This allowed us to identify all the templates that used the site’s meta description so that we could modify the meta description based on the template.

Here’s the meta description we want on the above product page:

<meta name="description" content="Turn heads in this classic hunter green plaid sweater dress. Modern updates make it a must-have: the stand-up neckline, three-quarter sleeves and the perfect length. On sale today for $78.00! Always FREE 2-day shipping and hassle-free returns at Closet52.">

Here’s that code:

{%- capture seo_metadesc -%}
  {%- if page_description -%}
    {%- if template == 'list-collections' -%}
      {{ "Find a beautiful dress for your next occasion. Here are all of our beautiful dress collections." | strip }} 
    {%- else -%}
    {{- page_description | strip | escape -}} 
      {%- if template == 'product' -%}
        {{ " On sale today for " }}{{ product.variants[0].price | money }}!
      {%- endif -%}
   {%- endif -%}
  {%- endif -%}
  {{ " Always FREE 2-day shipping and hassle-free returns at " }}{{ shop.name | strip }}.
{%- endcapture -%}
  
<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

The result is a dynamic, comprehensive set of titles and meta descriptions for any type of template or detailed product page. Moving forward, I’ll most likely refactor the code using case statements and organizing it a little better. But for now, it’s producing a much nicer presence in search engine result pages.

By the way, if you’d like a great discount… we’d love you to test out the site with a 30% off coupon, use code HIGHBRIDGE when checking out.

Shop For Dresses Now

Disclosure: I’m an affiliate for Shopify and Themeforest and I’m using those links in this article. Closet52 is a client of my firm, Highbridge. If you’d like assistance in developing your ecommerce presence using Shopify, please contact us.