Compatibility: All Shopify themes, work best with Shopify 2.0 FREE themes
Several clients have been seeking an effective breadcrumb navigation system that works seamlessly with the CSS styles of Shopify 2.0's FREE themes.
Although a complimentary Shopify breadcrumb code exists, its compatibility with individual themes may vary. Furthermore, there are known challenges with the 'current_tags' feature.
To address this, we have developed a code snippet that can detect the previous URL. If a user navigates from a collection page to a product page, the breadcrumb will display the collection title. In other cases, the assigned collection metafield will be used to display relevant information.
You can check the demo store here. Password: made4uo
What you are buying:
- A Shopify breadcrumb section
- Choose different arrows
- Breadcrumb will appear on product, collection, article, and page
- Collection title with link will show at the middle when you open a product from the collection page and replaces the assigned collection metafield
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To create the metafield:
1. In your Admin Page, click Settings on your left hand bottom corner
2. Go to Metafield / Custom Data then Products. Follow the fields below then SAVE.
3. Next, you need to go to your Products. In your Admin page, click Product on the left hand side. Choose the product, then scroll all the way down. You should see the assigned_collection metafield. Choose the collection you want to assign then click SAVE
To start:
1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, tcreate a section and name it "shopify-breadcrumbs"
3. Open the newly created section and paste the code below. Make sure to click SAVE.
{% assign exclude_link = 'index,cart,list-collections' | split: ',' %} {% capture arrow %} {% case section.settings.arrow %} {% when "caret" %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6" style="width: 10px; transform: rotate(-90deg) translateX(2px)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"> </svg> {% when "emoji_arrow_1" %} ➡️ {% when "emoji_arrow_2" %} ➤ {% when "emoji_arrow_3" %} 🡆 {% when "emoji_arrow_4" %} ➪ {% when "emoji_arrow_5" %} 🢂 {% when "emoji_arrow_6" %} ▷ {% when "play_arrow" %} <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" fill="none" viewBox="0 0 10 14" style="width: 8px;"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"/></svg> {% endcase %} {% endcapture %} <style> .breadcrumbs svg.icon.icon-caret { width: 10px; transform: rotate(-90deg) translateX(2px); } .breadcrumbs ol { list-style-type: none; margin: 0; padding: 0; } .breadcrumbs li { display: inline-block; } .breadcrumbs--home, .breadcrumbs--link { position: relative; text-decoration: none; color: currentColor; } .breadcrumbs--home::after, .breadcrumbs--link::after { content: ""; width: 102%; border-bottom: 1px solid; position: absolute; bottom: 0; left: -1px; opacity: 0; } .breadcrumbs--home:hover:after, .breadcrumbs--link:hover::after { opacity: 1; } .breadcrumbs:not(:last-child) span { text-underline-offset: 0.3rem; } .breadcrumbs:not(:last-child) span:hover { text-decoration: underline; transition: text-decoration 0.2s ease; } </style> {% unless exclude_link contains template.name %} <div class="breadcrumb--container page-width" style="color: {{ section.settings.text_color }}; padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;" > <nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs"> <a class="breadcrumbs--home breadcrumbs--link" href="/" title="Home">{{ section.settings.home_text }}</a> {{ arrow }} {% case template.name %} {% when 'page' %} <span>{{ page.title }}</span> {% when 'product' %} {% assign assigned_collection = product.metafields.custom.assigned_collection.value %} <breadcrumb-link data-collection="{% if assigned_collection != blank %}true{% else %}false{% endif %}"> <a class="breadcrumbs--product breadcrumbs--link" href="{{ assigned_collection.url }}"> {{ assigned_collection.title }} </a> {{ arrow }} <script id="breadcrumb_obj" type="application/ld+json"> { {% for collection in collections %} "{{collection.handle}}": { "name": "{{ collection.title }}", "url": "{{collection.url}}" } {% unless forloop.last %},{% endunless %} {% endfor %} } </script> </breadcrumb-link> <span>{{ product.title }}</span> {% when 'collection' %} <span>{{ collection.title }}</span> {% when 'article' %} <a href="{{ blog.url }}" class="breadcrumbs--product breadcrumbs--link" title="{{ blog.title }}"> {{- blog.title -}} </a> {{ arrow -}} <span>{{ article.title }}</span> {% endcase %} </nav> </div> {% endunless %} <script> class BreadcrumbLink extends HTMLElement { constructor() { super(); this.prevLink = document.referrer; this.obj = this.querySelector("#breadcrumb_obj").innerText; this.parsedObj = JSON.parse(this.obj); this.updateLink(); } updateLink() { if(this.prevLink.includes('collections')){ const paramLink = this.prevLink.split("?")[0]; const _handle = paramLink.split("/"); console.log("handle", _handle) const handle = _handle[_handle.length - 1]; const colObj = this.parsedObj[handle] const product = this.querySelector('.breadcrumbs--product') const urlParams = new URLSearchParams(this.prevLink) product.href = this.prevLink; product.innerHTML = colObj.name; } else { console.log(this.dataset.collection) if(this.dataset.collection == 'false') { this.style.display = 'none' } } } } customElements.define('breadcrumb-link', BreadcrumbLink); </script> {% schema %} { "name": "Breadcrumbs section", "settings": [ { "type": "color", "id": "text_color", "default": "#000", "label": "Text color" }, { "type": "text", "id": "home_text", "label": "Home text", "default": "🏠 Home", "info": "You can use emoji with text" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 2, "unit": "px", "label": "Padding top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 2, "unit": "px", "label": "Padding bottom", "default": 36 }, { "type": "select", "id": "arrow", "options": [ { "value": "caret", "label": "Arrow" }, { "value": "emoji_arrow_1", "label": "Arrow 1" }, { "value": "emoji_arrow_2", "label": "Arrow 2" }, { "value": "emoji_arrow_3", "label": "Arrow 3" }, { "value": "emoji_arrow_4", "label": "Arrow 4" }, { "value": "emoji_arrow_5", "label": "Arrow 5" }, { "value": "emoji_arrow_6", "label": "Arrow 6" }, { "value": "play_arrow", "label": "Arrow 7" } ], "default": "caret", "label": "Arrow style", "info": "Arrow might appear differently depending on the device" } ], "presets": [ { "name": "Breadcrumbs section" } ] } {% endschema %} |
4. Next, go to the Layout folder, and open the theme.liquid.
5. Find the {% section 'header' %}, then add the code below after it.
| {% section "shopify-breadcrumbs" %} |
6. Next, go to your theme customizer page. Click the three dots on your left upper hand corner, and choose Customize theme, to customize.
That is it (",)
2 comments
@ILONKA I believe this is fixed. I would suggest to contact us using “Chat with us” to assist you timely
Hello,
I just implemented “breadcrumbs”, it works perfectly on product pages or collections. but not so good on blog pages. It shows only “Home” and the blog post, but not in which blog you are (I have two blogs). For example it should be “Home > Puppy Blog > Stay Alone”, instead the display is only “Home > Stay Alone” . Do you have a solution for this? Thank you very much, Ilonka
PS: I have also implemented Infinite Scroll, it works very well, thanks for that.