Breadcrumb Navigation

We are pleased to announce that you can include breadcrumb navigation on your webstore on department, category, subcategory, product, and content pages.

What are Breadcrumbs?

Breadcrumbs enable users to keep track of their location within your webstore, it enhances the way customers find their way around. In terms of usability, breadcrumbs reduce the number of steps a buyer needs to navigate your webstore, making it easier to find the products they are interested in. They are also an effective visual aid indicating the current location to the shopper, making it a great source of contextual information for landing pages.

How to Enable the Breadcrumb Navigation on Your WebStore

This feature is enabled through your WebStore Manager. If your webstore is on the Early Adopters’ channel you will find the option under:
**WebStore -> Display**
if your webstore is on the beta channel go to:
**Design & Content -> Navigation**

In both cases select ‘Enable Breadcrumb Navigation’

To be able to see it in the store, if you have customized your Header template, you will need to add the tag to in the WebStore Manager Layout section; the label you need to include is { include:breadcrumbs} where you want the breadcrumb to appear. (Our recommendation is to put it at the end of the header.)
To do this, go to ‘Edit template’, select the panel you need to modify and add the tag: {include:breadcrumbs}. Save your changes then ‘make the changes live’. You should now be able to see the new breadcrumb in your webstore.

To test it, click in any department, you should see the default breadcrumb, if you are selling fish it might look something like this:

Taking out the option is simply a matter of unselecting the tickbox in WebStore manager.

Changing the Design of Your Breadcrumb Navigation

Modifying the design of your breadcrumb navigation is done in the template editor. The breadcrumbs have their own panel located under the Template section.
You can choose to change the sign that divide the breadcrumbs: “>>” (») by a small image or by any other sign. ( ‘/’ is often used.) Moreover, you can do fancy things with the CSS by adding new tags to the script:

Thanks for your attention!!!