Share Mercury is a collection of 120+ ready-to-use components for your online store projects. We developed Mercury components to be used in any place, within any context. By default, Mercury comes with a starter project known as Mercury.Demo.

From a designer or front-end developer’s perspective, there's no need to run Sitecore and / or Visual Studio to view and customize Mercury. Our goal is that every designer and front-end developer can adjust the interaction and styling of your project solely using Mercury.Demo static HTML. This makes presenting or co-operation with other agencies easier to accomplish. 

Mercury.Demo uses the Zurb Foundation front-end framework for composing layouts, theming and adding behavior to components. On top of Zurb Foundation, the demo includes component styling specific for Mercury components and client-side JavaScript for component interaction. Finally, to render something to the browser, we’ve included several sample pages generated with Zurb Foundation’s Panini template engine.

Working with Mercury.Demo

It’s easy to apply adjustments to the front-end code in Mercury.Demo. Take a look at the ‘assets’ folder structure of this project:

- assets
  - - css
   - - - style.css (generated by Gulp)
  - - fonts/*
  - - icons/* 
- - js
   - - - components/*
   - - - app.js (generated by Gulp)
  - - scss/
  - - - components/*
  - - - _variables.scss
  - - - style.scss
- - vendor/*


Mercury.Demo uses the Zurb Foundation framework for styling which means that we’ve extended the default Zurb Foundation styling with Mercury.Demo’s own styling variables - defined in ‘_variables.scss’ - and styling components as listed in ‘assets/scss/components/*’.

In the ‘assets/scss/components/*’ folder, you see styling components. These components use Foundation Sass’ mix-ins, styling variables and Mercury variables. Best practice is to define colors, typography and grid settings in the ‘_variable.scss’ file.

This makes it easy to theme your website and apply changes for all components, because all the styling components use theme colors and settings that are defined in the _variable.scss file.


Mercury.Demo comes with client-side scripting examples useful for Navigation, Mobile Filter interaction and Content Menu interaction. These JavaScript components are listed in ‘js/components/*. When applying changes to these JavaScript files, the Gulp tasks automatically generates a new ‘app.js’ in ‘assets/js/app.js’.

HTML layouts

Mercury.Demo includes sample templates provided for displaying a set of components on a page for example: Account, Catalog, Checkout, Location pages. Templates are generated by Zurb Foundations Panini template engine using Handlebars syntax. BBy combining the provided sample data in ‘Testdata’ it’s possible to run a fully working static environment. From here you can apply styling and interaction changes without running Sitecore on your development machine.

Local test data

Mercury.Demo is initialized with local test data placed in the 'testdata' folder. Feel free to customize this data to match your project needs.


Backend developers can benefit from Mercury.Demo since the Mercury.Demo project automatically places the .css and .js in the correct location for use in a web project. Only layout HTML changes should be manually integrated in .cshtml files since these files should be compiled together with the web project.

With local test data, website performance is not an issue because everything is local. No need to wait for the CMS before the page loads or any other web requests. In the end, working with Mercury.Demo will speed up your process and integration of a web project.

Related articles

Articles related to this topic

Share a Tweet
Customizing the front-end is easy with Mercury E-commerce as we use #zurbfoundation for composing, theming and adding behaviour #SITECORE # FRONTEND # IDENTITY  Share
Working with agencies on the front-end of Mercury E-commerce is made easy as you can adjust styling and interaction using our static HTML #SITECORE # FRONTEND # IDENTITY  Share