Implementing Breadcrumb Navigation

Implementing Breadcrumb Navigation in Shopify

Breadcrumb navigation helps users understand their location within your store and improves SEO by providing a clear path for search engines to crawl. Here’s how to implement it in Shopify:

Step 1: Edit Your Theme

Go to Online Store > Themes > Actions > Edit Code. Open the theme.liquid file or the file where you want to add the breadcrumb.

It’s a great idea to create a new snippet and call it something like breadcrumbs.liquid

Step 2: Add Breadcrumb Code

Insert the following code where you want the breadcrumb to appear:

{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %}

{% assign t = template | split: '.' | first %}

<div class="page-width">
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol>
<li>
<a href="/" title="Home">Home</a>
</li>

{% case t %}
{% when 'page' %}

<li>
<a href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>

{% when 'product' %}

{% if collection.url %}
<li>
{{ collection.title | link_to: collection.url }}
</li>
{% endif %}

<li>
<a href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>

{% when 'collection' and collection.handle %}

{% if current_tags %}
<li>{{ collection.title | link_to: collection.url }}</li>
<li>
{% capture tag_url %}{{ collection.url }}/{{ current_tags | join: "+"}}{% endcapture %}
<a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{% else %}
<li>
<a href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{% endif %}

{% when 'blog' %}

{% if current_tags %}
<li>{{ blog.title | link_to: blog.url }}</li>
<li>
{% capture tag_url %}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{% endcapture %}
<a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{% else %}
<li>
<a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{% endif %}

{% when 'article' %}

<li>{{ blog.title | link_to: blog.url }}</li>
<li>
<a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>

{% else %}

<li aria-current="page">
<a href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>

{% endcase %}

</ol>
</nav>
{% endunless %}
</div>

Step 4: Add the snippet into layout.liquid

{% include 'breadcrumbs' %}

Step 5: Style Your Breadcrumb

Add the following CSS to your theme’s stylesheet to style the breadcrumb:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}

Implementing Breadcrumb Navigation in WooCommerce

WooCommerce has built-in support for breadcrumbs, but you can customize it further. Here’s how:

Step 1: Enable Breadcrumbs

Go to Appearance > Customize > WooCommerce > Breadcrumbs and enable breadcrumbs.

Step 2: Customize Breadcrumbs

To customize the breadcrumb output, add the following code to your theme’s functions.php file:

add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
  return array(
    'delimiter'   => ' > ',
    'wrap_before' => '

',
    'before'      => '

‘,
‘after’ => ‘

',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
  );
}

Step 3: Style Your Breadcrumb

Add the following CSS to your theme’s stylesheet to style the breadcrumb:

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}