Shopify themes, liquid, logos, and UX
Hi everyone,
I have finally added breadcrumbs in to my page, but they don't show the navigation path when you go in to an actual product (Which is what I'm after)
It just shows "Home , then the product name"
Below is the screenshot when I go to a collections tab (Which is good)
BUT as soon as you go in to a product, it doesn't show the collection any more, it just shows the "home" breadcrumb without the collection tab, please see below:
Theme: Dawn
Website: https://meeko-8476.myshopify.com
Password: Meeko
THIS IS THE CODE IN: theme.liquid
<div class="page-width pd_20">
{% include 'breadcrumb' %}
</div>
THIS IS THE CODE IN breadcrumb.liquid
<style>
.breadcrumbs {
margin: 0 0 2em;
}
.breadcrumbs__list {
list-style-type: none;
margin: 0;q
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.
Hello @meeko
Once you Log in to the Admin, then process the following steps:
Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file card-product.liquid
Step 3: replace the all anchor link attribute to below attribute-> Save
href="{{ card_product.url | within: collection }}"
If you find our reply helpful, please hit Like and Mark it as a Solution.
An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call: 877.536.3789
Canada: 150 King St W. STE 200, Toronto, ON M5H 1J9
| USA: 98 Cutter Mill Rd. STE 466, Great Neck, NY 11021
This is an accepted solution.
Hello @meeko
Once you Log in to the Admin, then process the following steps:
Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file card-product.liquid
Step 3: replace the all anchor link attribute to below attribute-> Save
href="{{ card_product.url | within: collection }}"
If you find our reply helpful, please hit Like and Mark it as a Solution.
An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call: 877.536.3789
Canada: 150 King St W. STE 200, Toronto, ON M5H 1J9
| USA: 98 Cutter Mill Rd. STE 466, Great Neck, NY 11021
Thank you so much.
Sorry, which lines do I replace with href="{{ card_product.url | within: collection }}"
I just changed them all now it works!!!
THANK YOU so much.
Appreciate your help 🙂
When I go in to a product. It doesn't show the collection it's in, it just shows the name of the item (See below)
Also if I view the product off the home page it doesn't show the collection it's in.
Compared to if I go through "For Her - Self-care - Then the product" It will show the collection it's in.
If you can see the breadcrumb link difference between the top screenshot and the below one.
Hello @meeko
Once you Log in to the Admin, then process the following steps:
Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file card-product.liquid
Step 3: replace the All anchor link attribute to below attribute-> Save
href="{{ card_product.url | within: collection }}"
If you find our reply helpful, please hit Like and Mark it as a Solution.
An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call: 877.536.3789
Canada: 150 King St W. STE 200, Toronto, ON M5H 1J9
| USA: 98 Cutter Mill Rd. STE 466, Great Neck, NY 11021
Hello, it works perfect but on the home page I get a blank space, how can I remove it? thank you
Hi there,
I am trying to solve a similar issue, all our products only show "All Products" in the breadcrumb. I have looked in code and can't find card-product.liquid can you help?
https://www.alternative-footwear.co.uk/products/pleaser-adore-1020gp
Hello @meeko
If your URL contains collection then the collection will be shown in the breadcrumbs otherwise it will not show.
my website https://lukkydeals.com also has the same problem, breadcrumbs do not show the entire path of the product. All the products are in different collections. How do show the full path of the product in the breadcrumbs.
Thanks for the help
Sree
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