Les Mauvais Garçons' Shopping Cart Customization for a Kirby CMS Project

For this case study, we interview Simon Bédard, a junior frontend developer at Les Mauvais Garçons, a Québec City agency. He recently had the occasion to play with Snipcart on a client e-commerce project: Le Chasseur.

He developed the website with the popular flat-file CMS Kirby. His team at Les Mauvais Garçons also crafted a vibrant visual identity for the client's brand.

We're glad Simon took a few minutes out of his schedule to answer our questions on the blog!

Here's hoping the interview makes you want to experiment with a decoupled, frontend-centric approach to e-commerce. :)

The agency

case-study-mauvais-garcons-kirby-team

Les Mauvais Garçons is a young, bold marketing agency founded two and a half years ago. Located a few streets away from our own office, they're fellow members of downtown Québec City's bubbling tech scene. Their tight-knit team of creative professionals craft websites and brand experiences for all sorts of clients.

Check out some of their projects and their blog (French). You can also follow their social lives on Facebook & Instagram.

The client

case-study-mauvais-garcons-kirby-client-site

Le Chasseur is a brand of high-end cycling socks. Designed for performance, ventilation, and comfort, their socks provide strong support within any quality cycling shoes. And of course, they look great.

Snipcart integration: Technical interview with Simon

case-study-mauvais-garcons-kirby-shopping-cart

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

For this project, we were in charge of launching a brand new collection and online store for our client, Le Chasseur. They had decided to start by selling their products directly online, so a decent e-commerce platform was a must-have. For now, they're focusing both marketing and distribution efforts through online channels. Retail expansion will most likely follow.

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

Being a junior developer, I've not had the chance to play with many e-commerce solutions yet. While I don't have dozens of e-commerce sites under my dev belt, this one wasn't my first. Earlier this year, I had the chance to work on a Shopify site. A rather imposing platform, at least from my point of view.

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

Our client basically wanted to test the Québec market for selling quality sportswear products. They needed a simple, flexible and customizable e-commerce platform.

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

Snipcart being a home-brewed, developer-oriented solution definitely influenced our stack pick here.

That being said, we consider it to be a quite complete solution. It's ultra flexible, imposing practically zero restrictions on development tools and workflows. A few things we enjoyed: speed of integration, ease of cart translation, multiple shipping & payment methods, inventory management, & email templates.

Did you integrate our e-commerce solution on top of a specific CMS or site builder? If so, how did it go?

Le Chasseur's website was built using Kirby's flat file CMS. Thanks to your technical tutorial the integration worked like a charm. I also decided to push product management much further within Kirby. In other words, I made sure our client could handle all of this dynamically, directly inside the admin. I used that myself to quickly add options like sizes and colors to their products catalog.

How was your experience with Snipcart’s v2.0? How long did it take to get it up and running?

It was my first project with Snipcart, so I had to get familiar with each part of the product (dashboard, HTML markup, JS, etc.). But then again, my learning curve was far from steep, because Snipcart's flexibility and simplicity make it easy to pick up. Importing files and generating products with HTML markup both worked like a charm.

Customizing the cart itself was really simple. It's easy to just override the cart's pre-defined styles since the CSS file is well structured. I created an independent stylesheet I used to manage the cart's styles. It was then easy to apply our own styles of text, buttons, & colors to the checkout experience. Adding in-cart product image thumbnails, descriptions & custom fields was also quite simple. Very developer-friendly overall.

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

I haven't used webhooks for this project. However, I did get to leverage useful Snipcart functions such as the cart summary & show cart button.

Were our documentation & our support helpful?

The documentation was very useful to me, and I thought it was well-structured. That being said, some files outside the main docs were a little hard to find. But I still managed to always find what I was looking for. I even found additional techniques to use on future projects!

Did you get the chance to use some of our latest features on this project (inventory management, abandoned carts, email templates customization)? If so, how did it go?

I did use the inventory management. I think it's an awesome feature to offer a client! I had to deal with a small problem regarding unique IDs per product option (e.g.: SKU system) though.

As for abandoned carts, I think it's super valuable for merchants; it gives them a shot to increase their sales!

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

  1. Supporting a SKU system—unique IDs for each product variant.
  2. While integrating Snipcart to Kirby is quite easy, a dedicated Snipcart-ready plugin could be quite useful.

Simon and Les Mauvais Garçons really did a cool job on this site, so we invite you to go ahead and check out Le Chasseur's online store (especially if you're a cyclist yourself!).

If you want to learn more about how Snipcart works exactly, head over to our documentation. We also have a bunch of interviews with other developers & agencies who adopted our product into their e-commerce workflow. And many of them are now on our partnership program, in case you're interested.


Liked this post? Take a sec to share it on Twitter. It would mean a lot for all of us (Les Mauvais Garçons, Le Chasseur and Snipcart). We'd also love to hear your thoughts and questions on the integration itself below!

Suggested posts: