Shopify themes, liquid, logos, and UX
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 -%}
Solved! Go to the solution
This is an 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 -%}
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 -%}
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
This is an 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 -%}
Hi @meeko
I suggest these steps
1. Go to Store Online-> theme
2. Customize
3. Click eye icon to turn on/ turn off section
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025