Here's how to add custom breadcrumbs in a Shopify Plus store.
Code for the Liquid Snippet
Transcript
Hey, Scott Austin here.
And what I want to show you is a modified breadcrumb for the checkout experience. And that's what you see right here with these numbered dots. 1, 2, 3, 4, and with the different, you know, steps of the checkout. Now, this process only works for Shopify plus stores because you need to be able to edit your checkout dot liquid file. And you're only able to do that if you're a Shopify Plus store. So what I'm going to do is provide the full code to make this work. And if you're looking at this on YouTube, just go to the blog article that I'll link to on my website, right in the, in the description, and you'll see the code, or if you're on my blog, you'll see it right there. Also, you just grab the code and that code looks like this. So what I have here is check out bread comes liquid, right? And I'm going to close a couple other files. So we don't get confused here. And this is all the codes you need to make the breadcrumbs work that said, if you go to a checkout liquid, if your Shopify plus store you'll have, you should have a checkout liquid in your theme. If not the Shopify support team can add it for you. And what you'll see is down a little bit farther, we've got this breadcrumb element and that's, that was there by default. And I commented that out. So that was the breadcrumbs. That was just the little text breadcrumbs, right? So that's what shows it by default. And what I added was a render for the checkout breadcrumbs snippet, which is the one that we add here. So the code snippet I'm going to show you is what you need to add to check out breadcrumbs, to copy the whole thing, create a new snippet, drop it in there, and you'll have to go to check out liquid and add the render line for the checkout breadcrumbs and comment out or delete the breadcrumb element.
So if we look at the liquid file, you'll see what we have is there's some CSS down at the bottom for styling of the elements at the top, we've got some liquid code and it's just an if then statement. And you can see, you know, there's the, if content for layout contains data, step contact information. So this is how we decide which step in the process we're in and what we do regardless of which step we're in. We show the same four dots. All we do differently is which ones are clickable, right? So when you're on a step, let's just go on to shipping method as the next step in shipping method. You know, that's when I hover over customer information, it's, it's a clickable link, same thing with cart, but shipping method is not clickable because I'm on that step and payment methods, not bull because we want you to click the buttons to go on forward.
So I can, you know, go back here and I can, you know, move forward again. And I can pick my shipping, you know, method. I can also move on to the payment method. And like I said, each of the previous methods or steps is clickable. So one of the things we do differently for each of those four, and those are ally elements is we decide which ones to the previous ones are clickable. So you see in the first one here, only one of them is clickable and that's to go back to the cart. And the second one, two of them are clickable the cart and the contact information and then, you know, so on and so forth. So that's one thing we change in each of these four conditions. The other thing we change is the class names for those elements, because the class names determine the coloring that happens.
So we've got a, a normal BC item, a BC, you know, BC for breadcrumb complete. And from those we come up with the CSS styling and I think there's complete. And there's also current. Yeah, there we go. Current. So those three classes determine if it's a green, that's a complete, if it's orange, it's current and then the BC, they're all BC items and they get that default treatment of the transparent background. So then I also in the CSS or in the liquid snippet, I have a couple of signs just cause I, I like making a sign lines and, and defining a color code that way so that when I reuse color codes down here, I, you know, it's easier for me to just think of the name I'm looking for green for here instead of trying to figure out which one of the hex codes is the green one.
So I always like doing this, doing a sign for the different color codes I'm going to use, give them a name and then use those names down. But if you follow that logic, you'll, you'll be able to see pretty quickly that, you know, the color coding that happens on these different elements. So that is the file. And here you can see it working. You know, we went through the steps already. It works, you know, find, and this is generic of any theme that you're working in. This is just, you know, liquid code. There's no JavaScript going on here. And we're only using the settings for color inside of this snippet. So we're not calling any theme settings to bring in the color because we're defining the colors right there. So this code should work in any theme. If you have a Shopify plus store with a checkout dot liquid template.
Hopefully that helps. Thanks for watching.