Solved

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

meeko
Excursionist
36 0 2

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) 

11111.png

 

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.

22222.png

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 -%}

Accepted Solution (1)
EBOOST
Shopify Partner
623 182 199

This is an accepted solution.

Hi @meeko 

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

EBOOST_0-1674560475127.png

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 -%}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST

View solution in original post

Replies 5 (5)

EBOOST
Shopify Partner
623 182 199

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 -%}

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
meeko
Excursionist
36 0 2

Hi @EBOOST 

 

Thank you so much for your reply.

 

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

111111.png

 

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?

2222.png

Kind regards,

Adrian

EBOOST
Shopify Partner
623 182 199

This is an accepted solution.

Hi @meeko 

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

EBOOST_0-1674560475127.png

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 -%}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST
meeko
Excursionist
36 0 2

Hi @EBOOST

 

Yay that worked!! 

 

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

EBOOST
Shopify Partner
623 182 199

Hi @meeko 

I suggest these steps

1. Go to Store Online-> theme

2. Customize

EBOOST_0-1674562850466.png

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

 

EBOOST_2-1674562904120.png

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


DONATE


EBOOST