How to add breadcrumbs for pages?

How to add breadcrumbs for pages?

Uma489
Shopify Partner
17 0 1

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 

Uma489_0-1717754987812.png

 

Replies 6 (6)

Tech_Savvy
Tourist
22 0 3

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
Shopify Partner
17 0 1

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
Navigator
450 128 93

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Uma489
Shopify Partner
17 0 1

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-storePW is: "123456" 

 

Thank you.

Anshul_arora
Navigator
450 128 93

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Darshanp712
Shopify Partner
137 21 16

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.