Build a super fast ecommerce site with SvelteKit and Shopify APIs
If you have been keeping up to date with the headless commerce ecosystem, you will have heard some chatter in the community about the updated . The API allows store owners to use their Shopify store as a backend service to power any frontend application of their choice.
What this means is that you can have a Shopify store that has all your products and then build your custom ecommerce site with any frontend tool of your choice (like React, Vue, Angular, Next.js, Nuxt, and so on). This allows you to sell the products in your Shopify store via other channels like mobile applications, online games, and web applications.
When we saw this announcement, my team at Netlify decided to take it for a spin and build stuff with it. The result was five different starter templates — , , , , and — all built with a Shopify-powered backend store. Let’s build another one with !
[H2] Set up Shopify
The first thing we should probably do is set up a . All this will not be possible without one. Here's how you can quickly set one up for yourself:
- Create a if you don’t have one
- Log in to your partner account and create a (to test your implementations)
- to make authenticated requests to your Storefront API
- Create products and product variants in your store. These could be dummy products or actual ones
- Create a private app on your . This will represent your client application where you’ll be making requests
If you did all that, take a break and get a glass of water. Then come back and join me. Let's build this thing!
[H2] Set up SvelteKit
To get started with SvelteKit, you might want to take a quick look at to get a sense of how it works. Otherwise, stick around and I'll walk you through just what you need to get this site up!
Install and run SvelteKit with the commands below:
npm init svelte@next sveltekit-shopify-demo
npm run dev -- --open
These commands will do a couple of things for you:
- Create a new SvelteKit project for you
- Install the required packages
- Open the project on your browser at localhost:3000 like so:
Okay, looks like we are all set to start editing this project and making it look like the site we want to build. Oh, and by the way, this is the project we are building, if you'd like to take a peep:
Alright, let's get building!
For convenience, I'll use a global style file in this project. Open your app.css file and update it with snippet. That's it for styling. All we need to do now is reference the right classes in the project files and this application should turn out exactly as expected.
[H2] Fetch Products from Shopify
What's an ecommerce site without products, right? I know. If you created your Shopify account and added products to it, you should be able to see your product listing page in your Shopify admin dashboard.
Here's mine. Thanks to my colleague for creating this store and filling it up with products so that I can use it and pretend that I did all the work.
Now what we want to do is make an API call from our SvelteKit application to fetch all these products from our Shopify store and display them on our application. Before we do that, let's talk about authentication.