How to add breadcrumbs? Shopify Debut theme

Solved
AtrangiStudio
Tourist
16 0 2

Hi all,

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

0 Likes
JHKCreate
Shopify Partner
2009 326 438

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
Tourist
16 0 2

Hi, Thank you for replying.

 

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

0 Likes
JHKCreate
Shopify Partner
2009 326 438

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