Shopify product breadcrumbs

Insert into your template(s) using a Liquid Block or Liquid Section. Intended for your Products default template in the Customizer.

Note: Check your theme’s icons.liquid file (or similar) for list of pre-loaded icon choices.

<style>
nav.breadcrumbs ol {
	list-style-type:none;
	margin:0;
}
nav.breadcrumbs li, nav.breadcrumbs svg {
	display: inline;
}
nav.breadcrumbs svg {
	margin-right: 0.5em;
}
nav.breadcrumbs a {
	color: #9A4433;
}
nav.breadcrumbs li:not(:last-child):after {
	content: '?';
	margin-left: 0.5em;
}
</style>
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
	<ol>
		<li>
			{%- render 'icon' with 'picto-building', class: 'breadcrumbs-home-icon' -%}
			<a href="{{ shop.url }}">Shop Home</a>
		</li>

		{% if product.collections.size > 0 %}
		<li><a href="{{ product.collections[0].url }}">{{ product.collections[0].title }}</a></li>
		{% endif %}

		<li>{{ page_title }}</li>
	</ol>
</nav>