Breadcrumb navigation can be a major part of SEO for many sites, including those on the Shopify platform. However, actually making use of the breadcrumb trail is not easy, especially not for people who barely understand how they work.
While Shopify’s default breadcrumbs code is not perfect, some tweaking can make it a major part of your store. But what is this breadcrumbs code, and how does it work?
What are breadcrumbs? And why do they even matter?
Breadcrumbs are a major navigational addition to any website, working with the concept of a page hierarchy.
While simple sites might only have a home page with multiple offshoot pages, most Shopify stores are going to rely on breadcrumb navigation across multiple layers of pages.
For example, you might have a general category page, then a specific category page, and then a product page.
Breadcrumb navigation allows users to easily navigate back to the higher level page without having to use the back button on their browser, meaning that it is easier to navigate between each product page or the website’s sections.
Three types of Shopify breadcrumbs hierarchy
Understanding breadcrumb navigation means understanding how breadcrumbs are structured.
1. Breadcrumbs are based on a hierarchical structure
Hierarchy-based breadcrumbs are the most popular form of breadcrumb navigation. These have multiple functions within any given store, including:
- Navigation through layered content.
- Letting customers know their location in the website’s hierarchy, with breadcrumb links to move to higher level pages.
- Acting as a secondary navigation aid.
These hierarchy-based breadcrumbs help customers find all the pages they need, showing them where they are in the trail of breadcrumbs – just like the famous tale of Hansel and Gretel marking their path with breadcrumbs.
Whether they are on a product page or a blog, breadcrumb navigation lets them understand where their current page is compared to the rest of the store’s content and every page, often with links to “back out” to a higher level.
2. Breadcrumbs based on attributes (category page)
Attribute-based breadcrumbs rely on the searching attributes of a page, making it a popular choice for e-commerce websites.
Since these websites have a lot of products that often have to be categorised and classified by certain criteria, attribute-based breadcrumbs code works very well, giving users easy links to higher levels of the store search or category page.
This also helps users easily understand each page that they have been linked to directly, letting the user see the breadcrumb trail (such as the category and sub-category page) to tell them what section of the store they are on.
3. Breadcrumbs based on browsing history
History-based breadcrumbs rely on browsing history, making them less popular as a breadcrumb navigation tool. However, they can provide links directly to the store search page that the user was just on.
Many sites use these alongside other kinds of breadcrumbs, showing users their location on the site and allowing them to return to their search results. This saves the user from having to open multiple tabs or input their search criteria again
How do breadcrumbs work in Shopify?
While different theme settings handle breadcrumb navigation in different ways, the general idea is always the same. At a product page level, Shopify uses data from the URLs of any page to construct the breadcrumbs displayed on the page.
This text is taken straight from the URL by default to a page at collection/office-chairs/chairname would be Collection > Office Chairs > Chairname.
While this is good for automating part of the process, it also creates some potential problems.
The problem with breadcrumbs in Shopify
Since breadcrumb navigation is automated using data from the URL, the details themselves can cause a lot of issues. For example, if product pages are accessed through multiple URLs, the breadcrumb navigation list might be different depending on how they accessed the page.
This leads to SEO problems, issues with navigation, and even potential problems with linking to the “correct” version of the page. Certain methods of fixing this issue can break breadcrumb navigation outright, meaning that it takes some time and effort to prevent this problem.
The other issue is that a category or product listing title does matter. The longer the page titles, the longer they will look in the navigation list, which can mean that certain combinations of terms become very hard to read at just a glance.
Why breadcrumbs matter for SEO
Breadcrumb navigation is a core part of making your site functional for users, but it can also be important for SEO. Page accessibility is a huge part of how SEO works – the more clicks it takes to reach certain pages, the worse they will perform.
Breadcrumb navigation provides an easy way for users to navigate between pages that are several layers deep within the site. They are not just part of web design but a tool to get users around the website in as few steps as possible.
If you add breadcrumb navigation to a page hierarchy, the SEO of all pages that have links to that hierarchy could improve. Since a store’s content is generally geared heavily towards SEO opportunities, a Shopify admin should focus on these kinds of tweaks as often as possible.
How breadcrumbs should be structured in eCommerce
Even if you want to add breadcrumb navigation to your site, you need to understand how the new snippets work. You can’t jump right into becoming your site’s breadcrumb code editor, especially not if you do not really know how to structure and edit code in general.
For example, a lot of new coders may struggle with things like an elsif template – and an elsif template can be a core part of the breadcrumb code.
While looking into elsif template tutorials can help you construct an elsif template that only tells you how to make a new file with an elsif template – you need to know how breadcrumbs are structured.
There are two ways that a whole breadcrumbs snippet structure can be set up:
1. History based breadcrumbs (don’t do this)
You should never add breadcrumb navigation based on user history unless you absolutely need to. This dynamic breadcrumbs snippet uses information from URLs to add breadcrumb navigation to each page, but with the downside of not being static.
This can damage SEO and cause your store’s page count to end up bloated. Bad code could even lead to your website 404’ing a lot more than it should or a title causing URL problems when users are trying to explore your store.
2. Hierarchy structured breadcrumbs (do this!)
A hierarchy-based breadcrumbs snippet ensures that each collection is connected to the page list within it. If a user goes into a collection, each product page will display a link back to that collection or page index, opening up easier navigation through your store.
These use a fixed hierarchy and always display the same collection or index structure, often based on a pre-prepared template. This ensures consistent navigation through your website’s sections, following code template details that do not adjust themselves dynamically.
A Shopify admin should generally use this hierarchy system, almost like a secondary navigation bar. It needs to be clear and consistent and use the breadcrumb element to provide users with easy navigation around the website.
How to add breadcrumbs to Shopify
Before you can make any changes to the code, you need to know if your Shopify theme supports them.
You can check this in one of two ways: see if your store already uses them, and if not, check any theme settings that might enable them.
While most themes will support breadcrumb navigation, you should talk to your developer (or another website specialist) if you need support adding them. If nothing else works, switching to a new, similar theme could be a workaround.
Adding breadcrumbs involves following code from Shopify documentation, which you can find quite easily if you are looking for the breadcrumb code. This code is a theme.liquid snippet, allowing it to work with most themes that can support breadcrumbs.
If your theme does not support this liquid snippet, breadcrumbs cannot be enabled. However, for themes that do support this liquid code but do not currently have the liquid snippet, breadcrumbs can be added by simply pasting in the relevant liquid code inside the main content wrapper.
Again, if you are not confident using any kind of code editor or trying to edit code yourself, getting help could be the best option.
If breadcrumb navigation is already being used on the current page (or the store as a whole), then you can always make edits as needed. Things like font weight, list style type, inline block text and text decoration can be adjusted through basic code edits.
Customising these details can really help. For example, in list collections, separator characters can change how the list looks, allowing those list collections to be broken up by attractive separator characters on both desktop and mobile devices.
How to implement a hierarchy breadcrumb structure in Shopify
Now that you have the breadcrumb liquid code enabled and ready to use, you can actually start to implement the hierarchy itself.
Remember, you will want to prepare your website for this. Gather up any relevant URL and collection information, understand how the snippet and template work, and prepare your code editor tools just in case you need to make changes.
1. Automatically build breadcrumbs based on your main menu
It is possible to automate all the pages (or at least some of them) for your new snippet.
This should work with each current page on your site under the breadcrumb navigation system. For example, if you have a “kids” drop-down collection, every last child page underneath that should be added to the navigation automatically.
Working with a developer makes this much easier since they can understand the snippet and template work required to automate this process.
2. Manually build breadcrumbs with meta fields
You can also create everything from the snippets folder to the individual new snippet breadcrumbs manually.
This requires you to understand the current page and website code and will take some user testing to get right. However, if done right, it can give you more flexibility in how each new file and snippet is constructed.
However, if you just want easy implementation of the breadcrumb snippet system on your store, following a template and automating the work is still easier.
5 breadcrumbs tips to boost your traffic to your Shopify store
Tip 1: Use breadcrumb navigation if your website has multi-layered sub-pages
From a blog or article page to a product listing, this kind of snippet can make a store or other website much easier to use.
You can jump from the main blog page to each individual blog post or from an article back to an article category. Even when used on a store blog, it can help users get back to the main store quickly, regardless of their current page.
Tip 2: Don’t make your breadcrumbs appear too long
Page title and URL lengths can matter. If your current page has a long title, create a new snippet with a shorter version, or make a direct change and shorten the URL itself.
If your breadcrumb template is tacking each URL directly and adding it to that template as a navigation term, a long title may cause issues. Title text might overlap or take up an extra line and will become harder to read overall.
Tip 3: Keep your breadcrumbs’ titles compatible with your page titles
Always keep title and URL information accurate to your store. Just like SEO, you want your store to focus on relevancy, and store navigation should be clear and SEO-friendly.
If a template takes a store page title in the wrong way, change it. Do not be afraid to adjust the navigation code if you need to.
Tip 4: Choose the proper type of breadcrumbs liquid code/liquid snippet
It is important to choose the right breadcrumb navigation type for your store. Never settle for the easiest option – think about what would suit your store best overall.
Tip 5: Get creative
Whether you barely understand an elsif template or have in-depth coding knowledge, it is important to get creative. There is a lot you can do with your snippets folder, from store visual design to URL names.
Final Thoughts
Breadcrumbs are a vital part of improving your navigation and can even influence your SEO.
Whether you want to fully overhaul navigation or just add breadcrumbs as an extra feature, implementing them correctly can take time – but the benefits are well worth the wait.
