Highlight Variables Using Handlebars in SuiteCommerce Templates

When customizing SuiteCommerce templates, clarity is key, especially when presenting dynamic data to users. This short tutorial article covers how to highlight variables using handlebars in SuiteCommerce templates. In the simple code example below, a SuiteCommerce developer can highlight portions of a string dynamically using the “highlightKeyword” handlebar. This simplifies the code a ton for this particular use case.

"highlightKeyword" Handlebar Code Sample

Here is a "highlightKeyword" handlebar code sample.

How the Code Renders

The above "highlightKeyword" handlebar code sample shown above would render as follows:

    For “text” = “example text”

    And “keyword” = “text”

    would render as: “example text”

This is very useful when implementing things like an input filter.

Why this Handlebar Code Matters

In the world of SuiteCommerce customization, seemingly small tweaks like variable highlighting can significantly elevate the user experience. By leveraging highlightKeyword, you not only boost clarity but also preserve maintainability and compatibility across future updates.

• Improved UX: Highlighting helps users quickly scan for relevant results, critical during shopping or content browsing flows.

• Consistency: Using the framework-provided helper ensures your styling aligns with standard visuals and SSR-ready markup.

• Future-proof: Since Handlebars helpers like this are baked into the framework, upgrades to SuiteCommerce are less likely to break your customization

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!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have 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!