The Ins and Outs of UI Customization in SAP Hybris

Hybris is a pretty sizeable investment, both in cost and man-hours required to get the project running. You’re signing up for one of the most robust eCommerce ecosystems, so it’s good to know the ‘fine print,’ the specifics of working with the platform and developing it into a viable platform for your business. We’ve already covered the personalization potential of Hybris. So this post will continue unveiling various ins and outs of working with Hybris and its diverse ecosystem. This time, our focus will be on the Hybris UI and its pros and cons.

Hybris is a multi-dimensional and multi-layered system when it comes to UI. It has its benefits and limitations that might not be obvious if you haven’t worked with the platform before. And while it might seem tempting to opt in for a system that’s less sophisticated and more primitive regarding UI, you’d want to be equipped with as much information as possible before making that call. We hope that this breakdown by our experienced team of developers will help you make an informed decision.

This is a relatively new feature within SAP Hybris that became available in Q1 2016 and has been continuously improved with each new release. It allows business users to make certain changes to page UI, without the need to involve engineers or designers. On a high level, think of it as a drag-n-drop visual page editor.

While this is not a full-blown ‘do-it-yourself’ solution for Hybris, it does have some pretty useful UI functionality. For example, it allows users to make changes to the navigation options on a page (Category navigation, Account navigation, etc.).

It can also facilitate personalization, which we discussed in our previous articles, through a framework that lets you connect external data sources and drive customized website experience for your users. It has some nice features, like the ability to time the personalization by selecting the start and end dates for the changes that you make through SmartEdit. This could also be used to test your changes to the UI with A/B tests, where you have one customization expiring and the second one starting right after it so that you could compare the results of your changes.

The visual editor within Hybris is very functional, but at the same time, if you’re looking to add new UI components, even the simplest ones, it touches upon all the application levels because these new UI elements would have to be properly registered or coded into the system and its core.

SAP recently released a new version of Hybris. This update reaffirms their dedication to customer experience improvements, as mentioned in their release notes. The update is heavy on UI enhancements, like various tweaks and iterations to cart fulfillment options - Save for Later, Selective Cart, and others. It also features new responsive UI for telco companies.

They’re also slowly introducing AngularJS for the B2C accelerator, which is a storefront solution with templates and other features that significantly improve time-to-market. The introduction of Angular makes further customization drastically more flexible.

It’s worth noting that, unlike some other eCommerce solutions, Hybris is very ‘aggressive’ when it comes to updates. The previous release 6.4 came out in May, and the one before that came out in January. This means that the platform receives quarterly updates, which further solidify its UX/UI capabilities. This comes in high contrast to those competitors who release updates once a year or even less frequent than that.

SAP Hybris offers a decent range of administrative capabilities out of the box. However, a fork might often be required for various unique aspects of your project. And to develop the UI components just to display these new administrative capabilities, your developers would have to be well-versed in the internal UI framework of Hybris and all of its inner workings, as it was created specifically to add administrative capabilities to the platform.