Adding breadcrumbs to Products

Products differ from both Pages and Categories. A Product may be associated with zero or more categories, and therefore may belong to zero or more hierarchies. The <ev:breadcrumbs> tag automates the rendering of Product breadcrumbs based on the first hierarchy found, but this may not always be desirable.

Automated breadcrumbs

You can automate the rendering of breadcrumbs in your product template using the <ev:breadcrumbs> tag.

<ev:breadcrumbs />

Building your own breadcrumbs

You may choose to render your own custom breadcrumbs. You may do this by accessing the Product's categories.

<?ev
    if (product.categories.length) {
    	var breadcrumbsCategory = product.categories[0];
    	var breadcrumbTrail = breadcrumbsCategory.parents().reverse();
		breadcrumbTrail.push(breadcrumbsCategory);
?>
<ul>
<?ev for (breadcrumb of breadcrumbTrail) { ?>
	<li><a href="{{ breadcrumb.url }}">{{ breadcrumb }}</a></li>
<?ev } ?>
</ul>
<?ev } ?>

Further reading