Portal | Homepage | Blog

Breadcrumb Navigation on Mobile


#1

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

‘Settings’ -> ‘Display Options’ -> ‘Managing Breadcrumbs’
(alternatively you can use the filter and search for breadcrumb)

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:

This store has subcategories so from the home page you would only be able to access the listing under the subcategory 'Dredges and Teasers'. With the breadcrumb the shoppers will be able to tap on the department: ‘Fishing’ and in the category ‘Artificial Baits & Lures’ and see all the products assigned to them.

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:
Of course, you can modify the templates and use this markup for departments and categories too.

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.


#2

@belen_ibanez I followed your instructions to add breadcrumbs, but when I go to a department page, it says the department name twice on the page, both in the regular large header kind of type. Any ideas? Thanks!


#3

Hi Yitzi,

I imagine this is happening in department and categories.

You need to remove this tag:

ns:PagePropertyTitleDecode

In this conditional:

  {elseif (pageproperty['pageid'] ne 'product')}
    <h1>{ns:PagePropertyTitleDecode}</h1>
  {endIf}

This tag prints the name of the department and category.

You need to change that tag for this one:

  {elseif (pageproperty['pageid'] ne 'product')}
  
    {if (pageproperty['pageid'] eq 'department' || pageproperty['pageid'] eq 'category' || pageproperty['pageid'] eq 'subcategory')}
    	{include:breadcrumbs}
    {else}
    	<h1>{ns:PagePropertyTitleDecode}</h1>
    {endIf}
    
  {endIf}

You will need to include this tag right after the end of the <header> to get the product breadcrumb.

  {if (pageproperty['pageid'] eq 'product')}
     <div id="nsc_breadcrumb_container">
       {include:breadcrumbs}
     </div>
  {endIf}

If you need more assistant one of my colleagues in support will be glad to help :smile: