← Back Home

JAMstack e-commerce: Shopify & Gatsby

April 25, 2020

Peter Hironaka - Front End Developer

@peterhironaka

Today's date is April 25. We've all been in self-isolation for nearly a month, and it's unclear when (or if) we will return back to our "normal" lives. It certainly seems as though it will be a long time before we return to shopping at malls and retail spaces. As a result, this cultural shift we're all part has already begun accellerating the shift to e-commerce, which in fairness was already well underway.

According to 99firms, there were nearly 2 billion digital customers in 2019 alone.A few more stats:

  • The total value of global retail ecommerce sales will reach $4.13T in 2020
  • 80% of Internet users in the US have made at least one purchase online.
  • By 2040, around 95% of all purchases are expected to be via e-commerce. Yes, you read that right - 95%.

But the one statistic that really stood out at me was the following:

Almost half of American small businesses do not own a website.

Now more than ever, an online presence is essential for any business. Thankfully, there are tools like Shopify that empower entrepreneurs to create e-commerce businesses with relative ease.

For those of you who haven't used it before, Shopify is an e-commerce marketplace for entrepreneurs. It's similar to Amazon in a sense that any company can sell their products via their service. The main difference is everything sold on Amazon is hidden behind the Amazon brand, whereas Shopify is the opposite. Its branding is hidden behind the companies selling products on their platform. It empowers entrepreneurs, and the best part is you can get up and running with a new Shopify store with a few simple steps.

Shopify has multiple pricing tiers with tons of features, so it makes it easier to scale your business as it grows. They even have a generous 90 day free trial.

The web dev/coding experience is very similar to that of Wordpress. You have a theme, which houses all your files and pages for your site. There's an app ecosystem to integrate various third party plugins to your store. And like Wordpress, you can choose from a selection of pre built themes to get your store up and running faster. Shopify has made the barrier to entry very easy.

For the sake of this post, I've chosen to write this to all my non web dev peeps. This is for:

  • Anyone who has managed an e-commerce store and is interested in improving performance and cutting costs on monthly fees.
  • Total newbies looking to get a start.

Potential drawbacks w/Shopify Themes:

  • It's expensive. If you go with their intro tier, it's $29/month, and that doesn't include the transaction fees on each purchase, shipping rates etc. Not to mention if you decide to invest in a new Theme, that's a couple hundred dollars. And say you wanted to make alterations/enhancements but didn't have the ability to, that means finding a developer to make those updates.
  • Service maintenaince. If Shopify gets inundated with too much traffic or some hackers are up to no good, then your shop is vulnerable to those same attacks. The silver lining in all of this is Shopify is an amazing company with world class engineers that work around the clock to ensure your store and its customers are safe. It was actually a few weeks ago that Shopify's CTO tweeted that they were experiencing Black Friday levels of traffic everyday and were able to sustain it. Pretty remarkable! Still, even so, anytime you are working with servers, you're always suceptible to outages every now and then.

The JAMstack represents the present and future of the industry. The JAM in JAMstack stands for Javascript, APIs (Application Programming Interface), and Markup. Without getting too into the weeds on technical jargon, it essentially represents the essential tools for any modern website. A few unofficial rules of JAMstack are:

  • Serve static if you can
  • Serve on a CDN (Cloud Distribution Network)
  • Own your content

Sites that use JAMstack technology have the following benefits, among others:

  • Save money on costly serving fees. Since the JAMStack doesn't require a traidional server setup to create pages, you end up saving a considerable amount of money.
  • Increase performance. There is no payload time between the client (browser) and server.
  • Security. Static sites are impossible to hack.

The best thing all of these features do is increase your site's SEO performance! More people discovering your site should mean more $$$.

I have built a demo Shopify store that utilizes the power of the JAMstack. In this case, I've coupled Shopify with my favorite javascript framework Gatsby: https://gatsby-shopify-store-example.netlify.app/

As you can see, it's very fast! Truth be told, I haven't even put that much effort into optimization, these are sort of the expected results when you build with the JAMstack. I'm also serving it over a CDN (Netlify), which is on my free plan.

This is a huge topic of conversation, and I haven't even really scratched the surface. I plan on making more posts on the subject of e-commerce in the coming weeks and months. My hope in all of this is to persuade more folks to use tools like Gatsby to build more custom and cost-effective Shopify stores.

More to come.

© 2009-2020 Peter Hironaka