Share Even though Mercury offers out-of-the-box e-commerce components, it doesn’t mean you can’t make your site e-commerce platform stand out from the crowd. Mercury is designed to facilitate ultimate flexibility and customization.

When it comes to customizing the look and feel of Mercury, we recognize four levels of customization that are grouped based on the effort required to implement them. 


The first level of customization can be applied using the Sitecore content editor and Sitecore experience editor, which is the easiest to do. Mercury components can be moved around on the pages in a WYSIWYG way using the Sitecore experience editor. Moreover, Mercury components offer flexibility that can be applied using rendering parameters on the components themselves, and global configuration is available in the form of settings on site level. 

Mercury components have been designed to be as fine grained as possible and automatically work together based on the page context. This granularity allows you to get the most from customization on configuration and page template level. For example, instead of having a single checkout component, Mercury offers components for selecting a shipping method, payment method, billing address, shipping address, etc.

These components automatically work together on the checkout page, allowing you to fully customize the checkout experience. Whether you want a multi-step or single-page checkout, it is all possible. 

Styling & Interaction

To really get that custom brand experience you can create custom style sheets and interaction scripts. The Mercury starter kit has sample SASS style sheets that front-end engineers can copy and modify to tailor to your own needs using the tools of their choice.

The starter kit also has an example of how front-end developers can use the Mercury UI components in a static website. This way they can style and design without even having to start Sitecore, greatly improving their feedback loop and productivity. See this blog post for more information.  

Page Templates (HTML)

The static website described in the previous paragraph also allows the front-end engineers to develop new page designs. These can be easily converted to Sitecore renderings and used to define the layout of your Sitecore page templates, allowing you to completely change the look and feel of your E-commerce shop. The fine graininess of the Mercury e-commerce components allows for great flexibility, without having to write custom components.  

Custom components

The previous levels of customization allow you to create a tailored e-commerce experience that stands out from the crowd. However, if you want to go even further and customize to the level of individual HTML elements, this is possible as well. Mercury UI components are built using React.js and follow the principles of Atomic web design.

The Mercury API allows you to replace Mercury components with your own components that render custom HTML. For example, even though the product cluster is a single component, it is possible to replace the component that renders an individual product block with your own version, as shown in the image. That component can still use the original building blocks (atoms) of the Mercury component, allowing for ultimate flexibility. Read more on Atomic design in the following article. 

Related articles

Articles related to this topic

Share a Tweet
When it comes to customizing the look and feel of Mercury, we recognize four levels of customization. Read about the levels of customization here #CUSTOMIZATION # SITECORE  Share
Learn how to stand out with the 4 levels of customization available with Mercury E-commerce #CUSTOMIZATION # SITECORE  Share