how to add the breadcrumb code

Ask & Offer
1

I am currently using the Atelier theme and don’t know how to add the breadcrumb code. Could anyone help me with this?

2

Hi @newcom

Step 1: Create a breadcrumb snippet

  1. Go to Online Store → Themes → Edit code.
  2. In the Snippets folder, click Add a new snippet and name it breadcrumb.
  3. Paste this code inside:
{% comment %} Breadcrumbs Snippet {% endcomment %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="{{ routes.root_url }}">Home</a>
  
  {% if template contains 'collection' and collection %}
    › <span>{{ collection.title }}</span>
  {% endif %}

  {% if template contains 'product' %}
    {% if collection %}
      › <a href="{{ collection.url }}">{{ collection.title }}</a>
    {% endif %}
    › <span>{{ product.title }}</span>
  {% endif %}

  {% if template contains 'page' %}
    › <span>{{ page.title }}</span>
  {% endif %}

  {% if template contains 'article' %}
    › <a href="{{ blog.url }}">{{ blog.title }}</a>
    › <span>{{ article.title }}</span>
  {% endif %}
</nav>

<style>
.breadcrumb {
  font-size: 14px;
  margin: 10px 0;
}
.breadcrumb a {
  text-decoration: none;
  color: #333;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
</style>

Step 2: Insert the snippet where you want breadcrumbs

  • For product pages → open main-product.liquid and add:
{% render 'breadcrumb' %}
  • For collection pages → open main-collection.liquid and add:
{% render 'breadcrumb' %}
  • For pages / articles → add the same line in main-page.liquid or main-article.liquid.

Step 3: Save & preview

Now you’ll see a breadcrumb trail like:
Home › Collection › Product
Home › Page
Home › Blog › Article