E-commerce guidelines

Header

To achieve “one Atlas Copco experience” a more seamless transition between our website and e-commerce is necessary. These guidelines and brand alignment will make sure the different headers will align.

Usage

The e-commerce header is serving as the main navigation hub and brand showcase. It should be clean, well-organised, and visually consistent with the overall brand identity.

Key features include a prominent logo for easy brand recognition, a clear and accessible menu and a prominently placed search bar to facilitate quick product discovery. Additionally, the header often includes user account links (My Profile), shopping cart or any other functional links that the business requires.

Ensuring the header is responsive and functions seamlessly across all devices is vital for maintaining a positive user experience. A well-designed e-commerce header guides visitors effortlessly through the site, encouraging exploration and simplifying the path to purchase.

Desktop version of the Atlas Copco e-commerce header
Mobile version of the Atlas Copco e-commerce header

Hybrid solution

For hybrid solutions where e-commerce is integrated with AEM (Adobe Experience Manager) the suggestion is to have the web-shop functionalities as a separate layer beneath the header. Positioned to the right, aligned with the breadcrumbs.

E-commerce header with a navigational menu, with login and cart information in a separate field