How can I display navigation based breadcrumbs on my website?

dev_refat789
Shopify Partner
8 0 0

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.

Replies 15 (15)

Sajeel
Shopify Partner
272 31 26

@dev_refat789 

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
Shopify Partner
272 31 26

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

dev_refat789
Shopify Partner
8 0 0

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

Sajeel
Shopify Partner
272 31 26

@dev_refat789 

you can also use this app

Category Breadcrumbs

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

dev_refat789
Shopify Partner
8 0 0

@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.

dev_refat789
Shopify Partner
8 0 0
{% 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
Shopify Partner
272 31 26

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

dev_refat789
Shopify Partner
8 0 0

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
Shopify Partner
272 31 26

you can get and add nav item before collection name

dev_refat789
Shopify Partner
8 0 0

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
Shopify Partner
272 31 26

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
Shopify Partner
272 31 26

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

 

dev_refat789
Shopify Partner
8 0 0

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

dev_refat789
Shopify Partner
8 0 0

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
Excursionist
12 0 4

@dev_refat789 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?