How to add breadcrumbs in shopify

Breadcrumbs are essential navigation elements that enhance the user experience by showing the path from the home page to the current page. They help users understand their place with in your site, making it easier to navigate through your collections and products. In this blog, we will provide a step-by-step guide on how to add breadcrumbs to your Shopify store. By following these instructions, you will improve your site’s navigation and ensure a smoother browsing experience for your customers. Let's dive into the process of implementing breadcrumbs in your Shopify store.

Step 1: Understand the Structure

Understanding breadcrumbs and their normal appearance is essential before beginning the implementation procedure. The path from the home page to the current page is shown by breadcrumbs, which have a hierarchical structure. As an example:

Home > Collection Name > Product Name

Step 2: Access the Code Editor

To begin customizing your Shopify theme and adding breadcrumbs, access the Code Editor in your Shopify admin panel:

Navigate to Online Store > Themes.
Click on Actions, then select Edit Code.

Step 3: Create a New Snippet for Breadcrumbs

Next, you'll need to generate a fresh snippet specifically for the breadcrumbs code. Here's how:

Navigate to the 'snippets' directory within your Shopify theme.
Create a new file and name it 'breadcrumbs'. This file will house the code necessary for displaying breadcrumbs on your site.

Step 4 : Copy the liquid code given below and paste it into the code editor for the breadcrumbs.liquid snippet -

{%- unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ or

template == ‘404’ -%}

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

</li>

{%- case t -%}

{%- when 'page' -%}

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

</li>

{%- when 'product' -%}

{%- if product.collections.size > 0 -%}

{{ product.collections.first.title | link_to: product.collections.first.url }}

</li>

{%- endif -%}

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

</li>

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

{%- if current_tags -%}

</li>

{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}

<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: ' + '

}}</a>

</li>

{%- else -%}

<a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title

}}</a>

</li>

{%- endif -%}

{%- when 'blog' -%}

{%- if current_tags -%}

</li>

{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}

<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: ' + '

}}</a>

</li>

{%- else -%}

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

</li>

{%- endif -%}

{%- when 'article' -%}

</li>

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

</li>

{%- else -%}

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

</li>

{%- endcase -%}

</ol>

</nav>

{%- endunless -%}

Step 5 : Add the snippet into theme.liquid

{ % render ‘ breadcrumbs’ % }

Final Response -

By following these steps, you can easily add breadcrumbs to your Shopify store, enhancing user navigation and experience. Understand the structure, access the code editor, create a new snippet for breadcrumbs, copy the provided liquid code, and finally, add the snippet to your theme.liquid file. This simple addition can greatly improve usability and customer satisfaction on your site.

Back to blog