How to add breadcrumbs for pages?

[Uma489]

Hi,

I want add breadcrumbs to the pages. I can be able to add 2 level breadcrumbs. But I want to add 3 level breadcrumbs. I couldn't get that any example of 3 level breadcrumbs for pages.

Here I'm attaching the image for the refence. Can anyone please guide me this.

Thank you 

[Tech_Savvy]

Hello @Uma489 ,

In the event that the material on your website is dynamic, you may require a system that creates breadcrumbs automatically based on where the current page is located within the site hierarchy. Languages for server-side scripting, like JavaScript, or server-side scripting, like PHP, can usually be used to do this.Please share the URL of your website with us so that we may better assist you, as it is difficult to offer more detailed advice without seeing the exact layout and execution of your website.

Thanks.

[Uma489]

Hi @Tech_Savvy 

Here I'm sharing the website link About Us – umadev-store.PW is: "123456" If user Clicked on the about us, then the breadcrumbs is showing good. After the use navigate to company details page then it should be show the breadcrumbs like Home/About us/Company details. But is it not Displaying like that.

Thank you.

[Anshul_arora]

Hello @Uma489 ,

I understand you are looking to add breadcrumbs to the pages.

You can implement this with 2 methods.

1. By using Shopify provided code, add the code mentioned in below link in theme.liquid file before <main id="MainContent" ....</main> as shown in the screenshot https://prnt.sc/IssKTLOrDMZu

- https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation

2. By using Shopify Apps, you can implement multi level breadcrumbs using App

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

Kindly take a look.

I hope the solution helps you.

Please share if you have any queries.

Thank you.

[Uma489]

Hi@Anshul_arora,

Thanks for the help. I have tried this. But it is similar not Exactly what I'm looking for. Can you check this on my website About Us – umadev-store. PW is: "123456" 

Thank you.

[Anshul_arora]

Hello @Uma489 ,

Yes, I have gone through your store, I understand you are looking to implement a multi-level breadcrumbs in the store.

It may be difficult to make the changes in the code for implementing multi-level breadcrumbs at your end. I suggest you can hire Shopify Developer for this or you can use one of the above shared Shopify App.

I hope this helps.

Thank you.

[Darshanp712]

Hello @Uma489, To add the breadcrumbs in your site please follow the below step.

1. Go to edit code -> Add snippet -> "breadcrumbs.liquid". paste below code in that snippet.

2. Code    

<ul class="custom-bread-crumbs-list" role="navigation" aria-label="breadcrumbs" >
  <li class="custom-bread-crumbs-list-items">
    <a title="Home" href="{{- shop.url -}}" class="breadcrumbs-url">
      <span class="custom-bread-crumbs-list-title">Home</span>
    </a>
  </li>
  {% if template contains 'page' %}
    <!-- PAGE -->
    <span class="breadcrumbs-arrow" aria-hidden="true">{% render 'breadcrumbs-arrow' %}</span>
    <li class="custom-bread-crumbs-list-items">
      <a href="{{ page.url }}" class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">{{ page.title }}</span>      
      </a>
    </li>
  {% elsif template contains 'product' %}
    <!-- PRODUCT -->
    <span class="breadcrumbs-arrow" aria-hidden="true">{% render 'breadcrumbs-arrow' %}</span>
    <li class="custom-bread-crumbs-list">
      <a href="{{ product.url }}" class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">{{ product.title }}</span>      
      </a>
    </li>
  {% elsif template contains 'collection' and collection.handle %}
    <!-- COLLECTION -->
    <span class="breadcrumbs-arrow" aria-hidden="true">{% render 'breadcrumbs-arrow' %}</span>
    {% if current_tags %}
      <li class="custom-bread-crumbs-list-items">
        <a href="{{ collection.url }}" class="breadcrumbs-url">
          <span class="custom-bread-crumbs-list-title">{{ collection.title }}</span>        
        </a>
      </li>
      <span class="breadcrumbs-arrow" aria-hidden="true">{% render 'breadcrumbs-arrow' %}</span>
      {{ current_tags | join: ' + ' }}
    {% else %}
      <li class="custom-bread-crumbs-list-items">
        <a href="{{ collection.url }}" class="breadcrumbs-url" >
          <span class="custom-bread-crumbs-list-title">{{ collection.title }}</span>        
        </a>
      </li>
    {% endif %}

    <!-- BLOG -->
  {% elsif template == 'blog' %}
    <span class="breadcrumbs-arrow" aria-hidden="true"> {% render 'breadcrumbs-arrow' %} </span>
    <li class="custom-bread-crumbs-list-items">
      <a href="{{ blog.url }}" class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">{{ blog.title }}</span>      
      </a>
    </li>

    <!-- ARTICLE -->
  {% elsif template == 'article' %}
    <span class="breadcrumbs-arrow" aria-hidden="true"> {% render 'breadcrumbs-arrow' %} </span>
    <li class="custom-bread-crumbs-list-items">
      <a href="{{ blog.url }}"  class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">{{ blog.title }}</span>        
      </a>
    </li>
    <span class="breadcrumbs-arrow" aria-hidden="true"> {% render 'breadcrumbs-arrow' %} </span>
    <li class="custom-bread-crumbs-list">
      <a href="{{ article.url }}" class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">{{ article.title }}</span>        
      </a>
    </li>
  {% elsif template == 'search' %}
    <span class="breadcrumbs-arrow" aria-hidden="true"> {% render 'breadcrumbs-arrow' %} </span>
    <li class="custom-bread-crumbs-list-items">
      <a href="{{ routes.search_url }}" class="breadcrumbs-url" >
        <span class="custom-bread-crumbs-list-title">Search</span>        
      </a>
    </li>
  {% else %}
    <span class="breadcrumbs-arrow" aria-hidden="true"> {% render 'breadcrumbs-arrow' %} </span>
    <li class="custom-bread-crumbs-list-items">
      <a href="{{ page.url }}" class="breadcrumbs-url">
        <span class="custom-bread-crumbs-list-title">{{ page_title }}</span>        
      </a>
    </li>
  {% endif %}
</ul>

<style>
  .custom-bread-crumbs-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    column-gap: 12px;
    text-transform: uppercase;
  }
  .custom-bread-crumbs-list .custom-bread-crumbs-list-items a.breadcrumbs-url {
    color: #000000;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    font-weight: 400;
  }
  .custom-bread-crumbs-list .custom-bread-crumbs-list-title {
    color: #000000;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-transform: capitalize;
  }
  .main-breadcrumbs-container {
    width: 100%;
    padding: 10px 0px;
    background: #F6F6F6;
    display: block;
  }
  .template--product .custom-bread-crumbs-list {
      padding: 0 0 0 1rem;
  }
  .main-breadcrumbs-container a.breadcrumbs-url {
    text-decoration: none;
  }   
  @media screen and (max-width: 1024px){
    .main-breadcrumbs-container {
        padding: 8px 0px;
    }
    .custom-bread-crumbs-list .custom-bread-crumbs-list-title  svg {
        width: 5px !important;
    }
    .custom-bread-crumbs-list .custom-bread-crumbs-list-title {
        font-size: 11px;
    }
  }
</style>

3. Add another snippet for the breadcrumbs icon. which is "breadcrumbs-arrow.liquid".

<svg width="12" height="12" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33325 1.41895L6.66658 6.75228L1.33325 12.0856" stroke="#111111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

4. In "theme.liquid" file add this code above "{{ content for layout }}" line. 

      {% comment %} Custom breadcrumbs start {% endcomment %}
      {% unless template contains 'index'  %}
      {% if settings.show_breadcrumbs %}
        <div class="main-breadcrumbs-container">
          <div class="breadcrubs page-width">   
            {% render 'breadcrumbs' %}
          </div>
        </div>
      {% endif %}
      {% endunless %}
      {% comment %} Custom breadcrumbs end {% endcomment %}

5. Save and review all steps and see the output.

If anything is having and issue then please reply and feel free to ask.

Best Regards,
Darshan Prajapati