How to Add Breadcrumbs in Shopify Store | 5 Tips and Tricks

Are you facing problems with high bounce rates on your website? One of the contributing factors behind high bounce rates is the absence of breadcrumbs on the website. Breadcrumbs allow visitors to maneuver easily around the website without losing any selections. If your website has no breadcrumbs, visitors may get confused, lost, and eventually leave the website without checking out. 

So, how to add breadcrumbs in Shopify? Adding breadcrumbs to your Shopify website requires some simple steps to be followed. Open the theme that you want to edit, go to the snippets folder, and add a new snippet with the breadcrumbs code [Given below]. After adding the code, you have to save the changes, and you’ll be able to see the breadcrumbs. 

What are Breadcrumbs in Shopify? 

Breadcrumbs are simply navigational elements that help visitors quickly move around your website. This is crucial for websites with lots of page hierarchies. When breadcrumbs are not used, visitors have to move one page at a time to go to a higher page level. But thanks to breadcrumbs, they can move to a higher page in no time. 

Breadcrumbs also allow visitors to know where they are on your website. This creates better movability and a sense of trust in the visitor’s mind. 

Websites that use breadcrumbs are generally more visitor-friendly and gain more trust from them.  

Different Breadcrumbs in Shopify 

There are three different types of breadcrumbs that you can use in your Shopify store. 

1. Path

Path-based Shopify breadcrumbs are simple in the browser’s back button. Using these, users can quickly go to the previous page. For example, the visitor may have selected something on the current page; then, they remember that they have to select something else from the previous page. In this situation, the user can easily move back to the previous page with the selection of the current page being removed. 

2. Attribute 

The attribute-based Shopify breadcrumb can best be summarized as sub-categories. For example, if your visitor selects something that falls into multiple sub-categories, then this type of breadcrumb shows the list of categories that it falls into. This allows the user to see the related items in those sub-categories. 

3. Hierarchy

This type of Shopify breadcrumb is the most common one. It shows the visitor how far they have come into your website from where they started. 

How to Add Breadcrumbs in Shopify? 

To add breadcrumbs to your Shopify store, you have to make sure that you have a decent webpage ready for it. By this, we mean that your website should contain landing pages, product pages, a homepage, etc. 

If your website meets this condition, go on following these steps to successfully add breadcrumbs in Shopify. 

1. Log in to your admin panel. Go to the menu on the left side, and find the ‘Themes’ option under the ‘Online Store’ category. 
2. Go to the theme you’d like to use. Select the three dots beside the ‘Customize’ option. You should find the ‘Edit Code’ option there. 
3. Select the ‘Snippets’ folder from the left bar menu. Select ‘Add a new snippet’ from there. Give the snippet a name of your choice. We advise you to name it ‘Breadcrumbs.’ This will make it easy to identify. 
4. Copy the code given below and paste it as it is in the 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 %}

5. Press ‘Save.’
6. Again go to the ‘Snippets’ folder. Find ‘breadcrumbs.liquid’ and tap to open it. 
7. Paste the code given below in the code editor. Paste it wherever you’d like your breadcrumb to show. 

 {% include ‘breadcrumbs’ %} 

8. Press ‘Save,’ and your work is done. 

Tips for Adding Breadcrumbs to Your Shopify Store 

Follow these tips while adding breadcrumbs to the Shopify store. 

1. If you have a simple website where the homepage itself shows products and there are no hierarchies, you probably don’t need breadcrumbs. Breadcrumbs are only for websites with lots of hierarchies. 

2. You have to focus on how your breadcrumbs appear on the website. Don’t allow it to take up too much space. Otherwise, you will end up overwhelming the visitors. 

3. Make sure the breadcrumb titles match your website page title. This will aid in doing the SEO work, and the visitors won’t be confused. 

4. Carefully select the breadcrumb type to show on your website. We’ve identified the different types of breadcrumbs that are available for you. Choose wisely. Otherwise, it won’t be of much help to the visitors. 

5. Make sure to give your breadcrumbs a customized look to give your website a unique look. 

Conclusion 

Breadcrumbs are absolutely essential components for big websites. By utilizing this effectively, you can make sure the visitors are enjoying their time on your website. This will additionally help you reduce the bounce rate. 

Frequently Asked Questions