How to add breadcrumbs for pages?

Shopify Discussion

Topic summary

A user seeks to implement 3-level breadcrumbs for Shopify pages (e.g., Home/About Us/Company Details), currently only achieving 2 levels. An attached image illustrates the desired structure.

Proposed Solutions:

  • Custom Code Implementation: One responder provides detailed Liquid code snippets for creating breadcrumbs, including separate files for breadcrumbs.liquid and breadcrumbs-arrow.liquid, to be integrated into theme.liquid. This solution covers products, collections, blogs, and pages.

  • Shopify Apps: Multiple third-party apps are recommended for multi-level breadcrumb functionality:

    • TT Schema Breadcrumbs
    • Schema Breadcrumbs
    • Category Breadcrumbs Uncomplicated

  • Official Shopify Code: A link to Shopify’s liquid code examples for breadcrumb navigation is shared as a starting point.

Challenges Noted:

  • Implementing multi-level breadcrumbs via custom code may be complex without developer expertise.
  • One user reports the provided code works for collections and products but fails to pull page titles correctly on Shopify 2.0 themes.

Status: The discussion remains open with no definitive resolution for the original 3-level page breadcrumb requirement. Hiring a developer or using apps is suggested as the most practical approach.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
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

2

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.

3

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” … as shown in the screenshot https://prnt.sc/IssKTLOrDMZu
  1. By using Shopify Apps, you can implement multi level breadcrumbs using App

Kindly take a look.

I hope the solution helps you.

Please share if you have any queries.

Thank you.

4

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.

5

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.

6

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.

7

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


  - Home
    
  

  {% if template contains 'page' %}
    
    {% render 'breadcrumbs-arrow' %}
    - {{ page.title }}      
      
    

  {% elsif template contains 'product' %}
    
    {% render 'breadcrumbs-arrow' %}
    - {{ product.title }}      
      
    

  {% elsif template contains 'collection' and collection.handle %}
    
    {% render 'breadcrumbs-arrow' %}
    {% if current_tags %}
      - {{ collection.title }}        
        
      

      {% render 'breadcrumbs-arrow' %}
      {{ current_tags | join: ' + ' }}
    {% else %}
      - {{ collection.title }}        
        
      

    {% endif %}

    
  {% elsif template == 'blog' %}
     {% render 'breadcrumbs-arrow' %} 
    - {{ blog.title }}      
      
    

    
  {% elsif template == 'article' %}
     {% render 'breadcrumbs-arrow' %} 
    - {{ blog.title }}        
      
    

     {% render 'breadcrumbs-arrow' %} 
    - {{ article.title }}        
      
    

  {% elsif template == 'search' %}
     {% render 'breadcrumbs-arrow' %} 
    - Search        
      
    

  {% else %}
     {% render 'breadcrumbs-arrow' %} 
    - {{ page_title }}        
      
    
  {% endif %}
  1. Add another snippet for the breadcrumbs icon. which is “breadcrumbs-arrow.liquid”.
  1. 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 %}
        
          
   
            {% render 'breadcrumbs' %}
          

        

      {% endif %}
      {% endunless %}
      {% comment %} Custom breadcrumbs end {% endcomment %}
  1. 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

8

Hi.

I came across this code ro add breadcrumbs, which works fine, apart from pages, it doesnt seem to pull the title from any page, collections and products are fine though. I am using a shopify 2.0 theme called Ecomus from The4

If theres any advice you could give why this may be. that would be great.

Thank

9

This process works for me on adding shopify breadcrumps

https://www.codeniden.com/how-to-add-breadcrumps-on-shopify/

1 Like