How to add Breadcrumbs in Shopify

 In the realm of e-commerce, user experience reigns supreme. Navigating through a website seamlessly can make or break a customer's journey. In the vast world of Shopify, where online stores flourish, one often-overlooked yet incredibly effective navigation aid is breadcrumbs.

What are Breadcrumbs?

Breadcrumbs are navigational aids typically displayed horizontally across the top of a webpage. They show the hierarchical structure of a website, allowing users to trace their path back to the homepage or any other higher-level page. Each segment of the breadcrumb represents a page the user has navigated through, with the last segment usually indicating the current page.

Implementing Breadcrumbs in Shopify

Adding breadcrumbs to your Shopify store can significantly improve user experience and make navigation more intuitive. Here’s a step-by-step guide on how to implement breadcrumbs in your Shopify store:

Step 1: Open the card-product file if you are using Dawn theme and this code | within: collection 

Step 2 : Create a Breadcrumbs Snippet

First, you need to create a new file called breadcrumbs.liquid in your snippets folder. Paste the provided code into this file. This code includes HTML and Liquid markup to generate breadcrumbs dynamically based on the current page's template.

<style>

  .breadcrumbs {

    margin: 0 0 2em;

    background-color: {{ settings.breadcrumb_bg_color }};

    padding-top: {{ settings.padding_top }}px;

    padding-bottom: {{ settings.padding_bottom }}px;

    padding-left: 20px;

  }

  .breadcrumbs__list {

    list-style-type: none;

    margin: 0;

    padding: 0;

  }

  .breadcrumbs__item {

    display: inline-block;

  }

  .breadcrumbs__item:not(:last-child):after {

    display: inline-block;

    content: '\00bb';

    margin: 0 .6em;

    color: #959fa5;

    font-size: {{ settings.font_size }}px;

  }

  .breadcrumbs__link {

    text-decoration: none;

    color: {{ settings.breadcrumb_text_color }};

    font-size: {{ settings.font_size }}px;

  }

  .breadcrumbs__link:hover {

    text-decoration: none;

  }

  .breadcrumbs__link[aria-current="page"] {

    color: #999 !important;

    font-weight: normal;

    text-decoration: none;

  }

  .breadcrumbs__link[aria-current="page"]:hover,

  .breadcrumbs__link[aria-current="page"]:focus {

    text-decoration: none;

  }

  .breadcrumbs__item:last-child:after {

    content: '';

  }

  .disabled-breadcrumb {

    color: #999 !important;

    pointer-events: none !important; 

    text-decoration: none !important; 

  }

</style>

{% unless template == 'index' or template == 'cart' or template == '404' %}

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

  

  <nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">

    <ol class="breadcrumbs__list">

      <li class="breadcrumbs__item">

        <a class="breadcrumbs__link" href="/">Home</a>

      </li>

      {% case t %}

        {% when 'page' %}

          <li class="breadcrumbs__item">

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

          </li>

        {% when 'product' %}

          <li class="breadcrumbs__item">

            <a class="breadcrumbs__link" href="/collections">Collections</a>

          </li>

          {% unless collection %}

            <li class="breadcrumbs__item">

              <a class="breadcrumbs__link" href="/collections/all">Products</a>

            </li>

          {% endunless %}

          {% if collection %}

            <li class="breadcrumbs__item">

              <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>

            </li>

          {% endif %}

          <li class="breadcrumbs__item">

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

          </li>

        {% when 'collection' %}

          <li class="breadcrumbs__item">

            <a class="breadcrumbs__link" href="/collections">Collections</a>

          </li>

          <li class="breadcrumbs__item">

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

          </li>

          {% if current_tags %}

            <li class="breadcrumbs__item">

              <a class="breadcrumbs__link" href="/collections/{{ collection.handle }}">{{ collection.title }}</a>

            </li>

            <li class="breadcrumbs__item">

              <a class="breadcrumbs__link" href="{{ collection.url }}/tagged/{{ current_tags | join: '+' }}" aria-current="page">{{ current_tags | join: ' + ' }}</a>

            </li>

          {% endif %}

        {%- when 'blog' -%}

          {%- if current_tags -%}

            <li class="breadcrumbs__item">

              {{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}

            </li>

            <li class="breadcrumbs__item">

              {%- 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 -%}

            <li class="breadcrumbs__item">

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

            </li>

          {%- endif -%}

        {%- when 'article' -%}

          <li class="breadcrumbs__item">

            {{ blog.title | link_to: blog.url, class: "breadcrumbs__link" }}

          </li>

          <li class="breadcrumbs__item">

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

          </li>

        {%- else -%}

          <li class="breadcrumbs__item">

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

              {{- page_title -}}

            </a>

          </li>

      {%- endcase -%}

    </ol>

  </nav>

{% endunless %}

Step 3: Update Settings Schema

Next, update your theme’s settings_schema.json file to include settings for customizing the breadcrumbs' appearance. These settings allow you to control the breadcrumb background color, text color, font size, and padding.

{ "name": "Breadcrumb Navigation", "settings": [ { "type": "checkbox", "id": "show_breadcrumb_nav", "label": "Show breadcrumb navigation", "default": true }, { "type": "color", "id": "breadcrumb_bg_color", "label": "Breadcrumb Background Color", "default": "#f8f9fa" }, { "type": "color", "id": "breadcrumb_text_color", "label": "Breadcrumb Text Color", "default": "#465076" }, { "type": "range", "id": "font_size", "min": 8, "max": 50, "step": 1, "unit": "px", "label": "Font size", "default": 18 }, { "type": "range", "id": "padding_top", "min": 0, "max": 50, "step": 1, "unit": "px", "label": "Padding Top", "default": 15 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 50, "step": 1, "unit": "px", "label": "Padding Bottom", "default": 15 } ] },

Step 4: Modify Theme.liquid

Finally, integrate the breadcrumbs into your theme by adding a conditional statement in your theme.liquid file. This statement checks if the "Show breadcrumb navigation" setting is enabled and, if so, renders the breadcrumbs snippet.

{%- if settings.show_breadcrumb_nav -%} {% render "breadcrumbs.liquid" %} {%- endif -%}

Benefits of Breadcrumbs

Enhanced User Experience: Breadcrumbs provide users with a clear path to navigate back to previous pages, reducing confusion and frustration.

Improved SEO: Breadcrumbs can improve your site’s SEO by providing search engines with additional context about the structure of your website.

Increased Engagement: By simplifying navigation, breadcrumbs encourage users to explore more pages within your Shopify store, potentially leading to increased engagement and conversions.

Customization Options With the provided code, you can customize various aspects of the breadcrumbs, including colors, font size, and padding, to ensure they seamlessly integrate with your store’s design and branding. Conclusion Breadcrumbs might seem like a small addition, but they can have a big impact on your Shopify store’s usability and overall success. By implementing breadcrumbs, you can enhance navigation, improve SEO, and ultimately create a more satisfying shopping experience for your customers. So why not take the next step towards enhancing your Shopify store’s navigation with breadcrumbs? Your customers will thank you for it!