Remove Breadcrumbs on Specific Pages in the Web Store with JavaScript

Scenario

Breadcrumbs are displayed dynamically in the Web Store using a NetSuite tag. Some NetSuite users prefer to hide these on specific pages in the Web Store.

Solution

To hide or remove the Breadcrumbs on specific pages in the Web Store, follow these steps:

1. Navigate to Commerce > Site Builder > Themes
2. Edit the Theme used for the Web Store
3. Click the Body tab. On the Logo and Tabs Template field, search for the NLCRUMBTRAIL tag, which should be enclosed in a DIV tag. Add this attribute to the DIV tag: id="breadcrumbs".
4. Add the script below to the Footer Template field:

   • <script language='javascript'> 
     
     if( location.href.match("/Sample") ) {‌ 
     document.getElementById('breadcrumbs').style.visibility = 'hidden'; 
     } 
     
     </script>

5. Click Save

This script determines if the Shopper is on a specific page in the Web Store through the use of a part of the URL of the specific page. If this condition is met, the script searches for the DIV the Breadcrumb tag is on through its ID, then uses CSS to hide the content.