Navigation Bar on the SC site – often the Commerce Categories
SuiteCommerce Navigation Bar Categories Placeholder
The navigation bar on the SuiteCommerce website helps the user click on different sections or commerce categories on the website. The most commonly used method to complete this task is to utilize the Categories Placeholder.
When to Rebuild the Commerce Category Navigation Bar?
The other way to manually build the commerce bar can be completed in the configuration record, and this process will be outlined below. Two reasons a company might choose to rebuild its navigation bar manually are:
1. The company desires to create specific landing pages for their Commerce Category pages instead of using the native Commerce Categories to host many products.
2. The company has multiple domains on the single website setup record (B2B and B2C), and it needs to order its commerce categories for one of the sites manually.
For more information, I highly recommend this article which covers how to manage this case for two domains on a single website setup record: B2B and B2C Domains on One SuiteCommerce Website Setup Record.
NOTE: An Admin or Store Manager role is needed to access the Configuration Record and to complete the below steps.
Step 1: Open the Navigation Tab
NOTE: An Admin or Store Manager role is needed to access the Configuration Record and to complete the below steps.
Go to the Navigation Subtab in the Configuration Record.
- Click Commerce > Websites > Configuration.
- Select the Site and Domain and select the ‘Configure’ button.
- Click the Layout tab and Navigation Subtab.
Step 2: Set the Text Field
This field is the text that surfaces in the store.
Step 3: Set the HREF Field
This is the relative URL of the page that you want the user to click on. This can be the native commerce category page, or it could be a custom landing page. For example, the first option below on the left directs to a landing page pictured on the right.
If you do not want the user to be directed to any page, use the “#” symbol, as seen in the blue box on the left.
Configuration Record View
Webstore View
Step 4: Set the Level Field
This field dictates the hierarchical level for this navigational link.
To surface a link on the webstore first, make the link a level 1.
Level 2 links live under Level 1 links with the same ID/parent ID, which we will cover in steps 8 and 9.
The maximum amount of navigation link levels is 3.
Step 5: Set the Data Touchpoint
This is touchpoint of the navigational link. This relates to the website set up record touchpoints, and most commonly will be “Home”.
If you are using other touchpoints like “Cart” and the URL is outside that SSP touchpoint (like the “checkout,” for example), the page will not properly load.
Adding this screenshot again for ease of use for the reader. You're halfway there!
Step 6: Set the Data-Hashtag
This field specifies and adds another link that helps the browser traverse the page more efficiently. Though this is best practice to add, at the time of writing this article, it is not a required field for entry.
Most commonly, the data-hashtag mirrors the HREF, only with a hashtag ( # ) preceding the slash ( / ).
Step 7: Set the Class Names
This field allows the user to configure the HTML class names that will be added to this link. At the time of writing, it is not a required field.
Step 8: Set the ID
This specifies the internal identifier of the navigation link. If this link is a parent (level 1) link, it must have an ID for the child (level 2) link to reference.
In the above screenshot, the ID for the “Men” link is “Mens.”
Notice that the Parent ID for “Featured” matches the ID for “Men.”
Linking IDs and Parent IDs
Step 9: Set the Parent ID
This is the indicator for the parent ID if this is a child navigation link. All Navigation Links are ordered by Parent IDs and IDs and organized by Level.
Step 10: "Categories" Value
This adds the Category Tree to the website's navigation menu. Enter the value “Categories” to add categories to the menu. This is not a mandatory field, and the site can operate with it blank.
Step 11: Check the Navigation Functionality on the Website
After these fields are properly configured, hit Save on the Configuration Record. Next, perform a Cache Invalidation Request and hard refresh (Ctrl + shift +R) on your site to see your changes.
Author: KC Daniels
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
FREE SuiteCommerce Book
If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!
Oracle NetSuite Alliance Partner & Commerce Partner
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.