At VTEX we believe retailers should have the power to sell anything, from anywhere, to anywhere and in any channel. To do that, we’ve been evolving our platform to help brands deal with increasingly complex scenarios (e.g cross-border, marketplace, omnichannel) in a simpler and more strategic way.
We have an approach to that — in what we call time-to-revenue: we apply our commerce expertise to build the technology that will help you adapt and transform your operation fast (time-to-market) and to find the results even faster (the revenue part of it). In other words, we believe that the only way companies will transform themselves is by making the adoption of new technologies easier — so you can prove the results, adapt and keep evolving.
That being said, I’m here to announce an important step into this direction: We’re now releasing the new VTEX IO Store Framework in open beta.
In the past ten years, probably one of the most distracting jobs online retailers have had to deal with has a name and, honestly, a big budget to go along: storefront. Operations need to deal with implementing, managing and evolving a good store front-end to both look good and to have healthy conversion rates.
But over the past years, the front-end has been changing. Coding evolved drastically with new frameworks and tools. From complex design systems to companies undergoing A/B testing for every single part of their experiences – the front-end implementation and management are quickly becoming more scalable and simpler. It’s commoditizing. And we believe the storefront should be the same.
Let me give you an example: In 2013 we launched an important product: our SmartCheckout. It was one of the first password-free checkouts on the market and helped our clients increase sales and conversion rates. We were very successful because we analyzed and studied the best possible user experience. We designed and tested a lot. And then scaled to all of our clients. So, if you are a VTEX client nowadays you don’t need to worry about building a good checkout — you just trust that ours does the job, right? Well, we think it’s time for us to do the same with the entire storefront.
Think of a store front-end: what are the crucial elements every e-commerce has? A menu, a footer, a product shelf, a product page, a search function, cart, checkout and so on, right? That’s the idea. Regardless of their layouts or brands, all of our clients need the same structured information — in different flavors and combinations — but all in all, the same information.
What happens nowadays is that — as checkout was 8 years ago — every new store has to invest time and resources to implement, resolve bugs and improve through countless tests and errors. It’s a really slow and expensive learning curve — exactly the opposite of what we want as a product and as a company. And this is exactly why we’ve built VTEX IO Store Framework: to make implementation faster and evolution even faster still — with the best user experience, conversion rates, and speed.
So, what is this new product? In a few words, VTEX IO Store Framework is a low-code implementation framework to build stores at VTEX. Designed on top of VTEX IO, our development platform, the system uses React and Node to access all VTEX data and transform it into highly customizable pre-built components that are created, managed and evolved by VTEX and our ecosystem.
What does this mean? We’re making the implementation easier with ready-to-use components, while also leveraging our community of developers and all the learnings of our clients to make those same components evolve. With VTEX IO Store Framework, every piece of your layout — and therefore your own store — will keep getting better and better.
You will be able to create your store front-end in your own terms, brand, and style — manage it with ease — while we make sure that it is bug-free and up-to-date with the best practices and technology. When you implement using the VTEX IO Store Framework, you are choosing to help the entire ecosystem to have a better experience and yet leverage our commerce experience to make yours better too. This is what happens when open-source meets true scalability, and this is what we believe will be the future of the storefront.
Sounds good, right? Let me explain how we are delivering this:
The principle is simple: using an atomic and modular design architecture, we have created everything from small UI elements to complex, pre-built components — such as product shelves, sliders, menus and so on — that access all VTEX data to show it seamlessly in the front-end. With those components, you can rapidly build pages and templates without having to start from scratch.
But how can we build a framework so opinionated and yet meet the needs of enterprise companies? It needs to be highly customizable. This is valid for every level of granularity: every element of your layout — from type and color to paddings and corners — is in the same design system, so you can manage and update styles with ease. If you want to change the size of your H1, you just do it once and every page will follow suit and update.
Besides the layout “atoms”, all pre-built components were built with clear CSS Handles that identify every individual element, making it possible to change and customize specific pieces of the layout according to your own identity.
The next level of customization is in the layout — and this is non-negotiable for enterprises. To help you build your own, we’ve created what we call layout components. These are blocks that can gather components and organize them in multiple ways, both in lines and columns. All of this to enable you build stores in a faster and smarter way.
When we think of storefront, we have to consider who will manage it after the implementation — namely the marketing team. We have some pretty good news for them as well:
Along with the new Store Framework comes our new CMS. With it, you will have a WYSIWYG Site Editor to manage and edit content with ease. Also, you will be able to edit templates and pages with autonomy. Remember the H1 example? You will now be able to adjust your template styles by yourself – without needing a developer to do the job.
We also have several native components such as WordPress blog integration, a native Review and Ratings tool, and tag integrations to track and manage all your marketing strategies in sync with the main market tools.
But this is just the beginning. On the path to making the storefront in the best way possible, we now have a native A/B testing tool currently in beta. Using VTEX IO, your team can run multiple tests to improve the experience to its fullest. The new A/B test uses our new multiple workspaces architecture. With it, you can have infinite staging environments that work like copy-cats of your own store — so you can design and test new versions safely and quickly.
All of this is meant to ensure the same thing we’ve achieved with SmartCheckout — the best experience and conversion rates possible.
From now on, all stores using VTEX IO Store Framework are PWA-ready. This means that stores will be able to handle offline navigation and purchases, running as a native mobile application. In other words, your online store will be able to run as an app on your customer’s phone.
To deliver the best experience, we’ve tackled the entire online buying journey. From home to search and navigation. From cart to checkout and order cancellation. With the new framework, you keep leveraging our exclusive, patent-pending password-free checkout to boost conversion rates while empowering your customers through a self-service area with access to order history, fulfillment tracking, cancellations and more.
Last, but not least, one of our main focuses is speed. For a modern store to perform, it needs to be fast. To that end, we’ve developed a single page application architecture to deliver a fluid navigation experience. Do you know when you are browsing through a mobile app and only the content changes? That’s the experience we want.
After reading all of the above, I hope you are as excited as we are. Therefore, we invite you to join our public beta. The product is ready to hit the streets and we want new developers, marketers, and retailers to improve it with us.
The CCX Company, in collaboration with VTEX Commerce Cloud, expresses gratitude for having had the opportunity to enhance its understanding of the advantages, trends, and other elements addressed in the current topic. This article was jointly developed and is brought to you by the VTEX Commerce Cloud team.
