Adding Breadcrumbs to my website

mattpermute
Excursionist
42 0 17

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

 

0 Likes
Michal_Morek
Shopify Partner
821 73 139

Hi @mattpermute 

Hope you're having a great day!

Useful resource:

How to add breadcrumbs navigation?

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes
dmwwebartisan
Shopify Partner
7346 1736 2319

@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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
LitExtension
Shopify Partner
1210 155 216

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
mattpermute
Excursionist
42 0 17

I am looking to add it to all the pages possible

 

0 Likes
LitExtension
Shopify Partner
1210 155 216

Hi @mattpermute,

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

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
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
7346 1736 2319

@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 | Bag is a cart drawer that maximizes your sales. View app →
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
7346 1736 2319

@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 | Bag is a cart drawer that maximizes your sales. View app →