EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
How to add Breadcrumb to Shopify Stores (FREE)
Table Of Contents
Breadcrumbs is a borrowed term from the famous Grimm fairy tale, about Hansel and Gretel getting lost in the woods and deciding to use literal breadcrumbs to find their way back home. In the context of Shopify e-commerce, breadcrumbs are used to describe a feature that allows customers to simply browse back and forth on the website in the context of Shopify eCommerce. It is very important to boost both the consumer experience and the website's ranking.
In this blog, we will give a detailed guide on How to add Shopify Breadcrumb FREE for your store. Before going into the details, make sure you have built an eCommerce store on Shopify!
What is Shopify Breadcrumb?
Breadcrumb navigation, also known as breadcrumb is a navigational element used for accessing high-tier pages within a hierarchical flow. It can reduce the number of actions a visitor needs to take in order to navigate to a higher-level page and it helps you to have a visual guide of your current location on your website.
Note that you can completely create your own breadcrumbs based on menu structure and add them to your store using Liquid code or using third-party apps. Follow the next sections for easy breadcrumbs creation!
Types of Shopify Breadcrumbs
1. Hierarchy-Based Breadcrumb Navigation
The most common type of breadcrumb you will encounter is hierarchy-based breadcrumb navigation (also known as “location-based breadcrumb navigation” "breadcrumbs based on menu structure"). This breadcrumb navigation option corresponds to the design, or "hierarchy," of your website, making it easy for visitors to predict and discover similar material.
2. Attribute-Based Navigation
In terms of navigation, path-based breadcrumbs work similarly to the browser's back button. They reflect the user's distinct journey to the current page, however this path is rarely presented in its entirety. This breadcrumb feature can assist site users in swiftly returning to search results, which is particularly handy for e-commerce sites.
Path-based breadcrumbs are commonly used on interactive sites like online forms because they allow users to return to the previous step while keeping all of the data they've already contributed. Users can make modifications to the supplied information if required.
3. Path-Based Breadcrumb Navigation
With attribute-based breadcrumbs, meta-information about a page or topic is provided in a breadcrumb fashion. This is handy when an object fits into numerous separate categories simultaneously, which might be difficult to present in a hierarchy. To refine product search results, e-commerce websites frequently use attribute-based breadcrumbs.
[ecom-global-block]ecom-shopify-trial-block[/ecom-global-block]
Add Breadcrumb Navigation to Shopify using liquid codes
To create Breadcrumbs on Shopify, you need to have a store with basic pages like Homepage, Product Page, Landing Page, and so on.
If you don't have a Shopify account, sign up here.
Read more: Shopify $1 for 3 months
Follow these steps to set up Shopify Breadcrumbs:
Step 1: From your Shopify admin, go to Online Store > Themes.
Step 2: Choose the theme that you need to adjust and click Actions and choose Edit code.
Step 3: Generate a brand-new snippet for the breadcrumbs code
- Tap the Snippets folder, then tap Add a new snippet.
- Name the snippet Breadcrumbs and click Done
Step 4: Add Liquid code to the code editor for the breadcrumbs.liquid snippet
- Copy the Liquid code given below and paste it into the code editor for the breadcrumbs.liquid snippet:
|
{% unless template == 'index' or template == 'cart' or template == 'list-collections' %} <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs"> <a href="/" title="Home">Home</a> {% if template contains 'page' %} <span aria-hidden="true">›</span> <span>{{ page.title }}</span> {% elsif template contains 'product' %} {% if collection.url %} <span aria-hidden="true">›</span> {{ collection.title | link_to: collection.url }} {% endif %} <span aria-hidden="true">›</span> <span>{{ product.title }}</span> {% elsif template contains 'collection' and collection.handle %} <span aria-hidden="true">›</span> {% if current_tags %} {% capture url %}/collections/{{ collection.handle }}{% endcapture %} {{ collection.title | link_to: url }} <span aria-hidden="true">›</span> <span>{{ current_tags | join: " + " }}</span> {% else %} <span>{{ collection.title }}</span> {% endif %} {% elsif template == 'blog' %} <span aria-hidden="true">›</span> {% if current_tags %} {{ blog.title | link_to: blog.url }} <span aria-hidden="true">›</span> <span>{{ current_tags | join: " + " }}</span> {% else %} <span>{{ blog.title }}</span> {% endif %} {% elsif template == 'article' %} <span aria-hidden="true">›</span> {{ blog.title | link_to: blog.url }} <span aria-hidden="true">›</span> <span>{{ article.title }}</span> {% else %} <span aria-hidden="true">›</span> <span>{{ page_title }}</span> {% endif %} </nav> {% endunless %} |
- Choose Save to get your changes confirmed and applied to breadcrumbs.liquid.
Step 5: Display Breadcrumbs
- Tap theme.liquid to open it in the code editor.
- Paste the code given below in theme.liquid wherever you want your breadcrumbs to be displayed.
| {% include 'breadcrumbs' %} |
Step 6: Tap Save to save all of your changes to theme.liquid.
Add Shopify Breadcrumbs navigation without coding
EComposer - Shopify Page Builder is the top page builder in Shopify platform. EComposer allows you to build any page type in your website such as a landing page, homepage, product page, collection page, about us page, contact us page, policy page, etc. Moreover, you can freely customize various templates without coding requirements. All you need to do is just drag and drop the elements in the desired location.
Breadcrumb is one of the amazing elements of EComposer, you can use this feature to make it easy for your customers to see which pages they have viewed on your website. Creating Breadcrumbs with EComposer is absolutely FREE and does not require you to understand the code. All you need to do is drag and drop.
Follow the steps below for more details!
Step 1: Install EComposer
- In the Shopify App store, search EComposer Landing Page Builder then click Add App
- To activate the use of the app, Install the app to your Shopify store.
Step 2: Open EComposer
In the Dashboard menu, go to Apps, and click EComposer Landing Page Builder.
Step 3: Start building Shopify Breadcrumb Navigation
Click Start Building in the right corner of the dashboard and select Product Page, Blog Page, Homepage, etc… where you want to place Shopify Breadcrumbs.
Choose any EComposer template you want by clicking Select a template or create your own by clicking Setup page info. Then, select Start Building.
In EComposer's editor, go to Elements, select Basic, and look for Breadcrumbs.
Step 4: Customize Shopify Breadcrumb Navigation
With the live drag and drop, you can drag Breadcrumb anywhere you want on the edit page.
Ok, now let's start customizing Shopify Breadcrumb
In the content section, you can edit the name and icon of the Breadcrumb
In the design section, you can edit the color, link, and size of the breadcrumb.
Finally, in the Advanced section, you can customize everything related to the code.
Step 5: Save and publish
Once you are completely satisfied with your product page, in the right corner of the edit page you have options to save and publish.
5 Shopify Breadcrumbs tips to enhance site navigation and SEO
1. Use breadcrumb navigation if your website has multi-layered sub-pages
Breadcrumbs may help your eCommerce business in a variety of ways but don't overdo it. If your site has a lot of subpages, we recommend employing breadcrumbs. Otherwise, it would be difficult for your consumers to navigate the site.
2. Don’t make your breadcrumbs appear too long
Because the breadcrumb is a supplementary navigation bar, it should be easy to see and not take up too much space on your page. Remember not to overwhelm your consumers with a huge font and too much content in the navigation bar. Just keep it simple and consistent with the title and content of your website.
3. Keep your breadcrumbs’ titles compatible with your page titles
Breadcrumb titles should be closely related to page titles, especially if you include SEO keywords in those titles. The rationale for tying your breadcrumb title to your page title is to avoid confusing your clients with the content of the pointed page.
4. Choose the proper type of breadcrumbs
Before you put breadcrumbs on your website, think about why you want to use them. Is it used to indicate the user where they are in the site's structure, which category their current page belongs to, or to enable them return to their previous browsing page? As mentioned above, there are three sorts of breadcrumbs to select from: Hierarchy-Based Breadcrumb Navigation, Attribute-Based Navigation, and Path-Based Breadcrumb Navigation.
5. Creativity in Breadcrumbs Design
You can make your own breadcrumbs if you don't like the standard method. Traditional breadcrumbs appear as Home > About us > History, for example. You may always replace this angle bracket with another symbol. To make your web design more imaginative, utilize the "/" symbol with grey text and plain black.
[ecom-global-block]ecom-shopify-commerce-coach-block[/ecom-global-block]
To Sum up
Finally, Shopify Breadcrumbs make it easier for visitors to navigate your site. If you have multiple pages branching more than three into your site (as most eCommerce sites do), your store will need breadcrumbs to boost the customer experience.
We hope this blog can help you create great Shopify Breadcrumbs for your online store. If you want more information or want to learn more about EComposer, follow us at ecomposer.io or click on the message icon located in the right corner of the screen.
=================
Add EComposer Next generation page builder Here
Follow Us on Facebook
Join Official Community
0 comments