Adding Breadcrumbs to my website

[mattpermute]

Hello,

I am looking to add breadcrumbs to this website I am working on.

There doesn't seem to be an option on the theme setting to add that, is there a good way to manually install that option?

Here is the link: https://et4n1pqq08w417y5-11985066.shopifypreview.com

Thanks!

-MM

[Michal17]

Hi @mattpermute 

Hope you're having a great day!

Useful resource:

How to add breadcrumbs navigation?

[dmwwebartisan]

@mattpermute 

Add the following code to the top of your product-template.liquid file:

<nav aria-label="Home" class="breadcrumb"> <a class="Breadcrumbs" href="{{ routes.root_url }}">Home </a> / <a class="Breadcrumbs" href="/collections/{{ product.type | handleize}}"> {{ product.type }} </a> / <span class="breadcrumb__link" aria-current="page" style="font-weight:bold;"> {{ product.title}}</span> </nav>

What you need is a collection for each Product Type with the same name as the Product Type so that the link takes the user to the correct collection.  

You can also style the elements with the classes you have above as you wish.

Cheers!

[LitExtension]

Hi @mattpermute, 

Do you want to add it to all pages or just some, please list, I will help you add the code for each page

[mattpermute]

I am looking to add it to all the pages possible

[LitExtension]

Hi @mattpermute,

You just need to add this code https://pastebin.com/WHXTkyhv
Hope it clear to you.

[mattpermute]

@LitExtension  where do I add this code?

[LitExtension]

@mattpermute 

Please follow the steps:
- Step 1: Add a new snippet with name "breadcrumbs". https://i.imgur.com/OP1FSlD.png
- Step 2: Add code in file layout > theme.liquid. https://i.imgur.com/9o2qr89.png
{% include 'breadcrumbs' %}
Hope it clear to you.

[blake8]

Hi there,

I am looking to remove the breadcrumb from two pages: Home Page and About Us Page.

The reason I am looking to remove the breadcrumb from these pages is because when I uploaded the Pagefly Page, the breadcrumb navigation was formatted wrongly (see attached image) and I would just like to remove the breadcrumb all together from the specific pages.

I don't know which piece of code needs to be removed to so that the breadcrumb is removed from only the specific pages.

Cheers,

Blake 

[dmwwebartisan]

@blake8 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-page .breadcrumbs{
display: none;
}

Hope this works.

Thanks!

[blake8]

Hi dmwwebartisan,

This worked perfectly, I have no removed the breadcrumbs from the "Our Story" page.

Thank you so much for your swift response.

Have a lovely day.

Blake 

[dmwwebartisan]

@blake8 

It's my pleasure to help you.

If helpful then please Like and Accept Solution

[blake8]

Hi,

I am now having the same issue on my home page, even after adding the suggested code that removed the breadcrumb from my "About Us" page. Please see image below.

Is there another piece of code I need to add? Or do I need to add that code to a different file?

Any help would be greatly appreciated.

Cheers,

Blake 

[blake8]

Hi,

I am now having the same issue on my home page, even after adding the suggested code that removed the breadcrumb from my "About Us" page. Please see image below.

Is there another piece of code I need to add? Or do I need to add that code to a different file?

Any help would be greatly appreciated.

Cheers,

Blake