The breadcrumbs show the item name and not the collection it's in

[meeko]

Hey everyone!

I have 2 questions on how to fix my breadcrumbs. 

1. My breadcrumbs shows the product name and not the collection it's in (Please see below) 

2. Also, If you view the product off the landing page it doesn't show the collections it's in. But if I go through my tabs "For Her, Selfcare, then the product" it will show the collection (plus the product name) 

Please see the difference between the top screenshot and the below one, both the same product, both have different breadcrumbs.

 

Theme: Dawn

Website: https://meeko-8476.myshopify.com

Password: Meeko

This is the anchor attribute in: card-product.liquid

href="{{ card_product.url | within: collection }}"

This is the code for breadcrumb.liquid :

<style>
.breadcrumbs {
margin: 0 0 2em;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}
.pd_20 {
padding-top: 15px;
}

.breadcrumbs__link {
text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
.breadcrumbs__link_1 {
padding-left: 10px;
}
.breadcrumbs__item.breadcrumbs__link_n a {
padding-left: 10px;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- if collection.url -%}
<li class="breadcrumbs__item breadcrumbs__link_n">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item ">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item breadcrumbs__link_1">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item ">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link breadcrumbs__link_1" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}

[EBOOST]

Hi @meeko 

May I suggest to update code below:

    <style>
.breadcrumbs {
    margin: 0 0 2em;
}

.breadcrumbs__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
    border-style: solid;
    border-width: .10em .10em 0 0;
    content: '';
    display: inline-block;
    height: .20em;
    margin: 0 .20em;
    position: relative;
    transform: rotate(45deg);
    vertical-align: middle;
    width: .20em;
}
.pd_20 {
    padding-top: 15px;
}
.breadcrumbs__link {
    text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
    text-decoration: underline;
}
.breadcrumbs__link_1 {
    padding-left: 10px;
}
.breadcrumbs__item.breadcrumbs__link_n a {
    padding-left: 10px;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="/">Home</a>
        </li>
        {%- case t -%}
            {%- when 'page' -%}
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
                </li>
            {%- when 'product' -%}
                {%- unless collection -%}
                  {%- assign p = all_products[product.handle] -%}
                  {%- assign collection = p.collections | first -%}
                {%- endunless -%}
                {%- if collection.url -%}
                    <li class="breadcrumbs__item breadcrumbs__link_n">
                        {{ collection.title | link_to: collection.url }}
                    </li>
                {%- endif -%}
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
                </li>
            {%- when 'collection' and collection.handle -%}
                {%- if current_tags -%}
                    <li class="breadcrumbs__item ">
                        {{ collection.title | link_to: collection.url }}
                    </li>
                    <li class="breadcrumbs__item breadcrumbs__link_1">
                        {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
                    </li>
                {%- else -%}
                    <li class="breadcrumbs__item ">
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
                    </li>
                {%- endif -%}
            {%- when 'blog' -%}
                {%- if current_tags -%}
                    <li class="breadcrumbs__item">
                        {{ blog.title | link_to: blog.url }}
                    </li>
                    <li class="breadcrumbs__item">
                    {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
                    </li>
                {%- else -%}
                    <li class="breadcrumbs__item">
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
                    </li>
                {%- endif -%}
            {%- when 'article' -%}
                <li class="breadcrumbs__item">
                    {{ blog.title | link_to: blog.url }}
                </li>
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
                </li>
            {%- else -%}
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
                </li>
        {%- endcase -%}
    </ol>
</nav>
{%- endunless -%}

[meeko]

Hi @EBOOST 

Thank you so much for your reply.

I added the above code, it's now showing this funny banner on the homepage

And unfortunately it's still showing the name of the product in the breadcrumbs (Below) 

Do you know if there is a fix for these?

 

Kind regards,

Adrian

 

[EBOOST · Accepted solution]

Hi @meeko 

1. It is not related to code above. I saw it's a richtext

2. You can use code below to remove product name

    <style>
.breadcrumbs {
    margin: 0 0 2em;
}

.breadcrumbs__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
    border-style: solid;
    border-width: .10em .10em 0 0;
    content: '';
    display: inline-block;
    height: .20em;
    margin: 0 .20em;
    position: relative;
    transform: rotate(45deg);
    vertical-align: middle;
    width: .20em;
}
.pd_20 {
    padding-top: 15px;
}
.breadcrumbs__link {
    text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
    text-decoration: underline;
}
.breadcrumbs__link_1 {
    padding-left: 10px;
}
.breadcrumbs__item.breadcrumbs__link_n a {
    padding-left: 10px;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="/">Home</a>
        </li>
        {%- case t -%}
            {%- when 'page' -%}
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
                </li>
            {%- when 'product' -%}
                {%- unless collection -%}
                  {%- assign p = all_products[product.handle] -%}
                  {%- assign collection = p.collections | first -%}
                {%- endunless -%}
                {%- if collection.url -%}
                    <li class="breadcrumbs__item breadcrumbs__link_n">
                        {{ collection.title | link_to: collection.url }}
                    </li>
                {%- endif -%}
               
            {%- when 'collection' and collection.handle -%}
                {%- if current_tags -%}
                    <li class="breadcrumbs__item ">
                        {{ collection.title | link_to: collection.url }}
                    </li>
                    <li class="breadcrumbs__item breadcrumbs__link_1">
                        {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
                    </li>
                {%- else -%}
                    <li class="breadcrumbs__item ">
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
                    </li>
                {%- endif -%}
            {%- when 'blog' -%}
                {%- if current_tags -%}
                    <li class="breadcrumbs__item">
                        {{ blog.title | link_to: blog.url }}
                    </li>
                    <li class="breadcrumbs__item">
                    {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
                    </li>
                {%- else -%}
                    <li class="breadcrumbs__item">
                        <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
                    </li>
                {%- endif -%}
            {%- when 'article' -%}
                <li class="breadcrumbs__item">
                    {{ blog.title | link_to: blog.url }}
                </li>
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
                </li>
            {%- else -%}
                <li class="breadcrumbs__item">
                    <a class="breadcrumbs__link breadcrumbs__link_1" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
                </li>
        {%- endcase -%}
    </ol>
</nav>
{%- endunless -%}

[meeko]

Hi @EBOOST

Yay that worked!! 

Sorry how to I remove those 2 banners that are on the home page? 🙂 

[EBOOST]

Hi @meeko 

I suggest these steps

1. Go to Store Online-> theme

2. Customize

3. Click eye icon to turn on/ turn off section