3 Ways to Customize the Header Bar in SuiteCommerce

Adding Header Bar Messaging to Your SuiteCommerce Store

In SuiteCommerce, there are several ways to add customizable messaging to the banner at the top of your website. The messaging described here appears in the Shopping portion of the site (Shopping SSP), rather than the MyAccount or Checkout SSPs.

Depending on what you're trying to display, you can use native SuiteCommerce configuration settings, a free NetSuite extension, or a custom extension.

We'll walk through all three options, starting with the simplest native configuration and moving toward more customized functionality.

Option 1: Native SuiteCommerce Banner Text

If you're using SuiteCommerce Standard or SuiteCommerce Advanced, log in to NetSuite with the Administrator or Store Manager role and follow these steps:

1. Navigate to Commerce > Websites > Configuration and select your site and domain.
2. On the Theme tab, select the Header subtab.
3. Enter your desired message in the Banner Text field.
4. Save the Configuration Record, submit a cache invalidation request, and hard refresh the storefront (Ctrl + Shift + R).

Benefits

• SuiteCommerce administrators can update the message directly in the Configuration Record.
• The message can be changed whenever needed.
• For stores with multiple domains, the message can be configured for each domain.

Limitations

• Color and sizing options are limited.
• The Banner Text field does not support HTML.
• Without customization, you cannot add bold formatting, italics, or links within the message.

Option 2: Free SC Shipping Bar Extension

NetSuite provides a free SC Shipping Bar extension for displaying a shopper's progress toward a free shipping promotion.

The extension uses cart amounts and the configured currency to dynamically show how much more the shopper needs to spend to qualify for free shipping.

Configuration

1. Install and activate the SC Shipping Bar extension for your site and domain.
2. Navigate to the Configuration Record > Extensions tab > Shipping Bar subtab.
3. Review the available extension settings. NetSuite's documentation explains what each field controls.
4. Configure the desired settings and save the Configuration Record.

Note: The Currency Symbol and Shipping Value fields are required for this extension.

To see the changes on your storefront, submit a cache invalidation request and hard refresh the page (Ctrl + Shift + R).

Benefits

• The extension dynamically calculates and displays the amount remaining before the shopper qualifies for free shipping.
• It integrates with SuitePromotions.

Limitations

• Messaging customization is limited, and the configuration fields do not support HTML.
• NetSuite documentation references additional customization through Site Management Tools (SMT), although that approach was not tested in the original walkthrough.
• Using the native Banner Text feature and SC Shipping Bar together is not recommended without reviewing how both appear in the storefront header.

Both features occupy the same general area of the storefront, so displaying them together may create competing messages or an overcrowded header.

Option 3: Custom SuiteCommerce Header Bar Extension

If neither of the previous options provides the messaging or design flexibility you're looking for, a custom SuiteCommerce extension may be a better fit.

Configuration

The configuration depends on the functionality being developed.

Anchor Group can help create a custom SuiteCommerce extension based on what you want to display and how the header should behave.

Benefits

A custom extension provides more flexibility over the content, design, and behavior of the header bar, subject to SuiteCommerce's technical limitations.

Limitations

Custom extensions generally require more development and testing than native settings or existing extensions. As a result, this is typically the most resource-intensive of the three options.

The amount of work depends on the specific requirements and the existing SuiteCommerce environment.

Which SuiteCommerce Header Bar Option Should You Choose?

The right approach depends on what you want your header bar to accomplish.

• Native Banner Text: Simple, plain-text announcements that your team can update through NetSuite
• SC Shipping Bar: Displaying a shopper's progress toward a free shipping threshold
• Custom Header Bar Extension: Requirements that go beyond NetSuite's existing configuration options

For a straightforward announcement, start by evaluating the native Banner Text field.

If your goal is to encourage shoppers to reach a free shipping threshold, consider the SC Shipping Bar.

If you need additional design flexibility or functionality, a custom SuiteCommerce extension may be appropriate.