Add schema breadcrumbs (structured data) to Shopify pages

Chris · Sep 24, 2021

How to add schema breadcrumbs (structured data) to Shopify pages. Using this method, you will have greater control and visibility on the breadcrumbs that you will be deploying.

Getting started

Before proceeding, please ensure that you have basic knowledge of the Shopify liquid markup as we will be creating a snippet liquid file populating it with conditionals and editing/duplicating page templates, handles, etc.

You do not need to be an expert Shopify developer, fundamental knowledge of how Shopify liquid files work should be sufficient to get you going. Or point your developer in the direction of this post.

I have found the Shopify Cheat Sheet to be a valuable resource for deploying technical SEO recommendations and fixes. It is also especially useful for tracking and tagging. Link to cheat sheet – https://www.shopify.co.uk/partners/shopify-cheat-sheet

Let us implement our first bit of Schema – JSON Breadcrumbs on Shopify pages

Starting nice and easy, let’s start with adding JSON Breadcrumbs on pages. Head to the Shopify theme editor and create a new snippet. Name it something simple and easy to remember, in this example I shall be naming the snippet file schemadata.
Locate the primary page template within your theme template liquid files. Make a mental note of the theme file name as we will be requiring it for the next step. For the purpose of this guide, I shall be calling the liquid page template sitebeepage1.

Create a control flow tag

Head back to the newly created snippet file and add the following control flow tag to the top of the schemadata snippet file.

Code:

{% if template == 'page.sitebeepage1' %}

{% endif %}

That little piece of markup is a called control flow tag. It is a lookup conditional wrapper to check if a template file is available as executable code. Learn about in in the Shopify Cheat Sheet, I posted the link above.

Next, we are going to add the schema breadcrumbs JSON-LD script. Paste this script within the wrapper.

Code:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "{{ shop.name }}",
    "item": "{{ shop.url }}"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "{{ collection.title }}",
    "item": "{{ canonical_url }}"
  }]
}
</script>

The crucial pieces of information for the script to execute correctly are:

{{ shop.name }} – name of the Shopify store
{{ shop.url }} – root URL path to the Shopify store
{{ page.title }} – the page name
{{ canonical_url }} – the URL to the page

They are objects that retrieve the names and URL paths for the storefront name and the pages name. Click the save button to save the snippet file contents.
The final version should look:

Code:

{% if template == 'page.sitebeepage1' %}

   <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ shop.name }}",
        "item": "{{ shop.url }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title }}",
        "item": "{{ canonical_url }}"
      }]
    }
    </script>

{% endif %}

Render the snippet in the theme.liquid file

We are at the final step – next up we need to render the snippet file within HTML head section of the main theme.liquid file. Paste the following markup into the head section of the theme.liquid.

Code:

{% render 'schemadata' %}

If you named the snippet file something else. Make sure that it matches the name in the render tag. Now save the theme.liquid file. Head over to one of the pages on your Shopify store. Refresh it. View the page source, if you followed this tutorial correctly you should see the page schema breadcrumbs rendered in the HTML source.

Let me know how you get on by commenting below. If you have multiple page templates in your Shopify theme, add another control flow tag below in the snippet file. You can add as many as you require. Code bloat is not an issue as the control flow tag is only executed on the matching template file. I will be posting a detailed guide on all the possibilities very soon.

Follow me on Twitter to keep up to date on the Shopify SEO hacks that I will be posting about.

Add schema breadcrumbs (structured data) to Shopify pages

Getting started​

Let us implement our first bit of Schema – JSON Breadcrumbs on Shopify pages​

Create a control flow tag​

​

Render the snippet in the theme.liquid file​

Latest threads

Getting started

Let us implement our first bit of Schema – JSON Breadcrumbs on Shopify pages

Create a control flow tag

Render the snippet in the theme.liquid file