Case Study: Locomotive's Superb Snipcart Integration
with a Custom CMS

For this case study, we’re interviewing Mathieu Ducharme, partner & technical director at Locomotive, a Montreal web agency.

Their team has pulled off fantastic e-commerce experiences powered by Snipcart. Today, we’ll focus on one client site in particular: Kvell.

Let’s dig in.

The agency

locomotive-team

For 10+ years, Locomotive has been crafting high-end solutions for all sorts of clients.

What began as a small venture in a downtown Montreal apartment became a team of experienced UI/UX Designers, Javascript programmers, backend (PHP) developers, project managers, and more. Thanks to their multidisciplinary roaster, they deliver much more than simple websites. From custom development to business strategy and brand experience, they do it all—and gracefully at that.

Locomotive believes in an Open Internet and uses as many Free Software / Open Source tools as possible. Their entire process is built on a LAMP stack. Their Framework / Content Management System, Charcoal, is available under a Free Software license.

They also genuinely care about providing a creative, flexible, and human-centric work environment. Check out the team’s 10-year celebration in the Dominican Republic; you’ll get a feel of their vibe!

Scroll down this page to glimpse at the stack of awards they’ve been piling up.

We’re proud to count this creative agency from the <3 of Montreal as a partner.

The client

kvell-home-desktop-mobile

Kvell sells design-centric furniture and home interior objects. Their products have a minimalist, appeasing quality that conveys a mixture of pride, comfort, and happiness. Their website actually feels the same way!

kvell-logo

The logo, by Alan Wisniewski — Creative director at FHE Group

FHE Group, based in Toronto, came to Locomotive to create a website for Kvell, a new Scandinavian-inspired furniture brand for big cities with small spaces. Locomotive got involved early on in the process to advise on some early elements of their brand identity, alongside Alan Wisniewski — Creative director at FHE Group — and create a beautiful digital ecosystem closely aligned with the product itself: simple, colorful and functional. Collaborating with Simon Levesque and the Consulat photo studio, Locomotive set up a photo session to put Kvell products in the spotlight while making the greatest possible impact. Creating made-to-measure imagery allowed the original art direction to be perfectly rendered, while showcasing the products and their features, giving an exceptional final result.

Technical interview with Mat from Locomotive

kvell-product-customization

Product customization

How was the client operating prior to your development efforts? How were retail and online sales handled?

Kvell was an entirely new brand for FHE Group, so they did not have any online presence at all. The website was developed in 2 steps: the first step was bringing the products to the public, with the help of an immersive site; the second step was to add online sales capability. Exactly the typical type of case where Snipcart comes in handy.

kvell-home-product-slideshow

Category navigation

kvell-product-page-scroll

The scroll

Do you have experience with e-commerce in general? If so, which tools have you been using the most in your workflows? Why?

We have built many e-commerce websites through the years, using a plethora of tools and technologies, from Magento to Shopify to Snipcart. With custom payment gateway or simply with Paypal / Stripe. Because every client needs is very different, we like to have many options when it’s time to create a shopping experience. Of course, the client’s budget will also play an important part in the technological decisions.

We integrated many tools within our Charcoal framework for easy re-use in other projects.

How would you qualify the e-commerce needs your client had for this project?

As a new brand, their main concerns was getting to market as quickly as possible, while keeping the focus on the “upscale” aspect of the products. This was mostly achieved through the stunning design and photoshoot. A well-made cart (provided by Snipcart) was also a crucial part of the user experience. The integration with backend tools was fairly minimal, as they are in the process of setting up their entire infrastructure, so the various tools provided by Charcoal and Snipcart were sufficient, for now.

There’s a plethora of solutions and tools to handle e-commerce projects. Why use Snipcart?

In the case of the Kvell website, it was really a no-brainer. We already had the first phase of the site online, with the entire catalog of products. All that was missing for the second phase (the actual e-commerce functionalities) was a cart and basic inventory management.

The fact that we can have full control of the styles, and have an easy-to-use javascript API was the main reason why we chose Snipcart. Many “turnkey” e-commerce solutions promise a plethora of possible customizations but often fail to deliver when actually put to the test.

Although we did not know at the time that Snipcart was a Canada / Quebec product, it would obviously have had a positive impact on our decision, as we always try to “buy local” when it makes sense.

Did you integrate our e-commerce solution on top of a specific CMS or site builder? If so, how did it go? Any exciting parts of your integration to highlight?

While we were pleasantly surprised to find out that Snipcart works very well standalone (without any actual backend), we did integrate many of the available features (inventory as well as order hooks) to work with Charcoal. We could piggyback on those efforts for our next Snipcart project: https://greenbeaver.com/en

How long did it take to get Snipcart up and running?

Having a working prototype was nearly instant. Customizing the cart look and adding our custom events was probably done in about a week, without taking into account the final quality assurance on the project prior to launch.

Did you rely much on our API & webhooks for this integration? If so, how did it go?

On the frontend, we used the built-in events extensively to create an interactive/reactive shopping experience. We used the shipping API to calculate the prices and integrate a 3rd-party shipping solution. We mostly use the various hooks to connect the orders status changes with the CMS and send custom emails when required (bypassing the builtin snipcart features to use our own internal system).

Were our documentation & our support helpful?

Documentation is pretty clear, mostly because the API itself simply makes sense. The Snipcart team was very responsive. We have always had a timely response, and were explained the limitations of the system thoroughly when we ran into them.

Did you get the chance to use advanced Snipcart features (inventory management, abandoned carts, email templates customization, multi-currency, etc.)? If so, how did it go?

No. Those features were either unneeded for this project or already implemented within our existing framework.

What could we improve to make Snipcart an even better e-commerce solution for developers & merchants?

Custom payment gateways. Some clients are tied to a payment gateway solution. We would like to be able to be able to still use Snipcart for their website, by handling the payment gateway processing ourselves.

Also, it would be great to have more options regarding promo codes to enable complex promo scenarios. I know there are planned improvements coming soon in this regard; we are looking forward to this.

We're big proponents of the JAMstack at Snipcart. How do you feel about it (JavaScript, APIs, Markup)? Thoughts, doubts, experience?

It is clearly the way forward. Having a well-defined API makes the server language irrelevant and allows backend and frontend teams to work in parallel as well as providing easy access to 3rd-party. Having the “app” and presentation logic in javascript allows much more reactive pages and has gotten really easy to implement with latest frameworks (Angular, Vue, React, etc.)

Conclusion

Agency life can get crazy busy, so we’d like to thank Mat for his time and answers.

There are so many talented folks in our Québec province, and it’s always a blessing to see them using our product. If you’d like to see another vibrant Snipcart integration from Locomotive, be sure to check out The Green Beaver Company.

If you'd like to learn more about how Snipcart works, head over to our documentation. We also have other interviews with developers & agencies who adopted our product into their e-commerce workflow. Many of them are now on our partnership program.

Liked this post? Take a second to share it on Twitter. All of us (Locomotive, Kvell & Snipcart) would really appreciate it. We'd also love to hear your thoughts and questions on the integration itself below!

Suggested posts: