What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Breadcrumbs on Dawn theme

How can I add full path breadcrumbs to the Dawn theme?

ABCbtqmedequip
Excursionist
31 0 2

Hello!

Would anyone be able to advise on how to add full path breadcrumbs on the dawn theme? 

Thank you. 

Replies 15 (15)

Campionk
Shopify Partner
38 0 4

1. Create a snippet called 'breadcrumbs'

2. Paste the below code in snippet file

3. Go into 'Customize' theme -> navigate to product page -> click 'add-section' -> add custom liquid -> add this code: {% render 'breadcrumbs' %}

-------------------------------------

<style>
.breadcrumbs {
margin: 1em 6em 1em;
}

.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;
}


.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
text-decoration: underline;
}
.breadcrumbs__link {
color: #476154;
text-decoration: none;
}

</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>
<li class="breadcrumbs__item">
<a id="bread"class="breadcrumbs__link" href="https://pine-pressed-flowers.myshopify.com/collections/all">All Products</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">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" 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">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" 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" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" 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" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}

EugeniuS
Shopify Partner
22 0 1

Hi,

Good solution, but they don't show the path through Collection.

Is it possible to show the breadcrumbs with this structure: Home/Collection/Product instead of Home/Product?

 

Thx!

adventmedia
Pathfinder
128 0 33

Yeah, same question here. Links back to Home is not really a breadcrumb. Kinda useless unless the path is in the breadcrumb.

 

AnnaBeiderman
Tourist
10 0 4

Delete this code 

<li class="breadcrumbs__item">
<a id="bread"class="breadcrumbs__link" href="https://pine-pressed-flowers.myshopify.com/collections/all">All Products</a>

forari
New Member
10 0 0

This is great... How can i make this align with the left edge of the logo and the content? Right now, its flushed all the way to the left side of the browser.

Campionk
Shopify Partner
38 0 4
If you send your url, I can help.
Campionk
Shopify Partner
38 0 4

The breadcrumbs need to be live in order for me to see what the issue is. 

forari
New Member
10 0 0

check now, on large screen it gets too flushed to the left and on mobile, its centered. On big screen, i want to have it left justified with the logo and on mobile, i want it left justified aligned with content.

Campionk
Shopify Partner
38 0 4

You will need to adjust the margin of the breadcrumbs class.

 

CURRENT CODE:

.breadcrumbs {
margin: 1em 6em 1em;
}

 

NEW:

.breadcrumbs {
margin-left: 135px
}

@media screen and (max-width: 749px) {

.breadcrumbs {

margin-left: 0px;

text-align: center;

}

}

 

forari
New Member
10 0 0

thanks for that... It's not doing what i want it to do tho. I have a big resolution and its still being flushed to the left side, i guess 135 margin from left on all resolution. Im not a programmer but my guess in order to make this work, it needs to be in a container same width as the container logo and nav is in and have that centered on the whole page? 

blonde_creative
Tourist
25 0 2

Hi, did you ever find a solution to fix the breadcrumbs to the main container? I'm having the same issue of it sitting too far to the left.

Thanks in advance!

DiAmoreDS
Visitor
1 0 0

Hello
I had the same problem.
I just made a copy of the section - custom liquid (in the theme code)
and made the section width 80%
That helped

now I have 2 different sections of custom fluid,

1 - full screen
2 - 80% width 🙂 - I use this one now just for such cases

Xeniadono
Visitor
1 0 0

This was really helpful. However, I am having an issue I would like to find out how to resolve. 

The path goes Home>Whichever collection or product you click on, yet it is skipping the previous places you clicked on before you reached there. 

Example: I landed in Home, then clicked Shop, then clicked See all Collections> Then clicked Green Tea collection and finally a given green tea from within the collection.

The path shows Home>Given Collection or Home>Given product but no the full path, which is how it should be so users can go back to the previous section at ease. 

Can someone please help me with that? 

Thanks in advance!

sakinur-rahman
Shopify Partner
139 17 22

Hi

You may follow this video. 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications -

Your Coffee Tip and my code, A perfect blend. ❤️ Buy Me A Coffee


Website: HelloSakin.com