When running an online store on Shopify, breadcrumb navigation is one of the important elements from both a usability and SEO standpoint. Breadcrumb navigation is a handy feature that shows customers where they currently are on the site, letting them easily go back to a previous page.
This article explains the benefits and drawbacks of adding breadcrumb navigation to your Shopify blog posts, along with how to implement it.
What Is Breadcrumb Navigation
Breadcrumb navigation is like a signpost showing customers where they currently are. For example, it clearly displays your current location as something like "Home > Women's > Dresses > Summer." It's like being in a store and knowing you're standing in the "summer section of the dresses corner in the women's department."
This navigation feature helps customers move around your site without getting lost. For example, if a customer is on a dress page and wants to go back to the overall Women's category, they can get there easily just by clicking "Women's" in the breadcrumb.
Breadcrumb navigation also makes it easier for search engines to understand your site's structure, which is beneficial from an SEO (search engine optimization) standpoint. This can increase the chances of your Shopify store ranking higher in search results.
Benefits of Adding Breadcrumb Navigation
Improved Usability
Displaying breadcrumb navigation lets visitors understand where they currently are and easily access the parent category of their current location, making it easier for them to find products or blog posts on your Shopify site.
For example, if you display breadcrumb navigation like "Apple > iPad > iPad Air (5th generation)" on the product page for the "iPad Air (5th generation)," a visitor on that product page who wants to see "other iPad products" can simply click "iPad" in the breadcrumb to reach the list of "other iPad products."
Can Deliver Good SEO Effects
As mentioned above, making it easier for visitors to reach other pages can boost repeat visits and page views, and it can also improve crawlability for bots, both of which can have a positive effect on SEO.
The article below explains the benefits of SEO and the SEO measures you can take on Shopify. Please use it as a reference.
Drawbacks of Adding Breadcrumb Navigation
Your Site May Become Harder to Read
If the text is long or the structure is too deep for the breadcrumb navigation to fit on one line, your site may become harder to view for visitors browsing on a small screen, such as a smartphone.
Risk of Accidental Taps
Breadcrumb navigation is often displayed near the top of a site, so when scrolling a page on a smartphone, visitors may accidentally tap the breadcrumb and get taken to a different page.
How to Display Breadcrumb Navigation on Shopify
Use a Shopify Theme That Supports Breadcrumb Navigation
First, one option is to use a Shopify theme that supports breadcrumb navigation. For example, Expanse can display breadcrumb navigation on blog posts.
The benefit is that you can easily display breadcrumb navigation.
The drawback is that you can't freely customize the design or the information shown in the breadcrumb navigation. It can also take time to find a theme that supports it.
Use a Shopify App
Next is the option of using a Shopify app.
The benefit is that it's easy to set up and lets you customize the design (colors) to your liking. It's also a major benefit that you don't need to spend valuable engineering resources on fine-tuning or testing.
The drawback is that few apps support Japanese, and there's also a monthly fee, though usually only around $5.
The section below, "3 Recommended Shopify Breadcrumb Apps," also introduces some recommended breadcrumb apps. Please use it as a reference.
Customize the Source Code
Finally, there's the option of implementing it by customizing Shopify's source code.
The benefit is that you can build it for free and freely customize the design and other aspects.
The drawback is that it requires programming knowledge in HTML, CSS, and JavaScript. Beyond the development itself, it also takes time to test that it works as intended.
The section below, " How to Display Breadcrumb Navigation by Customizing the Source Code," explains how to display breadcrumb navigation without using an app. Please use it as a reference.
3 Recommended Shopify Breadcrumb Apps
PH Breadcrumbs
Source: PH Breadcrumbs | Shopify App Store
PH Breadcrumbs is a handy app that makes it easy to add breadcrumb navigation to your Shopify store. Setup is very simple and intuitive to use. With this app, you can improve your site's navigation and boost the user experience. It has earned high praise from users, with many 5-star reviews. Its fast, courteous support is also well regarded.
Features of PH Breadcrumbs
- Easy setup
- Customizable breadcrumb navigation
- SEO improvements
- Excellent customer support
PH Breadcrumbs Pricing
Basic plan: $4.98/month
Schema & Breadcrumbs by Bogdan
Source: Schema & Breadcrumbs by Bogdan | Shopify App Store
Schema & Breadcrumbs by Bogdan is a powerful tool that significantly improves the SEO and navigation of your Shopify store. Using this app, you can easily optimize your website's structure and improve your visibility on search engines.
Features of Schema & Breadcrumbs by Bogdan
- SEO-effective schema markup implementation
- Easy-to-add breadcrumb navigation
- Improved website structure
- Fast, expert support
Schema & Breadcrumbs by Bogdan Pricing
Standard plan: $4.99/month
Category Breadcrumbs
Source: Category Breadcrumbs | Shopify App Store
Category Breadcrumbs is an app that easily and effectively improves navigation on your Shopify store. Using this app helps improve your customers' shopping experience and also contributes to SEO.
Features of Category Breadcrumbs
- Easy setup and use
- Customizable breadcrumb navigation
- Support for BreadcrumbList schema to boost SEO
- Fast, attentive customer support
Category Breadcrumbs Pricing
Basic plan: $5/month
How to Display Breadcrumb Navigation by Customizing the Source Code
Output
The method introduced in this article displays breadcrumb navigation in the order "Home page > Blog list page > Blog list page filtered by main tag > Blog post page." If no main tag is set, it displays breadcrumb navigation in the order "Home page > Blog list page > Blog post page."
On smartphones, text that's too long is automatically converted to "… (ellipsis)."
The sample code introduced here only displays the breadcrumb navigation itself and doesn't include structured data for the breadcrumbs. For structured data, see the page below for reference.
Reference: Breadcrumb (BreadcrumbList) Structured Data | Google Search Central
※ This method displays breadcrumb navigation for the Dawn theme. Please note that the sample code may not work correctly on other themes.
Step 1. Create a Metafield on the Blog Post
First, create a metafield on the blog post for the breadcrumb navigation.
(1) From the Shopify admin, click "Settings"
(2) Go to Custom data > Blog posts
(3) Click "Add definition"
(4) Enter a name (any name) and namespace and key (custom.main_tag)
(5) Select Single line text
(6) Click "Save"
Step 2. Set Tags on the Blog Post
Next, set "tags" and "the value for the metafield created in Step 1" on the blog post.
(1) From the Shopify admin, go to Blog posts
(2) Click the blog post you want to set tags on, to open its detail page
(3) In the Tags section, add your tags
(4) Click "Save"
(5) In the Metafields section, click "Show all"
(6) Enter the main tag into the metafield created in Step 1
(7) Click "Save"
Step 3. Display Breadcrumb Navigation with Custom Liquid
Finally, insert code to display breadcrumb navigation into the blog post template using custom Liquid.
(1) Go to Online Store > Themes
(2) Click "Customize" on the Shopify theme where you want to display breadcrumb navigation
(3) From the select box in the top center of the screen, choose "Blog post template"
(4) Click the plus icon (or "Add section")
(5) Select Custom Liquid
(6) Paste the sample code into the Custom Liquid input field
(7) Click "Save"
Sample Code
<nav aria-label="breadcrumbs" class="page-width page-width--narrow">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ routes.root_url }}">TOP</a></li>
<li class="breadcrumb-item"><a href="{{ blog.url }}">{{ blog.title }}</a></li>
{%- assign main_tag = article.metafields.custom.main_tag -%}
{%- unless main_tag == blank -%}
{%- capture url %}{{ blog.url }}/tagged/{{ main_tag | handle }}{% endcapture -%}
<li class="breadcrumb-item"><a href="{{ url }}">{{ main_tag }}</a></li>
{%- endunless -%}
<li class="breadcrumb-item">{{ article.title }}</li>
</ol>
</nav>
<style>
.page-width .breadcrumb {
list-style: none;
margin: 0;
padding: 8px 0;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
overflow-x: auto;
}
.page-width .breadcrumb a {
color: #3cb48c;
text-decoration: none;
}
.page-width .breadcrumb a:hover {
text-decoration: underline;
}
.page-width .breadcrumb-item {
display: inline;
color: #6c6c6c;
}
.page-width .breadcrumb-item + .breadcrumb-item:before {
content: ">";
padding: 0 8px;
color: #6c6c6c;
}
@media (max-width: 767px) {
.page-width .breadcrumb {
display: flex;
overflow-x: hidden;
}
.page-width .breadcrumb-item {
flex: 0 0 auto;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-width .breadcrumb-item:last-child {
flex: 1;
max-width: none;
}
}
</style>
Bonus: Customizing Breadcrumb Navigation
I Want the Parent Level of the Breadcrumb Navigation to Be Something Other Than "TOP"
Change "TOP" in the relevant part of the sample code below to any name you like.
For example, replace it with a name like "Home" or "Site Top."
<li class="breadcrumb-item"><a href="{{ routes.root_url }}">TOP</a></li>
I Want to Change the Text Link Color
Change the "color" in the relevant part of the sample code below to any color you like.
.page-width .breadcrumb a {
color: #3cb48c;
text-decoration: none;
}
I Want to Adjust the Top and Bottom Spacing of the Breadcrumb Navigation
Open custom Liquid and adjust the spacing value of the section to adjust the margins.
Internal Linking Strategies Beyond Breadcrumb Navigation
Table of Contents
A table of contents is another internal linking strategy that offers various benefits, such as improved readability and convenience for blog posts. The article below explains the benefits of a table of contents. Please use it as a reference.
The page below also introduces "RuffRuff Table of Contents," a Shopify app that generates a table of contents for your store for free. Please use it as a reference.
Tag List
A tag list is another internal linking strategy that offers various benefits, such as making it easier for visitors to find information. The article below explains the benefits of a tag list. Please use it as a reference.
The page below also introduces "RuffRuff Product & Blog Tags," a Shopify app that generates a tag list for your store for free. Please use it as a reference.
In Closing
Breadcrumb navigation is a handy feature that can improve usability and boost SEO, and it plays an important role in running a Shopify site. This article introduced how to add breadcrumb navigation using a Shopify theme or app, as well as a customization method using custom Liquid. Since each method has its own benefits and drawbacks, it's important to choose the one that best fits your site.
Beyond breadcrumb navigation, using internal linking strategies like a table of contents or tag list can further improve the user experience. Consider adopting these strategies to build an even more appealing Shopify site.
Finally, the blog post below introduces other ways to extend your blog posts beyond breadcrumb navigation. Please use it as a reference.
