Solved

How to add breadcrumbs? Shopify Debut theme

AtrangiStudio
Excursionist
27 1 2

Hi all,

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

Accepted Solution (1)
JHKCreate
Shopify Expert
3571 639 916

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 21 (21)

JHKCreate
Shopify Expert
3571 639 916

Hi @AtrangiStudio !

What format of breadcrumbs are you looking at?

Home > ProductType > ProductTitle

for example?

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
AtrangiStudio
Excursionist
27 1 2

Hi, Thank you for replying.

 

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

JHKCreate
Shopify Expert
3571 639 916

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
AtrangiStudio
Excursionist
27 1 2

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
Tourist
12 0 1

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

.breadcrumb{
margin-left: 45px;

Thinker101
Visitor
1 0 0

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
Tourist
3 0 1

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
Excursionist
27 1 2

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
Tourist
4 1 0

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
Excursionist
27 1 2

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

AtrangiStudio
Excursionist
27 1 2

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
Visitor
2 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

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
Visitor
2 0 0

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
Tourist
7 0 3

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

Karin_M
Visitor
2 0 0
Unfortunately, I wasn’t able to solve it yet.
FIAKHAN
Visitor
1 0 0

How did you solve this issue?

 

Dreamland_Dave
Pathfinder
101 1 25

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
Explorer
52 0 17

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!

Brittany Witt

Anderson88
Excursionist
12 0 5

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.