We are delighted to announce that Breadcrumb navigation is available on NitroMobile on our beta channel. This feature will allow your customers to keep track of their location and will give them access to department and category listings.
How to Enable Breadcrumb Navigation on Your WebStore
To activate this feature you need to go to the Web Store Manager and go to
The option is called: “Enable Breadcrumb Navigation on Mobile”
To allow our customers to integrate the breadcrumb seamlessly we have provided two sets of markup, one for products and another for departments, categories and subcategories.Department, categories and subcategories markup
If you enable the breadcrumbs and you were using the default templates the breadcrumbs will replace the title. It will appear in the same format as the old title but it will be clickable. The shopper will be able to tap on the name and go to that listing. This means that shoppers will have easier access to departments and categories listings.Example:
Products markup
The product breadcrumb is more traditional and follows the same structure of breadcrumbs on the main site. You can see an example here:Changing the Design of Your Breadcrumb Navigation
There is a new template that will help you to customize the breadcrumbs easily.
If you have modified the default template these are the modifications you need to make in the template ‘Header’ on the Mobile:
<body id="page_{pageproperty['pageid']}">
<div id="container">
<header>
<div class="wrapper">
{ns:StorePageHeader}
</div>
{include:panelCart}
</header>
{if ((pageproperty['pageid'] eq 'search') || (pageproperty['pageid'] eq 'home'))}
{include:panelFindProduct}
{endIf}
{if (pageproperty['pageid'] eq 'product')}
<div id="nsc_breadcrumb_container">
{include:breadcrumbs}
</div>
{endIf}
<div id="main" role="main">
{if (pageproperty['pageid'] eq 'department' || pageproperty['pageid'] eq 'category' || pageproperty['pageid'] eq 'subcategory')}
{include:breadcrumbs}
{endIf}
{if ((pageproperty['pageid'] eq 'search') || (pageproperty['pageid'] eq 'home'))}
{if (pageproperty['pageid'] ne 'search')}
{include:panelNavigation}
{endIf}
{endIf}
If you want to customize the breadcrumbs you will need to modify the template ‘Breadcrumbs’
{*
Available content fields:
- home['url'] Home url
- breadcrumb['name'] It gives you the 'name' of the department, category, brand...
- breadcrumb['url'] It gives you the 'url' of the department, category, brand...
- breadcrumb['type'] It gives you the type of breadcrumb that is showing (department, category...)
- pageproperty['pageid'] It gives you the type of page (department, category, product, theme...)
*}
{ifThereAre breadcrumbs}
{if (pageproperty['pageid'] eq 'department' || pageproperty['pageid'] eq 'category' || pageproperty['pageid'] eq 'subcategory') }
<div class="breadcrumbs">
<h1>
{foreach breadcrumb}
{if (breadcrumb['type'] eq 'category' || breadcrumb['type'] eq 'subcategory')}
:
{endif}
{if ((breadcrumb['url']))}
<a href="{breadcrumb['url']}">{breadcrumb['name']}</a>
{else}
{* If the breadcrumb doesn't have a URL, don't output a link *}
{breadcrumb['name']}
{endIf}
{endForEach}
</h1>
</div>
{endIf}
{if (pageproperty['pageid'] eq 'product')}
<div class="breadcrumbs-product">
<ul class="crumbs-product">
{foreach breadcrumb}
{if ((breadcrumb['url']))}
<li>
<a href="{breadcrumb['url']}">{breadcrumb['name']}</a>
</li>
{endIf}
{endForEach}
</ul>
</div>
{endIf}
{endIfThereAre}
Remember to download a back-up of your actual templates before making any modification.