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.
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.