How we developed a fully custom Shopify solution for TAUR
Just recently, we had an opportunity to build an eCommerce experience for TAUR — the world’s most accessible EV. Basically, TAUR is a practical urban vehicle designed to ride safely on the road and fit effortlessly into your life. So let me tell you a bit about how we approached this project and show you some features we set up to infuse the brand’s personality into the site.
What’s under the hood?
Very quickly we decided to go with Shopify on this one. Why? Because Shopify is one of the most popular eCommerce platforms and it’s our favorite one for creating an experience with a high level of customization. On the other hand, clients love to use it because it’s very easy to operate.
So, we fully utilized the Shopify Online Store 2.0, especially the “Section everywhere” update which gave us the possibility to create a fully modular solution but I’ll get to that later.
It’s also worth mentioning that the theme for Taur was developed from scratch instead of using an existing theme as a starting point — this gave us maximal flexibility to meet the client’s goals. For example, the code that runs the theme is version-controlled using Git and it’s deployed on Shopify from the main branch. This flow allows us to have multiple developers working at the same time independently while using Git to request merging on the main branch/theme.
Speaking of development, we used the latest tools and libraries like ES6+ Javascript, SCSS, Webpack, and GSAP. As a frontend starter, we used our internal start kit called b-creative while Shopify Packer served as a bridge between our frontend and Shopify admin (this was done with Themekit).
Stock is boring
The idea behind our solution was to create a fully modular backend using Shopify sections. This means all modules can work on all pages, and you can create templates that hold these modules on the fly. Also, they all have multiple options which can change the look and feel of the content as well.
With that in mind, you can create hundreds of combinations on an unlimited number of templates and create unique landing and marketing pages without development intervention. The new Shopify customizer that came along with the Online Store 2.0 update is the perfect tool to work with sections everywhere. As a client, you can give real-time visual feedback on every change and interact with the content as easily as using drag and drop.
This makes it easier and faster to react to the data coming from analytics and other tools because you can, for example, completely change or adjust the homepage in just a few clicks. It does not get more flexible than that. And the website content is 100% customizable in Shopify.
It makes things super easy for our clients so we work like this on all of our Shopify projects.
Not your average checkout flow
TAUR had a very specific vision for how they wanted to handle the user flow from the first click to purchase so we developed a fully custom checkout experience that guides the customer. The simplest way to describe the checkout flow is that it’s a multi-branch process, with branches having multiple steps that depend on the selection.
This means the user is led to the cart page that hosts this flow from multiple parts of the website. On the cart page, the user can select whether they want to preorder or buy the full product and go through steps that can suggest buying other products such as accessories.
Ultimately, we show the user its current and final list of items they are billed for, leaving things very open and transparent. This custom checkout flow gives TAUR the possibility to present the up-sell at the best possible time.
Behavior like this is far from default so all the logic is based on Javascript, using Shopify Ajax API. The collection of Ajax APIs enables us to interact with Shopify backend without reloading the page and share the latest data across the components in real-time. It’s also important to say that the client has full control over the whole flow in terms of content, steps that will be shown, up-sell products, etc. No hard-coding anything.
Perfection is lots of little things done right
No stone was left unturned when it came to development. The goals were clear — everything needs to look like it’s part of the website, which includes all the integrations. That being said, we fully integrated all the vendors without the iframe-s. Every integration has its own modal dialog which implements the vendor with fully custom-styled HTML and CSS or via API if the vendor provides one.
Some vendors we used are ActiveCampaign for the newsletter and contact forms, Calendly for appointments, etc. By taking this approach we could style the integrations completely and achieve a seamless experience with the smallest possible impact on performance. The devil is in the details.
Does it come in black?
TAUR is not only an eCommerce store but it’s also a canvas to creatively showcase what TAUR is — a lifestyle. It’s hard to achieve a high-converting eCommerce that wins awards for creativity. That’s why it’s exactly what we are trying to achieve.
The blend between eCommerce and creativity is our specialty because it gives us a lot of room for out-of-the-box thinking. For example, TAUR’s Virtual Showroom. It is an interactive video application that contains all the features of a TAUR vehicle but what’s clever is that it’s presented as a collection of small, perfectly synced videos where the user can choose which feature they want to see.
The experience is both audio and visual and has some hidden easter eggs so make sure to check it out.
How does it run, though?
Here’s the deal when it comes to performance — we only deliver highly optimized, accessible, and SEO-friendly code. From the very first line of code, we made the effort to think about the speed and quality of the experience.
Apart from the industry standard optimization solutions like code splitting, lazy loading, preloading, and all other buzzwords, when working with Shopify, the applications (plugins) can ruin every effort you do on the code side. Instead, TAUR is done with zero frontend applications, and only one backend application for meta fields (not affecting frontend performance).
We developed custom libraries we use for most common application usages, like our GoCart.js cart drawer or cookie popup. By taking advantage of all that, the result is a high-performance and tailor-made solution for TAUR. Just like the product itself.
