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

Add the following code to the top of your product-template.liquid file: 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 wis…

Hi, Thank you for replying. Yes, I am looking for Home > ProductType > ProductTitle breadcrumb.

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.

You need to add this code to your theme.css.liquid .breadcrumb{ margin-left: 45px;

You have to insert this code Home / {{ product.vendor }} / {{ product.title}} 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-aj…

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

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/

I actually combined a few of the answers above to get something to work nicely. Add this to product-template.liquid : You can put it in different places. Right under the top first div is common (before the {% comment %}), but I actually put mine after further down on the page, right before the …

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: .breadcrumbs { margin: 0 0 2em; **margin-left: 130px;** **margin-bottom: 15px;** } Hope this h…

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

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 Home / {{ product.type }} / {{ product.title}}</span I want to use ‘Collections’ instead of 'P…

How to add breadcrumbs? Shopify Debut theme

Shopify Discussion

tanglechocolate June 15, 2021, 8:03pm 15

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?

Topic		Replies	Views
How can I add a collection to my breadcrumb navigation in Debut theme? Store Design	1	50	September 17, 2021
Add breadcrumb menu without app Sense theme Store Design design , collection-page , css , shopify-themes , html , product-page	4	156	April 17, 2024
How can I add a breadcrumb trail to my Craft Theme store? Store Design design , css , shopify-themes , troubleshooting	9	227	November 25, 2024
How can I display navigation based breadcrumbs on my website? Store Design	15	308	March 19, 2024
Add "Shop all: Collection link" and Breadcrumbs navigation above my product page Shopify Discussion	4	126	March 14, 2023

How to add breadcrumbs? Shopify Debut theme

Related topics