Breadcrumbs Does Not Show The Category Path - Dawn Theme

Solved

Breadcrumbs Does Not Show The Category Path - Dawn Theme

meeko
Excursionist
36 0 4

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)

1111.png

 

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:

222.png

 

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

Accepted Solution (1)

WebDeskSolution
Shopify Partner
191 42 51

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

 

WebDeskSolution_0-1674468422282.png

 

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

View solution in original post

Replies 9 (9)

WebDeskSolution
Shopify Partner
191 42 51

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

 

WebDeskSolution_0-1674468422282.png

 

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

meeko
Excursionist
36 0 4

Hi @WebDeskSolution 

 

Thank you so much.

 

Sorry, which lines do I replace with href="{{ card_product.url | within: collection }}"

 

1111.png

meeko
Excursionist
36 0 4

Hi @WebDeskSolution 

 

I just changed them all now it works!!!

 

THANK YOU so much.

 

Appreciate your help 🙂

meeko
Excursionist
36 0 4

Hi @WebDeskSolution 

 

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) 

11111.png

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. 

22222.png

WebDeskSolution
Shopify Partner
191 42 51

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

Suttanev
Visitor
2 0 0

Hello, it works perfect but on the home page I get a blank space, how can I remove it? thank you

 

Captura de pantalla 2023-04-11 183142.png

AlternativeFoot
Excursionist
17 0 11

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

amanbatra
Shopify Partner
104 14 17

Hello @meeko

If your URL contains collection then the collection will be shown in the breadcrumbs otherwise it will not show.

Is the solution works for you ? please Like and Accept Solution.
Need more help with theme customization and store development ?
WA: +917508271396, Email: amanbatra.developer@gmail.com, Skype: amanbatra.developer
sreetirumannama
Excursionist
14 0 3

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