Simple Breadcrumbs for a Shopify Product Page

In this short post, we're going to add some simple breadcrumbs for a Shopify product page.

First, go to editing the theme code (for example, take the basic Dawn theme) and find the main-product.liquid file in the Sections folder and add it in the right place

<section id="breadcrumb">
	<ul itemscope itemtype="https://schema.org/BreadcrumbList">
  		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
          <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
          <meta itemprop="position" content="1" />
      	</li>
  		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
          <a itemprop="item" href="/collections/all"><span itemprop="name">Catalog</span></a>
          <meta itemprop="position" content="2" />
      	</li>
		{% for collection in product.collections %}
      		{% if forloop.last == true %}
              <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="{{ collection.url }}"><span itemprop="name">{{ collection.title }}</span></a>
                <meta itemprop="position" content="3" />
              </li>
      		{% endif %}
        {% endfor %}	
      <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span itemprop="name">{{ product.title }}</span><meta itemprop="position" content="4" /></li>
	</ul>
</section>

In this example, we are adding breadcrumbs immediately with the schema.org markup. The first link will be the path to the main one, the second position will be the link to the general catalog, the third position will be the link to the product collection (if we have more than one collection linked, the last one will be displayed). And in the last place the name of our product will be displayed in text.