How to add breadcrumbs? Shopify Debut theme

[AtrangiStudio]

Hi all,

I have tried multiple options but no success with the breadcrumbs. Request you all to help.

[JHKCreate]

Hi @AtrangiStudio !

What format of breadcrumbs are you looking at?

Home > ProductType > ProductTitle

for example?

[AtrangiStudio]

Hi, Thank you for replying.

Yes, I am looking for Home > ProductType > ProductTitle breadcrumb.

[JHKCreate · Accepted solution]

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!

[AtrangiStudio]

Hey, thank you so much, it worked!

However, could you please also share details as to how to add padding / spacing?
Right now it is sticking to the left corner and to the image at the bottom.

[pchabrand]

You need to add this code to your theme.css.liquid

.breadcrumb{
margin-left: 45px;

[Thinker101]

You have to insert this code

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

under this class 

<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>

Then add 

 .breadcrumb{
margin-bottom: 50px; }

in theme.css

[SlideeAnt]

What if your product pages are built using a 3rd part app like Gem Pages? 

They have told me that the breadcrumb is part of the header so it won't work if just added to the produc theme. I'm still abit new to Shopify so any advise would be appreicated. 

Thanks

Antony

[AtrangiStudio]

Hi, 

The breadcrumb seems to have some issue on my website.

Eg - Home>Collection> Product

Whenver I am on the product page, and click the collection part of the breadcrumb, it leads to 404 error. Could you please assist?

Link - http://atrangistudio.com/

[HenningH]

I actually combined a few of the answers above to get something to work nicely.

Add this to product-template.liquid :

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

You can put it in different places. Right under the top first div is common (before the {% comment %}), but I actually put mine after <div class="product-single__meta"> further down on the page, right before the line with product.title in it.

Also, I removed the second line from the above code, because I only wanted to give them the option of going back up to the products, not all the way home.

Next, add this to theme.css :

.breadcrumb{
margin-bottom: 50px; }

Then, create a collection named "YOUR COLLECTION NAME".

Add all your products to the collection - from collection page.

Set the product type (on the product page for each product) to "YOUR COLLECTION NAME"

[AtrangiStudio]

Hey, thank you! However, did not quite understand the last three lines.
Could you please explain again?

[AtrangiStudio]

Hi, I want to add breadcrumbs to my website http://atrangistudio.com/
Format - Home / Collections / Product

Earlier I was using the below code which was in the format Home / Product Type / Product

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

I want to use 'Collections' instead of 'Product Type. Kindly request you to please suggest the necessary change required in the code.

[gika]

Hi,

How could you do it so that the name of the collections would appear in the breadcrumbs? I am going crazy and I can't get the collections to appear correctly.

It is also important to say that each product is in several collections at the same time, so which collection should shopify choose? Is there any way to tell him which collection he should take?

Thanks,

[tanglechocolate]

Hi AtrangiStudio,

I saw that your website now has the right breadcrumb structure you were hoping to create. Are there any tips you could offer to someone looking to create similar changes? 

[Aria1018]

Hi AtrangiStudio,

I saw that your website now has the right breadcrumb structure you were hoping to create. Are there any tips you could offer to me looking to create similar changes? 

[Karin_M]

Hi there, 

I saw that AtrangiStudio now has the right breadcrumb structure. Are there any tips you could offer to me looking to create similar changes? 

[Cathyem]

I am having the same problem, please can you explain how you solved it.

[Karin_M]

Unfortunately, I wasn’t able to solve it yet.

[FIAKHAN]

How did you solve this issue?

[Dreamland_Dave]

This code does not work for me in debut theme for my site www.dreamlandorganics.com.

I'm getting a 404 error. I would like it to link to collection, not product type. Thanks in advance.

[Brittany_Witt]

I found this bit of code that worked beautifully for me. I also have Debut theme.

The only thing I added was: 

margin-left: 130px;
margin-bottom: 15px;

I put it within in that first paragrah of code:

<style>
.breadcrumbs {
margin: 0 0 2em;
margin-left: 130px;
margin-bottom: 15px;
}

Hope this helps!

[Anderson88]

It worked to get the breadcrumb using the above solution but it doesn't look great: https://weglobe.com.my/collections/dry-and-damaged-hair/products/olives-omega-3-repair-shampoo-for-d... 

Also, if I want it on all the pages except the index page how would I go about that? Do i need to paste the code into each liquid I want the breadcrumb to be shown?

Thanks in advance for the help.