Solved

Breadcrumbs Does Not Show The Category Path - Dawn Theme

meeko
Excursionist
36 0 2

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
165 42 47

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 | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

View solution in original post

Replies 7 (7)

WebDeskSolution
Shopify Partner
165 42 47

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 | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

meeko
Excursionist
36 0 2

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 2

Hi @WebDeskSolution 

 

I just changed them all now it works!!!

 

THANK YOU so much.

 

Appreciate your help 🙂

meeko
Excursionist
36 0 2

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
165 42 47

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 | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

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

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