INGMARSON’s Shopping Cart Integration in a Gatsby PWA

It’s been quite a while since the last time we released one of these case studies.

However, when developer Tim Walpole contacted us to showcase his new Snipcart integration, we thought: “Woah, this is cool, gotta do something with this!”

Tim went down the JAMstack road and used tools we’ve been writing about to build a neat Gatsby progressive web app (PWA) for his client INGMARSON.

He was kind enough to give us his take on this modern way of building websites and how Snipcart fits into all of this.

It was a pretty exciting exchange, so let’s see what he had to say!

The developer in question

Tim Walpole began his career 21 years ago as an IT consultant for ICL (and then Fujitsu). He then spent time working in Seattle at Microsoft, in Luxembourg at the European Commission, as well as for HP. He now works for BJSS as a hands-on cognitive architect.

He has a passion for system integrations and is always looking for innovative ways to connect systems together. After joining BJSS, Tim became “head of mobile”, where he has refined his passion for design, development and delivery of quality mobile applications.

Since then, chatbots, artificial intelligence and machine learning have sparked Tim’s interest, and he has focused his attention on this exciting area. As a cognitive architect, he designs complex, vendor-agnostic, multi-lingual, cloud-based chatbot solutions for a range of clients.

Out of his professional activities, he’s also the father of two grown-up daughters, enjoys choral singing, and is currently working on renovating his 1850’s property.

The client

INGMARSON is a high quality, ethically sourced clothing line boasting neat designs. It was created by Robert Ingemarsson, a Swedish fashion designer with a clear vision for ethical and sustainable products. He’s focused on using recycled & organic materials.

Just like the clothes he crafts, Robert is very particular about his website’s design. He’s very aware that INGMARSON’s branding is reflected not only in his fashion designs but also in the website’s. Everything has to be perfect, starting with the user experience—including loading speed.

He’s now looking to grow the INGMARSON brand slowly and minimize costs wherever possible. As the business grows, the e-commerce solution should be able to grow and scale without incurring massive costs.

Tim’s take on the JAMstack, PWAs & Gatsby

We're big proponents of the JAMstack at Snipcart. Do you know about it & (if so) how do you feel about it (JavaScript, APIs, Markup)? Thoughts, doubts, experience?

As a small (growing) company owner, Robert wants to be able to concentrate on what is important—delivering high quality, ethically sourced clothing designs. We don’t want to have to worry about maintaining a high-cost website, ensuring security, staying up-to-date, or meeting GDPR regulations for data storage.

When I researched how to check all these boxes, I came across posts from Snipcart (and others), showing how JAMstack could do that. With it, we could run a static website, with markdown content which was rebuilt every time the content is changed. We could use a simple CI/CD pipeline to push content through development, staging and live servers allowing us to validate both technical and content changes before they go live. It was a revelation.

Markdown content is a great way to deliver content for an e-commerce website, and by using Forestry.io as a headless CMS, we’re able to provide a simple frontend which allows our markdown content to be authored, and then committed to the repository to kick off the CI/CD pipeline into production.

All we then needed to do was adding Snipcart’s JavaScript snippets to provide the shopping cart functionalities.

A set of APIs, webhooks and serverless functions helped to provide a fully functional JAMstack implementation through our whole pipeline. Using AWS lambda’s behind an API gateway allows us to deliver our APIs in a secure way for zero cost.

Search engine optimization is also vital. Gatsby, with properly designed SEO headers, provides everything necessary to deliver great SEO-friendly content.

Is Gatsby a go-to app builder for you, or was it your first time working with it? Why Gatsby?

It was the first time I worked with Gatsby.

Our original site was created (two years ago) with Hugo (and Snipcart as well). We chose Hugo at the time because it gave us the ability to create a static website which could be hosted for free. It also allowed me to quickly develop the site using the designs provided by INGMARSON while letting Robert update the site through Markdown-generated content.

The issue with Hugo after a while was the speed of the site. After lots of research, I decided to rewrite using Gatsby to provide a blazingly fast website with amazing image loading times. As a bonus, the site could work offline, thanks to PWA’s functionalities.

Do you have much experience working with PWAs? Were there specific requirements for this project that made you choose a PWA?

It was also the first time I have created a PWA!

Incredibly, Gatsby offers this out-of-the-box. It’s so simple. A few clever plugins allow you to take a traditional website and turn it into a progressive web app that works offline.

E-commerce integration on INGMARSON’s Gatsby PWA

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

INGMARSON has been running for just over 2 years now. We started on a self-hosted Magento solution, which was slow, cumbersome and hard to maintain. As I previously said, the company’s very specific branding needs pushed us away from using any templated system, such as Shopify.

So we moved on to the JAMstack (Hugo, Forestry.io & Snipcart at first), and finally settled on a blindingly fast Gatsby implementation.

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

E-commerce requirements were plentiful:

• The shopping cart had to be customizable at all stages, to easily integrate into the website, and to be fully responsive.

• Orders needed to be managed through the cart provider’s system

• Dev (I) needed to be able to programmatically change the cart (such as shipping costs & vouchers)—which meant access to webhooks at each point of the journey.

• We did NOT want to handle any customer data on our site, as it is a static site.

• Customers, carts, discounts, & abandoned carts needed to be easily managed.

• Email generation and customization were essential, as emails had to be styled according to Robert’s designs.

• We needed to be able to upload products from a JSON file (sitting on the website) and to manage stock levels automatically.

• Support for Braintree payments had to be available as it was the payment gateway we were previously using.

We needed to be able to integrate with Mailchimp, so when an order is placed, the customer is added to a newsletter (assuming they had opted in under GDPR regulations). To do this, we have webhooks (currently running on Zapier, but being moved to AWS Lambda) to allow the newsletter signup as part of the cart journey in the Snipcart custom fields properties for the second page of the cart.

We also use AWS Lambda to automatically calculate shipping fee changes depending on the entered promo code (i.e. for free shipping). Products can also be fetched from an AWS Lambda API to upload all of the current products to Snipcart when new products are introduced.

Finally, analytics on an e-commerce website is critical. By using Google Analytics's enhanced e-commerce JavaScript tagging combined with Snipcart’s events API, it’s possible to track every action on the website and build up a picture of website usage, users’ e-commerce behaviour, and performance.

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

Well, as you can see, this project asked for quite a complex e-commerce integration, with many requirements. Snipcart checked all of our boxes.

When researching the relevant providers, I did an analysis based on costs and functionality. The main competitor was Stripe, but it did not provide all the functionalities required, especially around the widget customization and back-office management capabilities. There is no one in the market (as far as I know) that offers the flexibility that Snipcart provides.

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

Initial implementation took under two hours to getting up and running. The APIs are easy to follow, and there are lots of guides and tutorials to help you with the cart customization and use of the webhooks and API.

Were our documentation & our support helpful?

Yes. The tutorials are great, and the documentation provides all you need.

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?

Inventory Management: Yes, we’re just starting to use this as we’re now getting to the point where we need to identify items that are out of stock or limited.

I have to say, though, being able to see all products in tabular form and to be able to update inventory on all products on a single page would be an amazing addition. Having to go through each product is time-consuming.

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

A mobile-friendly admin portal would be great. Since we’re on the go all the time, being able to mark orders as shipped or look at abandoned carts when on the mobile would be super useful. Currently, it’s not really mobile-friendly.

We want to thank Tim for agreeing to do this. He was very generous with his answers and it’s widely appreciated. We also have to thanks INGMARSON for letting us take a closer look at their online store. Don’t forget to check out their high quality, ethically sourced clothing designs!

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