Developing style guides for eCommerce

A hallmark of a successful eCommerce website is its own unique identity and brand. Driven from the company’s vision, they set forth with a design partner to design the site. In order to communicate this “identity” to a design partner, however, a business first delivers a set of standards and designs, which form the backbone of their brand identity. This is known as a style guide for eCommerce.

For instance, Facebook’s simple, blue, and light-colored theme permeates throughout their various experiences. Although they do not focus on eCommerce, you can see how they have branded themselves with colors and typesets.

Making a Style Guide for eCommerce

From a creative standpoint, style guides drive every bit of design work on a new site. From a technical standpoint, however, there are unique workflows to implement the style guide and ensure that all front-end work aligns with said guide.

Style guides are created as online links using a controller: for example, hitting the “StyleGuide-Show” pipeline, and an ISML template. During the development period, style guides are one of the first things created as they act as a reference point for front-end developers and also guide global styling.

Though style guides are created in the early stages of development, they are fluid and will most likely require edits and additions. Designs are usually delivered via a collaboration program such as Zeplin (where the guide, styles, and assets are uploaded by the company), and developers reference this style guide to create the theme to the eCommerce website.

Components of a Style Guide for eCommerce

The online style guide contains a wide variety of components to be used throughout the storefront such as colors, font styles, buttons, and other branding styles. This is translated to code in which developers use to style the storefront. For example, the style guide may have a company’s buttons look a certain way. Developers would then recreate the necessary classes and styles to make it look identical in the online style guide to match the client’s buttons.

The value here is that this should style all buttons in the storefront. The global stylesheet contains mostly all the variables that will be used throughout the website. This stylesheet can then override the one found in the platform’s node module library. Here, developers can add and map more variables as they are used throughout. Next, developers take the provided designs and code the outcome in an online link where it can be used for further development on the storefront.

Conclusion

The client’s vision for their eCommerce website is presented in the style guide which is translated to usable code for development. While developing the storefront, designs are referenced which use the variables and components from the style guide.

During the development process, the client can make changes to their designs, which then make their way to the online style guide. Style guides are flexible as developers can just add on to it. This process allows for an intimate relationship with the client and the consultant where ideas can be shared and put into their eCommerce website.