Case Study: Deux Huit Huit's Impressive,
Purely Custom Snipcart Integration

For this case study, we interviewed our geek friend Nicolas Brassard-Ferron, partner and director of development at Deux Huit Huit. Their agency developed the most customized and beautiful Snipcart integration we've seen since we launched our product in 2013. When we saw their client project, we immediately felt compelled to share it with our community. Hopefully, it'll inspire our actual and potential users to build amazing e-commerce experiences with our HTML/JS shopping cart.

We hope you enjoy the following case study. :)

The agency


Deux Huit Huit (288) is an interactive and branding agency from Québec’s own booming metropolis, Montréal city. Since 2010, they’ve been creating amazing web experiences and out-of-this-world visuals for dozens of clients and collaborators.

Today, the quality of their work allows them to boast a list of awards that’ll make your fingers scroll for a while.

The client

C’est Beau Handwork is a Québec-based collective of passionate craftsmen who have dedicated themselves to making authentic products customers can keep forever. They traded planned obsolescence for built-in durability and quality, without sacrificing an ounce of style in the process.

Back in 2012, their experience in recycling old skateboards into revived, awesome cruisers led the founders to valuable insights: people loved to buy handmade, eco-friendly local products, and artisans were faced with tough international competition. Building on those insights, they transformed C’est Beau | Handwork into the local powerhouse collective that it is today.

Snipcart integration: Technical interview with Nicolas


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

Back when the C’est Beau project started, Deux Huit Huit was already their go-to agency for anything web/digital-related. Since they were a self-funded start-up, C’est Beau didn't have the budget to create a full-on customized e-commerce website, so we decided to create a custom Shopify theme. Deux Huit Huit had already launched 2 successful Shopify-powered websites and, at the time, it was the best bang for the buck option we could find.

Developing for Shopify has been really tricky for Deux Huit Huit: the lack of flexibility regarding the data model and how we can’t access basic things (like the query string) from their templating language was really hard for us to work around. The lack of multilingual support was also a big deal breaker. Sales were doing okay for the past year, but the former website (being non-responsive) already felt like it was obsolete.

There’s indeed a bunch of solutions and ways to handle e-commerce nowadays. Why use Snipcart?

Deux Huit Huit specializes in creating visually appealing and easy to use interfaces, so we needed to use all of the tools we wanted. We did not want to create yet another cart and payment processing system, so we started to look at a SaaS-based one. Every one of them did too much: you had to sync the inventory into the system, or even use their front end layer, which was a no-go.

Deux Huit Huit has been a major contributor to the open source project Symphony CMS, which we could not live without. We really wanted to be able to create all the data modeling in Symphony, but delegate the cart and payment to a third party service. That’s when we found out about Snipcart, which was the perfect match.

Symphony is both a user and developer-centric application. The developer has full control over both the front end and back end, plus the interface is easy and convenient for the end user. Going from sign up to having an e-commence-enabled website accepting payments from multiple gateways can be done in less than an hour with Symphony CMS. Since we already control 100% of the markup, dropping a JavaScript file and adding data attributes was really easy to do.

The cart customization your developers pulled out of their magician hat is off the charts. Can you tell us a bit more about the whole process, in terms of time and technical challenges?

We do hire crazy magicians! It took about 40 hours to be able to pull this off. Most of the technical challenge was around learning how Snipcart’s HTML/JS/CSS worked. After that, we were able to customize both the UI and the UX of the cart using only CSS. We ditched Snipcart’s default CSS: everything is custom.

Editor's note: Snipcart's v3.0 is coming later this year (2018) with enhanced reactivity, modularity and customization functionalities. Subscribe to the newsletter to stay updated.

On the other hand, we also needed information that was not yet available through Snipcart’s JavaScript API. But our relationship with Snipcart had always been good, and their team strengthened it by adding new methods to their API for us, which was really awesome. Those improvements are now documented and available for everybody. ;)

Did you rely much on our API & webhooks for this integration?

Not that much. The API only serves to display data in custom places and was needed because of our JavaScript framework, which transforms normal websites into Ajax-powered machines, needed some tweaks in the app lifecycle. Webhooks were used for custom shipping rates and to synchronize the inventory.

Was our documentation & our support helpful?

Some documentation sections could have been more complete, but your team did update them after being notified!

As for the support: it’s quick, awesome, useful and everything I could dream about. This is particularly helpful for developers since we can talk directly to other developers. There is nothing more frustrating for a software engineer like myself than talking to a technically-challenged support agent.

How do you handle inventory management for C’est Beau?

Since Symphony CMS is built for developers, it was really easy to create an endpoint to receive Snipcart’s webhook. Since id is unique across the whole CMS, we could even scale things that do not have the same data model really easily. Once this is stable, it will be open sourced.

Editor's note: Snipcart also supports out-of-the-box inventory management.

It’s our understanding that Symphony CMS is one of your favorite CMS at Deux Huit Huit. How did integrating Snipcart on top of it go for this project?

Super easy. So easy that we can’t even do an extension to the CMS since the only thing that was needed was data attributes. We are now looking at open sourcing tiny pieces of integration, like the inventory management for instance. We are also planning to invest in order to make Snip’s order data available right in Symphony’s backend, like we already did for Google Analytics.

What could we improve to make Snipcart an even better e-commerce solution for developers and web development shops?

Developers should already feel at home and be able to see that Snipcart is a mature platform. As for the end users (our clients), they would really like to have better reporting functionalities in Snipcart’s backend, but I am pretty sure you guys are already working on that!

Editor's note: reports have indeed been improved since the publication of this case study. Sign up free to get a feel of the merchant dashboard!

If you found this post valuable and/or inspiring, please, take a second to share it on Twitter. It would mean a lot for all of us (Snipcart, Deux Huit Huit and C'est Beau). We'd also love to hear your thoughts/questions in the comments on the integration itself and the tech powering it. And of course, we invite you to go ahead an give the C'est Beau online store a look!

Suggested posts: