Skip over navigation

Contact us to learn more about OroCommerce's capabilities

Contact us

B2B eCommerce

OroCommerce Storefront Style Guide Updated for 4.2 LTS

May 13, 2021 | Oro Team

We’re committed to helping our customers and partners improve productivity while keeping the customer experience front and center when it comes to design. Last year, we released the OroCommerce Storefront Style Guide to help designers, marketers, and front-end developers to keep track of design standards and manage their eCommerce design elements in a single place. Today, we’re releasing an update to our style guide to help brands create even better experiences for their customers.

Why Use the OroCommerce Style Guide?

Great web design can be defined as a combination of presentation, usability, and consistency. Presentation refers to how creative elements such as typography, color scheme, and visuals are arranged. Usability and consistency are how well these elements work together to deliver the optimal customer experience. This is where the style guide is most helpful.

However, that’s not all. Oro’s style guide helps with the following.

Maintain a uniform style. Effective design is memorable and consistent across your social media, website, marketing, and packaging. A style guide helps you maintain a uniform design language, which helps build brand awareness, repeat visits, and ultimately sales.

Deliver a consistent message. Your written style is just as important as your composition and color scheme. Style guides establish typography standards to ensure that your messaging is appealing, legible, and is relevant to your reader.

Meet customer expectations. A uniform design helps you build meaningful relationships and maintain them over time. A style guide ensures that your storefront design works for all your customers – from suppliers to purchase managers.

Improve team productivity. Style guides are a single source of design information for the entire organization, ensuring everyone stays on the same page. It helps brands avoid conflicts, errors, and assumptions during design decisions.

Maintain control of the design. When you add new products, services, or pages without design in mind, your overall design language suffers. Style guides enable you to fine-tune and constantly improve your design.

What’s New in the OroCommerce Style Guide?

Ever since the release of the Style Guide, we’ve been hard at work at making it even better. We’ve added many new features and improved existing ones. Here are some of them:

  • New UI storefront mockups according to OroCommerce LTS 4.2 that includes a new shopping list, filter panel, and checkout improvements.
  • Several new product page templates to help you create unique product listings.
  • A new email template for notifying when products are back in stock.
  • Ability to set and customize a cookie consent banner on your website.
  • Support for Sketch’s color variables feature for greater color consistency.
  • A range of new styles and components for more design flexibility.
  • Various bug fixes and small improvements too numerous to list.

Bring Your Ideas to Life With OroCommerce’s Style Guide

Digital commerce brands are often focused on running their business, so it’s no surprise that many don’t pay much attention to design. However, design should never be an afterthought in eCommerce as it has a direct impact on page views, time on page, and conversions.

Oro’s style guide makes it easier to reach your design goals. It comes with fonts, colors, shapes, and layers that can be changed quickly and easily. After downloading the style guide, you can start creating a new design based on pre-set elements included in the kit.

Best of all, the elements and naming conventions in the style guide are reflected in OroCommerce. It’s easy for everyone in your organization, from designers to marketers and developers to get started and collaborate to turn your ideas into reality.

Learn more about the OroCommerce style guide here.

Back to top