New filters, simplified configuration, and improved UX with GraphCommerce 6.0

Erwin Otten

March 20

Our latest release, GraphCommerce 6.0, marks a new step forward in user experience, stability and developer experience. This update offers new features and tons of fixes, providing a better shopping experience to end-users.

Better developer experience with a new configuration system

The configuration for graphcommerce projects is now handled within a new file: graphcommerce.config.js. The new configuration system validates the configuration upon installation and during development, giving immediate feedback regarding their configurations in the terminal. Use your IDE’s autocomplete feature to explore all the available configuration options.

Discover available GraphCommerce configuration options in graphcommerce.config.js

The upgraded configuration system incorporates tree shaking, a technique that optimizes performance by including only the features that are actively used in the build.

For a comprehensive understanding of all available configuration options, we recommend reviewing the updated configuration documentation. As we release new features or changes, we will keep this configuration documentation page up to date.

Introducing Enhanced Product Filters (Layered Navigation) in GraphCommerce 6.0

With GraphCommerce 6.0, we're introducing a completely redesigned, improved filtering system (layered navigation). To ensure an exceptional user experience, we examined the best practices utilized by leading ecommerce apps and websites from top brands.

For desktop users, the filter options are displayed as popovers that can be scrolled through.

The enhanced product filters features horizontal filter chips with scrollable popovers, accompanied by a prominently displayed ‘Apply filters’ button, streamlining the process of applying multiple filters. Users can now scroll the page while a filter is open, making the overlays less obtrusive. Selecting a filter triggers its automatic application, with a visual indicator displaying the number of active options for each filter. This ensures users are aware of whether they are viewing the entire category’s product selection or a filtered subset. Additionally, the ‘all filters’ button unveils a right-aligned sidebar, providing a comprehensive overview of all available filters.

On mobile devices, the filter options are presented as draggable overlays.

Big Upgrade to Overlay UI

GraphCommerce’s draggable overlays are a key feature that greatly enhance the app experience. In this version, we’ve added many improvements to make the user experience better on both desktop and mobile. Users will notice these changes mostly when using the main navigation, shopping cart, cross-selling, and customer service.

GraphCommerce 6.0 features more fluent, resilient, and draggable overlays.

Payment and checkout improvements

This version incorporates feedback received from production, resulting in various stability and quality optimizations being made to some of the integrated payment service providers, namely Paypal, MultisafePay, and Mollie.

New features

A variety of rich content sliders, offering an expanded selection to effectively convey your brand’s story in an engaging manner.
Open Graph Meta Tags enhance SEO for product pages and improve the visual appeal of shared pages on social media platforms
Newsletter subscription feature simplifies the process for visitors to sign up without an account, keeping them informed about your brand updates
Product Tier pricing to encourage customers to purchase larger quantities of your product at discounted rates

Community contributions

We would like to thank everyone who contributed to this latest version of GraphCommerce. It is exciting to see that the community is growing and the first webshops built on GraphCommerce are being launched. We would like to express our extra gratitude to those in the community who have given back to GraphCommerce by reporting issues, submitting pull requests, or answering questions in the public slack community chat.

Resources to help existing users upgrade

To help developers make the most of the amazing new features, improvements, and performance in Graphcommerce 6.0, we’ve gathered a few resources to help with planning and getting ready for the upgrade: