How can I display navigation based breadcrumbs on my website?

[Faquro_refat]

This is my site: https://waxlondon.com

I want to show the breadcrumb based on the navigation. For example If I go to any product through Clothing > overshirts > Whiting Overshirt Marine Beatnik the breadcrumb should show Home > Clothing > overshirts > Whiting Overshirt Marine Beatnik.

[Sajeel]

@Faquro_refat 

Follow these steps

To add breadcrumb navigation to your store:   

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Create a new snippet for the breadcrumbs code:
1. Click the Snippets folder, then click Add a new snippet.
2. Name the snippet breadcrumbs. Make sure that the name is not capitalized, or your theme won't be able to find the new file.
3. Click Create snippet:
4. Copy the following Liquid code and paste it into the code editor for the breadcrumbs.liquid snippet:

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

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

  <a href="/" title="Home">Home</a>

  {% if template contains 'page' %}

    <span aria-hidden="true">&rsaquo;</span>

    <span>{{ page.title }}</span>

  {% elsif template contains 'product' %}

    {% if collection.url %}

      <span aria-hidden="true">&rsaquo;</span>

      {{ collection.title | link_to: collection.url }}

    {% endif %}

    <span aria-hidden="true">&rsaquo;</span>

    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}

    <span aria-hidden="true">&rsaquo;</span>

    {% if current_tags %}

      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}

      {{ collection.title | link_to: url }}

      <span aria-hidden="true">&rsaquo;</span>

      <span>{{ current_tags | join: " + " }}</span>

    {% else %}

      <span>{{ collection.title }}</span>

    {% endif %}

  {% elsif template == 'blog' %}

    <span aria-hidden="true">&rsaquo;</span>

    {% if current_tags %}

      {{ blog.title | link_to: blog.url }}

      <span aria-hidden="true">&rsaquo;</span>

      <span>{{ current_tags | join: " + " }}</span>

    {% else %}

    <span>{{ blog.title }}</span>

    {% endif %}

  {% elsif template == 'article' %}

    <span aria-hidden="true">&rsaquo;</span>

    {{ blog.title | link_to: blog.url }}

    <span aria-hidden="true">&rsaquo;</span>

    <span>{{ article.title }}</span>

  {% else %}

   <span aria-hidden="true">&rsaquo;</span>

   <span>{{ page_title }}</span>

  {% endif %}

</nav>

{% endunless %} 

• Click Save to confirm your changes to breadcrumbs.liquid.
• Click theme.liquid to open it in the code editor.
• Paste the following code in theme.liquid wherever you want your breadcrumbs to appear:

 {% render 'breadcrumbs' %} 

Click Save to confirm your changes to theme.liquid.

[Sajeel]

Tell me if you face any issue  If it works for you just mark my solution as accepted

[Faquro_refat]

I have added the site link and current code for better understanding, Thanks

[Sajeel]

@Faquro_refat 

you can also use this app

Category Breadcrumbs

https://apps.shopify.com/category-breadcrumbs-uncomplicated

[Faquro_refat]

@SajeelThanks for your reply. Actually what I want is to show the breadcrumbs based on menu navigation. Here is my site: https://waxlondon.com Here is my breadcrumbs code:
{% case template.name %} {% when 'product' %} {%- assign collection_urls_array = null | sort -%} {% for tag in product.tags %} {% assign tag_lowercase = tag | downcase %} {% if tag_lowercase contains 'collection:' %} {%- assign collection_handle = tag_lowercase | remove: 'collection:' -%} {%- assign collection_url_array = collections[collection_handle].url | sort -%} {%- assign collection_urls_array = collection_urls_array | concat: collection_url_array -%} {% endif %} {% endfor %} {% if collection_urls_array.size == 1 %} {%- assign collection_url = collection_urls_array[0] -%} {% else %} {% comment %} If there are multiple collection tags, we need to use the collection_url from the lowest level in the main-menu hierarchy. The part loops over the hierarchy and places collection_url's in the correct level array. {% endcomment %} {%- assign collection_urls_level_1 = null | sort -%} {%- assign collection_urls_level_2 = null | sort -%} {%- assign collection_urls_level_3 = null | sort -%} {% for collection_url in collection_urls_array %} {%- assign collection_url_as_array = collection_url | sort -%} {% for linklist in linklists.main-menu.links %} {% if linklist.url == collection_url %} {%- assign collection_urls_level_1 = collection_urls_level_1 | concat: collection_url_as_array -%} {% else %} {% for child_list in linklist.links %} {% if child_list.url == collection_url %} {%- assign collection_urls_level_2 = collection_urls_level_2 | concat: collection_url_as_array -%} {% else %} {% for grandchild_list in child_list.links %} {% if grandchild_list.url == collection_url %} {%- assign collection_urls_level_3 = collection_urls_level_3 | concat: collection_url_as_array -%} {% break %} {% endif %} {% endfor %} {% endif %} {% endfor %} {% endif %} {% endfor %} {% endfor %} {% comment %} Now we check the levels starting from the bottom, and take the first collection_url we find. {% endcomment %} {% if collection_urls_level_3.size > 0 %} {%- assign collection_url = collection_urls_level_3[0] -%} {% else %} {% if collection_urls_level_2.size > 0 %} {%- assign collection_url = collection_urls_level_2[0] -%} {% else %} {% if collection_urls_level_1.size > 0 %} {%- assign collection_url = collection_urls_level_1[0] -%} {% endif %} {% endif %} {% endif %} {% endif %} {% when 'collection' %} {%- assign collection_url = collection.url -%} {% endcase %}

{% if collection_url != blank %} {%- assign collection_title = collection.title | downcase -%} {% for linklist in linklists.main-menu.links %} {% if linklist.url == collection_url %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: linklist.url | item: linklist.title | position: 2 -%} {% if template.name == 'product' %} {%- render 'breadcrumbs-item' | url: product.url | item: product.title | position: 3 -%} {% endif %} {% else %} {% for child_list in linklist.links %} {% if child_list.url == collection_url %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: linklist.url | item: linklist.title | position: 2 -%} {%- render 'breadcrumbs-item' | url: child_list.url | item: child_list.title | position: 3 -%} {% if template.name == 'product' %} {%- render 'breadcrumbs-item' | url: product.url | item: product.title | position: 4 -%} {% endif %} {% else %} {% for grandchild_list in child_list.links %} {% assign childlist_title = child_list.title | downcase %} {% assign grandchildlist_title = grandchild_list.title | downcase %} {% if grandchild_list.url == collection_url %} {% if childlist_title=="new arrivals" and grandchildlist_title =="overshirts" %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: "#" | item: "Collection" | position: 2 -%} {%- render 'breadcrumbs-item' | url: grandchild_list.url | item: grandchild_list.title | position: 3 -%} {% if template.name == 'product' %} {%- render 'breadcrumbs-item' | url: product.url | item: product.title | position: 4 -%} {% endif %} {% elsif grandchildlist_title !="overshirts" or collection_title =="archive sale - overshirts" %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: linklist.url | item: linklist.title | position: 2 -%} {%- render 'breadcrumbs-item' | url: child_list.url | item: child_list.title | position: 3 -%} {%- render 'breadcrumbs-item' | url: grandchild_list.url | item: grandchild_list.title | position: 4 -%} {% if template.name == 'product' %} {%- render 'breadcrumbs-item' | url: product.url | item: product.title | position: 5 -%} {% endif %} {% endif %} {% endif %} {% endfor %} {% endif %} {% endfor %} {% endif %} {% endfor %} {% elsif template.name == 'page' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: page.url | item: page.title | position: 2 -%} {% elsif template.name == 'blog' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: blog.url | item: blog.title | position: 2 -%} {% elsif template.name == 'article' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: blog.url | item: blog.title | position: 2 -%} {%- render 'breadcrumbs-item' | url: article.url | item: article.title | position: 3 -%} {% elsif template.name == 'login' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: routes.account_login_url | item: 'Login' | position: 2 -%} {% elsif template.name == 'register' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: routes.account_register_url | item: 'Register' | position: 2 -%} {% elsif template.name == 'account' %} {%- render 'breadcrumbs-item' | url: '/' | item: 'Home' | extra: 'rel="index"' | position: 1 -%} {%- render 'breadcrumbs-item' | url: routes.account_url | item: 'Account' | position: 2 -%} {% endif %}

If you go through the site, you will find breadcrumbs is working file for collection. What is the problem: 1. For the same collection in navigation, breadcrumbs is showing both path. I have manually controlled this for collection "Overshirts" 2. For product page, if product has multiple collections, it showing wrong path. What I need: 1. Breadcrumbs will show the correct path based on navigation while using this twice. 2. For product page it will also show based on navigation.

[Faquro_refat]

{% case template.name %}
  {% when 'product' %}
    {%- assign collection_urls_array = null | sort -%}
    {% for tag in product.tags %}
      {% assign tag_lowercase = tag | downcase %}
      {% if tag_lowercase contains 'collection:' %}
        {%- assign collection_handle = tag_lowercase | remove: 'collection:' -%}
        {%- assign collection_url_array = collections[collection_handle].url | sort -%}
        {%- assign collection_urls_array = collection_urls_array | concat: collection_url_array -%}
      {% endif %}
    {% endfor %}

    {% if collection_urls_array.size == 1 %}
      {%- assign collection_url = collection_urls_array[0] -%}
    {% else %}
      {% comment %}
        If there are multiple collection tags, we need to use the collection_url from
        the lowest level in the main-menu hierarchy.

        The part loops over the hierarchy and places collection_url's in the correct
        level array.
      {% endcomment %}
      {%- assign collection_urls_level_1 = null | sort -%}
      {%- assign collection_urls_level_2 = null | sort -%}
      {%- assign collection_urls_level_3 = null | sort -%}

      {% for collection_url in collection_urls_array %}
        {%- assign collection_url_as_array = collection_url | sort -%}
        {% for linklist in linklists.main-menu.links %}
          {% if linklist.url == collection_url  %}
            {%- assign collection_urls_level_1 = collection_urls_level_1 | concat: collection_url_as_array -%}
          {% else %}
            {% for child_list in linklist.links %}
              {% if child_list.url == collection_url  %}
                {%- assign collection_urls_level_2 = collection_urls_level_2 | concat: collection_url_as_array -%}
              {% else %}
                {% for grandchild_list in child_list.links %}
                  {% if grandchild_list.url == collection_url %}
                    {%- assign collection_urls_level_3 = collection_urls_level_3 | concat: collection_url_as_array -%}
                    {% break %}
                  {% endif %}
                {% endfor %}
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endfor %}
      {% endfor %}

      {% comment %}
        Now we check the levels starting from the bottom, and take the first collection_url we find.
      {% endcomment %}
      {% if collection_urls_level_3.size > 0 %}
        {%- assign collection_url = collection_urls_level_3[0] -%}
      {% else %}
        {% if collection_urls_level_2.size > 0 %}
          {%- assign collection_url = collection_urls_level_2[0] -%}
        {% else %}
          {% if collection_urls_level_1.size > 0 %}
            {%- assign collection_url = collection_urls_level_1[0] -%}
          {% endif %}
        {% endif %}
      {% endif %}
    {% endif %}
  {% when 'collection' %}
    {%- assign collection_url = collection.url -%}
{% endcase %}

<nav
  class="breadcrumbs"
  aria-label="Breadcrumb"
  data-template="{{ template.name }}"
>
  <ol 
    class="breadcrumbs__list" 
    itemscope 
    itemtype="https://schema.org/BreadcrumbList"
  >
    {% if collection_url != blank %}
    {%- assign collection_title = collection.title | downcase -%}
      {% for linklist in linklists.main-menu.links %}
        {% if linklist.url == collection_url %}
          {%- 
            render 'breadcrumbs-item'
            |  url: '/'
            |  item: 'Home'
            |  extra: 'rel="index"'
            |  position: 1
          -%}
          {%- 
            render 'breadcrumbs-item'
            |  url: linklist.url
            |  item: linklist.title
            |  position: 2
          -%}
          {% if template.name == 'product' %}
            {%- 
              render 'breadcrumbs-item'
              |  url: product.url
              |  item: product.title
              |  position: 3
            -%}
          {% endif %}
        {% else %}
          {% for child_list in linklist.links %}
            {% if child_list.url == collection_url %}
              {%- 
                render 'breadcrumbs-item'
                |  url: '/'
                |  item: 'Home'
                |  extra: 'rel="index"'
                |  position: 1
              -%}
              {%- 
                render 'breadcrumbs-item'
                |  url: linklist.url
                |  item: linklist.title
                |  position: 2
              -%}
              {%- 
                render 'breadcrumbs-item'
                |  url: child_list.url
                |  item: child_list.title
                |  position: 3
              -%}
              {% if template.name == 'product' %}
                {%- 
                  render 'breadcrumbs-item'
                  |  url: product.url
                  |  item: product.title
                  |  position: 4
                -%}
              {% endif %}
            {% else %}
              {% for grandchild_list in child_list.links %}
              {% assign childlist_title = child_list.title | downcase %}
              {% assign grandchildlist_title = grandchild_list.title | downcase %}
                {% if grandchild_list.url == collection_url  %}
                  {% if childlist_title=="new arrivals" and grandchildlist_title =="overshirts"  %}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: '/'
                      |  item: 'Home'
                      |  extra: 'rel="index"'
                      |  position: 1
                    -%}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: "#"
                      |  item: "Collection"
                      |  position: 2
                    -%}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: grandchild_list.url
                      |  item: grandchild_list.title
                      |  position: 3
                    -%}
                    {% if template.name == 'product' %}
                      {%- 
                        render 'breadcrumbs-item'
                        |  url: product.url
                        |  item: product.title
                        |  position: 4
                      -%}
                    {% endif %}
                    {% elsif grandchildlist_title !="overshirts" or  collection_title =="archive sale - overshirts" %}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: '/'
                      |  item: 'Home'
                      |  extra: 'rel="index"'
                      |  position: 1
                    -%}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: linklist.url
                      |  item: linklist.title
                      |  position: 2
                    -%}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: child_list.url
                      |  item: child_list.title
                      |  position: 3
                    -%}
                    {%- 
                      render 'breadcrumbs-item'
                      |  url: grandchild_list.url
                      |  item: grandchild_list.title
                      |  position: 4
                    -%}
                    {% if template.name == 'product' %}
                      {%- 
                        render 'breadcrumbs-item'
                        |  url: product.url
                        |  item: product.title
                        |  position: 5
                      -%}
                    {% endif %}
                  {% endif %}
                {% endif %}
              {% endfor %}   
            {% endif %}
          {% endfor %}      
        {% endif %}
      {% endfor %}
    {% elsif template.name == 'page' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: page.url
        |  item: page.title
        |  position: 2
      -%}
    {% elsif template.name == 'blog' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: blog.url
        |  item: blog.title
        |  position: 2
      -%}
    {% elsif template.name == 'article' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: blog.url
        |  item: blog.title
        |  position: 2
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: article.url
        |  item: article.title
        |  position: 3
      -%}
    {% elsif template.name == 'login' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: routes.account_login_url
        |  item: 'Login'
        |  position: 2
      -%}
    {% elsif template.name == 'register' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: routes.account_register_url
        |  item: 'Register'
        |  position: 2
      -%}
    {% elsif template.name == 'account' %}
      {%- 
        render 'breadcrumbs-item'
        |  url: '/'
        |  item: 'Home'
        |  extra: 'rel="index"'
        |  position: 1
      -%}
      {%- 
        render 'breadcrumbs-item'
        |  url: routes.account_url
        |  item: 'Account'
        |  position: 2
      -%}
    {% endif %}
  </ol>
</nav>

[Sajeel]

just try my code once and check if anything chnges then let me know what happend

[Faquro_refat]

I used your code but unfortunately I am not looking something like this.
It's correctly showing home > collection_name
But I want like this. If user go collection from "clothing" in menu then Home > clothing > collection_name

[Sajeel]

you can get and add nav item before collection name

[Faquro_refat]

If you can have a look on my code, you will see I am getting nav item and showing them. However it's not working when same collection is used more than once in Navigation. Again this isn't work for product level. Like if I go to a product from collection under "clothing" it should show Home > clothing > collection_name > product_title. Not sure is it possible in Shopify!

[Sajeel]

to make it work on product page you have to use this code in header or in template.liquid or theme.liquid for now where you have pasted this code

[Sajeel]

try to embend nav item code in my code and paste it in header better to create a snippet file and just include it in header or theme file

[Faquro_refat]

What you are saying actually doesn't make any sense! Did you see me site and the code I attached!

[Faquro_refat]

It's working on product page, but for product with multiple collection, it shows the breadcrumbs based on 1st collection name unless the way user navigate!

[pcebo]

@Faquro_refat I was checking out your site (look amazing BTW!) and I see that you have the navigation based breadcrumbs working. How did you end up solving this?