In the well-known Grimm’s fairy tale, Hansel and Gretel get lost in the forest. They decided to use literal bread crumbs to find their way back home. In the e-Shopify e-commerce context, breadcrumbs are borrowed terms used to describe a tool that helps users easily navigate back and forth on the website. It is important in terms of improving the customer experience as well as improving site ranking.
So what is exactly a breadcrumb? And what is the Shopify breadcrumbs hierarchy?
According to Hubspot, a breadcrumb is a navigation bar that appears as horizontal text at the top of the web page. In general, a breadcrumb is used when a website has multiple higher-level pages that necessitate the use of a navigation bar to assist customers in returning to their desired page.
Table of Contents
Three types of Shopify breadcrumbs hierarchy
Breadcrumbs are based on a hierarchical structure
Hierarchy-based breadcrumbs are the most popular. They have multi-functions on a website, such as:
- It is especially used for several layered content websites.
- Let your customers know where they are in the website’s hierarchy. It usually goes from higher to lower hierarchy, as from parent page to sub-category page.
- It matters to your customers how many steps it takes to return to the homepage.
Press London is a Shopify store’s example of implementing hierarchy-based breadcrumbs on their website. For instance, when their online customers click to view health bundles, they are directed to a collection page of health utensils. After that, they choose a fridge filler product and are continuously directed to the product page. Overall, the Press website has 3 layers, from the homepage as a top-level category to the product page as a sub-category. If a customer wishes to return to the homepage, they simply need to click on the breadcrumbs displayed at the top of the website.
Breadcrumbs based on attributes
Attribute-based breadcrumbs represent the searching attributes of a page on a website.
This type of breadcrumb is especially popular on e-commerce websites. Those websites usually have a large number of products that require several classification criteria. Mobile phones, for example, can be classified by cost, manufacturer, operating system, or other attributes. Thus, you should consider adding attribute-based breadcrumbs when you need a page to help classify your products’ attributes.
Bremont is a Shopify online store where you can find several beautifully Thames-based engineered chronometers. The structure of their website is from the homepage to the collection page with filters and the product page. When their customer filters on a category page based on their personalized product’s wants and needs, attribute-based breadcrumbs are on the top of their category page.
Breadcrumbs based on browsing history
History-based breadcrumbs are to showcase the browsing histories of your customers. Due to its similar functionality as a Back button, we don’t use it frequently nowadays. Furthermore, your customer probably finds it difficult to locate himself in the website structure.
Macy’s clothing store solves the issue of history-based and hierarchical breadcrumbs by including both. In that way, their online shoppers both witness their previous browsing history and their sub-category page. If he wants to come back to the collection page, it would be very convenient to click on the Back to results button.
5 breadcrumbs tips to boost your traffic to your Shopify store
Tip 1: Use breadcrumb navigation if your website has multi-layered sub-pages
Breadcrumb brings a lot of benefits to your e-commerce store, as I have just jotted down above. But don’t overuse it. I only recommend you to use breadcrumbs if your website has multi-layered sub-pages. Otherwise, it will make your customers confused about navigating the website.
ASOS is a higher-pages online fashion retailer that offers various types of clothing and accessories. In every product section, they will let customers filter and personalize their products. For example, when a customer searches for a boot, they will show in the collection page an advanced filter to choose from color, size, materials, and so on. After filtering, the customer is directed to the product page. And on top of the page, there is an attributes-based breadcrumb. In that way, customers won’t have their filter cleared after coming back to the collection page.
Tip 2: Don’t make your breadcrumbs appear too long
The Breadcrumb is a secondary navigation bar, so it should be easy to read and avoid being too large or prominent on your website. Keep in mind to not make your customers overwhelmed with an oversized font and too long text in the navigation bar. Just remember to make it short and consistent with your title and your page’s content.
Master Dynamic knew how to satisfy their customers during their navigation time. The page content focuses on showing a new earphone. Therefore, their breadcrumbs are specific and short-to-remember.
Tip 3: Keep your breadcrumbs’ titles compatible with your page titles
Your breadcrumb titles should be closely linked to your page titles, especially when you focus on SEO keywords in those titles. The reason for linking your breadcrumb title to your page title is not to confuse your customers with the directed page content.
Suta shops offer seasonal sales. Their breadcrumb on the discount product page corresponds to the Sales section in the navigation bar. It makes their online shoppers aware of being in the right location.
Tip 4: Choose the proper type of breadcrumbs
Understand your goal of using breadcrumbs before implementing them on your website. Are you using it to show the user where they are in the site’s hierarchy, which category their current page belongs to, or help them back to their previous browsing page? There are 3 types of breadcrumbs for you to choose from, as listed above, including hierarchy-based breadcrumbs, attributes-based breadcrumbs, or history-based breadcrumbs.
Hot Wheel Collectors’ online store is divided into product categories. Look at the product title. It’s very specific and content-focused. This is a clear example of hierarchy-based breadcrumbs.
Tip 5: Get creative
If you do not like the traditional way of breadcrumbs, you can have your own. Traditional breadcrumbs appear as, for instance, Home > About us > History. You can always change this angle bracket to any similar symbol. You can use the “/” symbol with grey text and simple black to make your web design more creative.
Kettle & Fire gets creative by replacing old-school breadcrumbs with the symbol “/”.
How to add breadcrumbs to your Shopify online store
Apps
You might find several apps in the Shopify app store that help you add your breadcrumbs to your Shopify online store. Some apps like Schema Plus for SEO or Shogun Landing Page builder are good suggestions if you want to implement not only breadcrumbs but other tweaks such as adding testimonials, adding related products,…
If you plan to focus on implementing breadcrumbs and schema for rich snippets to increase SEO, I recommend installing either Category Breadcrumbs or Schema & Breadcrumbs.
This Shopify app helps you add an easy-to-navigate breadcrumb. In addition to giving your customers an easy route back, your breadcrumbs can be customized or automatically translated into other languages if needed. Other useful features of this app include improving your SEO metadata by including JSON-LD in the current category, creating a top-level category tree, and so on. These are just a few.
You are offered an installation of breadcrumbs and schema for rich snippets by this two-in-one Shopify app. The app is easy to install and provides you with no structured data errors from Google. Breadcrumbs installed by Schema & Breadcrumbs are well-designed and can be customized for any aspect of the navigation. It is also easy for you to add new styles. Schema & Breadcrumbs’ team also offers you instant support and assistance if you need any help.
Outsource
If you neither don’t want to insert breadcrumbs with an app nor are not able to code, you can consider hiring a trusted outsourcing agency. There are many advantages that you can benefit from outsourcing your work to an e-commerce agency. They help you save time by covering technical works, while you can concentrate on your management work. Thus, you are more able to take on projects more efficiently. Furthermore, they provide 24/7 support. So no need to worry about any coming urgent issues.
These are their advantages. The only thing to consider is to choose your trusted outsourcing provider. There are tons of them on the market at competitive prices. So you might find it difficult to select the proper one.
But before thinking about choosing one, you should know which tasks to outsource and be aware of the outsourcing cost to select a cost-compatible one.
Final Thoughts
Jakob Nielsen has recommended breadcrumbs since 1995. The reason is straightforward. Indeed, breadcrumbs do not harm user testing. On the contrary, they provide numerous benefits to your Shopify online store. As discussed, they provide a better user experience, reduce the bounce rate and give you a great SEO benefit.
Just remember to select the appropriate one out of 3 types to display on your website. If you are unsure about which apps to use or where to find a reliable outsourcing partner, we are Shopify experts that have experience working with clients from the United States, Australia, and Europe.
We have our own dedicated staff that can lend you a hand to add your Shopify breadcrumb navigation.
Or contact us today with any outsourcing requirements.
