How to add breadcrumbs? Shopify Debut theme

Solved
AtrangiStudio
Excursionist
27 1 2

Hi all,

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

0 Likes
JHKCreate
Shopify Partner
2515 412 596

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

Hi, Thank you for replying.

 

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

0 Likes
JHKCreate
Shopify Partner
2515 412 596

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
0 Likes
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
New Member
13 0 0

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

.breadcrumb{
margin-left: 45px;

0 Likes
Thinker101
New Member
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

 

 

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

0 Likes
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/

0 Likes
HenningH
New Member
1 0 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"

0 Likes