Adding Breadcrumbs to my website

mattpermute
Explorer
58 0 24

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

 

Replies 13 (13)
Michal17
Shopify Partner
835 73 161

Hi @mattpermute 

Hope you're having a great day!

Useful resource:

How to add breadcrumbs navigation?

dmwwebartisan
Shopify Partner
11162 2395 3435

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
LitExtension
Shopify Partner
4677 955 981

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
mattpermute
Explorer
58 0 24

I am looking to add it to all the pages possible

 

LitExtension
Shopify Partner
4677 955 981

Hi @mattpermute,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
blake8
Tourist
5 0 2

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 

 

blake8_0-1625024879818.png

 

 

dmwwebartisan
Shopify Partner
11162 2395 3435

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blake8
Tourist
5 0 2

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
Shopify Partner
11162 2395 3435

@blake8 

It's my pleasure to help you.

If helpful then please Like and Accept Solution

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
mattpermute
Explorer
58 0 24

@LitExtension  where do I add this code?

LitExtension
Shopify Partner
4677 955 981

@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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
blake8
Tourist
5 0 2

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_0-1625389214355.png

 

blake8
Tourist
5 0 2

 

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_0-1625534960865.png