Product Breadcrumb

Product Breadcrumb can be displayed on the Products page provided that the company’s Display Method is set to:

1. By Catalogue, or
2. By Custom Catalogue and the user has the custom catalogue set.

To activate breadcrumb, add {Breadcrumb} anywhere in the product’s bootstrap layout.

The structure is as follows:

<span class="ep-breadcrumb ep-breadcrumb-main"><a href="/">Main Catalogue</a></span>
<span class="ep-breadcrumb-separator"><span>/</span></span>
<span class="ep-breadcrumb ep-breadcrumb-item"><a href="/ ">Item 1</a></span>
<span class="ep-breadcrumb-separator"><span>/</span></span>
<span class="ep-breadcrumb ep-breadcrumb-item"><a href="/ ">Item 2</a></span>
 

NOTE: Whether the Product is found in the main Catalogue tag or not, the top link always shows.

CSS classes

Examples:

.ep-breadcrumb-separator { margin: 0 5px; }
.ep-breadcrumb a { color: #6c757d; }
 .ep-breadcrumb a:hover { text-decoration: none; color: #176db7; }

OR

.ep-breadcrumb { border: 1px solid gray; padding: 5px; border-radius: 5px; background-color: #5050F0; }
.ep-breadcrumb-separator { margin: 0 5px; }
.ep-breadcrumb a { color: white; }
 .ep-breadcrumb a:hover { text-decoration: none; }

To replace the separator with a box, use:

.ep-breadcrumb-separator span { display: none;}
 .ep-breadcrumb-separator::after { content: "■";}

To easily remove Home, add .breadcrumb li:first-child{display:none;} to the custom css.