Breadcrumb Navigation to follow subcategories using coding help?

Highlighted
New Member
4 0 0

Hi everyone,

I'm using Impulse Theme, which comes with breadcrumb coding already in and with a checkbox to enable/disable "Collections" to show in the trail.

I have a mega-menu, however, so have collections and then sub-collections (or sub-categories, whatever you'd like to call them).

For instance, my menu reads as Shop>Bath & Body>Shampoo Bars and then within the Shampoo Bars I have different scents, such as Black Raspberry & Vanilla.

If I look at the Black Raspberry & Vanilla Shampoo Bar Product Page, then breadcrumbs show Home / Shampoo Bars OR Home / Collections / Shampoo Bars (if I tick the collections text box available with the theme editor. I would like it to show Home / Bath & Body / Shampoo Bars.

I understand that I'll have to change the coding and I'm ok with that, I've managed to create new product page templates and things by following tutorials and guides.

This one, however, will need to follow the navigation as far as I'm aware and I'm not sure how to do it.

The current coding is this:

{%- if settings.show_breadcrumbs -%}

{%- unless template.name == 'index' or template.name == 'cart' -%}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="{{ routes.root_url }}" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

{%- if template.name == 'product' -%}

{%- if collection -%}
{% if settings.show_breadcrumbs_collection_link %}
<span class="breadcrumb__divider" aria-hidden="true">/</span>
<a href="{{ routes.collections_url }}">{{ 'general.search.collections' | t | replace: ':', ''}}</a>
{% endif %}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
{% if collection.handle %}
{%- capture url -%}{{ routes.collections_url }}/{{ collection.handle }}{%- endcapture -%}
{{ collection.title | link_to: url }}
{%- endif -%}
{% endif %}
<span class="breadcrumb__divider" aria-hidden="true">/</span>

{%- elsif template.name == 'collection' and collection.handle -%}
{% if settings.show_breadcrumbs_collection_link %}
<span class="breadcrumb__divider" aria-hidden="true">/</span>
<a href="{{ routes.collections_url }}">{{ 'general.search.collections' | t | replace: ':', ''}}</a>
{% endif %}

<span class="breadcrumb__divider" aria-hidden="true">/</span>

{%- if current_tags -%}

{%- capture url -%}{{ routes.collections_url }}/{{ collection.handle }}{%- endcapture -%}
{{ collection.title | link_to: url }}

<span class="breadcrumb__divider" aria-hidden="true">/</span>

{%- for tag in current_tags -%}
{% if tag contains "_" %}{%- assign tag_starts_with = tag | slice: 0 -%}{% if tag_starts_with == "_" %}{% if tag_count %}{%- assign tag_count = tag_count | minus: 1 | at_least: 0 -%}{% endif %}{% continue %}{% endif %}{% endif %}

{%- assign tag_name = tag | strip -%}
{%- assign tag_text = tag_name | capitalize -%}
<span>{{ tag_text }}</span>

{%- unless forloop.last -%}
<span>+</span>
{%- endunless -%}

{%- endfor -%}
{%- endif -%}

{%- elsif template.name == 'blog' -%}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
{%- if current_tags -%}
{{ blog.title | link_to: blog.url }}
<span class="breadcrumb__divider" aria-hidden="true">/</span>
<span>{{ current_tags | join: " + " }}</span>
{%- endif -%}

{%- elsif template.name == 'article' -%}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
{{ blog.title | link_to: blog.url }}
<span class="breadcrumb__divider" aria-hidden="true">/</span>

{%- elsif template.name == 'page' -%}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
<span>{{ page.title }}</span>

{%- elsif template.name == 'search' -%}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
<span>{{ page_title | replace: '*', '' }}</span>

{%- else -%}

<span class="breadcrumb__divider" aria-hidden="true">/</span>
<span>{{ page_title }}</span>

{%- endif -%}
</nav>
{%- endunless -%}

{%- endif -%}

Is there anyone who can guide me as to what the coding that I need to add is and where I would put it?

I've been advised, for security, not to share the password for my store (it's live but not visible to the public yet).

Many thanks in advance

0 Likes