How to add Breadcrumb to Shopify Stores (FREE)

comments

Shopify Breadcrumb 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? 

Shopify Breadcrumb Free

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.

enUS__1x1MonthPromo_Static_banner_1200x628_c3_V2
Advertisement

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.

Shopify Breadcrumb Free

Step 2: Choose the theme that you need to adjust and click Actions and choose Edit code.

Shopify Breadcrumb Free

Step 3: Generate a brand-new snippet for the breadcrumbs code

- Tap the Snippets folder, then tap Add a new snippet.

Shopify Breadcrumb Free

- Name the snippet Breadcrumbs and click Done

Shopify Breadcrumb Free

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">&rsaquo;</span>

    <span>{{ page.title }}</span>

  {% elsif template contains 'product' %}

    {% if collection.url %}

      <span aria-hidden="true">&rsaquo;</span>

      {{ collection.title | link_to: collection.url }}

    {% endif %}

    <span aria-hidden="true">&rsaquo;</span>

    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}

    <span aria-hidden="true">&rsaquo;</span>

    {% if current_tags %}

      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}

      {{ collection.title | link_to: url }}

      <span aria-hidden="true">&rsaquo;</span>

      <span>{{ current_tags | join: " + " }}</span>

    {% else %}

      <span>{{ collection.title }}</span>

    {% endif %}

  {% elsif template == 'blog' %}

    <span aria-hidden="true">&rsaquo;</span>

    {% if current_tags %}

      {{ blog.title | link_to: blog.url }}

      <span aria-hidden="true">&rsaquo;</span>

      <span>{{ current_tags | join: " + " }}</span>

    {% else %}

    <span>{{ blog.title }}</span>

    {% endif %}

  {% elsif template == 'article' %}

    <span aria-hidden="true">&rsaquo;</span>

    {{ blog.title | link_to: blog.url }}

    <span aria-hidden="true">&rsaquo;</span>

    <span>{{ article.title }}</span>

  {% else %}

   <span aria-hidden="true">&rsaquo;</span>

   <span>{{ page_title }}</span>

  {% endif %}

</nav>

{% endunless %}

- Choose Save to get your changes confirmed and applied to breadcrumbs.liquid.

Shopify Breadcrumb Free

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' %}

Shopify Breadcrumb Free

Step 6: Tap Save to save all of your changes to theme.liquid.

Add Shopify Breadcrumbs navigation without coding

shopify breadcrumb free

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. 

shopify breadcrumb free

Step 2: Open EComposer 

In the Dashboard menu, go to Apps, and click EComposer Landing Page Builder.

shopify breadcrumb free

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.

shopify breadcrumb free

Choose any EComposer template you want by clicking Select a template or create your own by clicking Setup page info. Then, select Start Building.

Shopify Breadcrumb Free

In EComposer's editor, go to Elements, select Basic, and look for Breadcrumbs.

Shopify Breadcrumb Free

Step 4: Customize Shopify Breadcrumb Navigation

With the live drag and drop, you can drag Breadcrumb anywhere you want on the edit page. 

Shopify Breadcrumb Free

Ok, now let's start customizing Shopify Breadcrumb

In the content section, you can edit the name and icon of the Breadcrumb

Shopify Breadcrumb Free

In the design section, you can edit the color, link, and size of the breadcrumb.

Shopify Breadcrumb Free

Finally, in the Advanced section, you can customize everything related to the code.

Shopify Breadcrumb Free

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.

Shopify Breadcrumb Free

5 Shopify Breadcrumbs tips to enhance site navigation and SEO

Shopify Breadcrumb Free

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. 

1200x628
Advertisement

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

May_2024_EC_Facebook_group_invite-_Blog_footer_1cff0281-7bbe-4adf-a48b-b927509b0f36