How can I add a breadcrumb trail to my Craft Theme store?

scv711
Visitor
1 0 1

Hello, I'm currently trying to add a breadcrumb trail to the top of my store just under the navigation tabs. 

Something that looks like this: 

scv711_0-1676762280458.png

I've tried researching but all the code I'm finding is for older or different versions. Would anybody be able to help me set this up?

Shopify Store: shelf-lyfe.com

 

Thanks!

Replies 4 (4)

PageFly-Richard
Shopify Partner
4302 975 1629

Hi @scv711 ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Snippets->/Click Add a new snippet to Create file (name file: breadcrumbs). 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">
    <div class="page-width">
      <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 %}
    </div>
  </nav>
{% endunless %}

PageFlyRichard_0-1676911531317.png

PageFlyRichard_1-1676911701402.png

Step 3: Layout->/theme.liquid -> Paste below code before <main:

{% render 'breadcrumbs' %}

PageFlyRichard_2-1676911824255.png

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

axelle
Visitor
3 0 0

Hi Richard !

Thanks, it helps me a lot, but I still have a problem. The breadcrumbs show "home > product" but I would like to have "home > collection > product". Any idea where the problem come from ? 

Lamuchacha
Visitor
2 0 0

Found a solution?

JuliaN2197
Visitor
1 0 0

Hi, 

 

I was able to create breadcrumbs using your code. However, I have the same issue as @scv711. Can you show me how I can also add the collection to the breadcrumb? 

 

Best regards,

Julia