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 Shopify Storefront API. 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 — Astro, Nuxt, Gridsome, Eleventy, and Angular — all built with a Shopify-powered backend store. Let’s build another one with SvelteKit!
[H2] Set up Shopify
The first thing we should probably do is set up a Shopify store. All this will not be possible without one. Here's how you can quickly set one up for yourself:
Create products and product variants in your store. These could be dummy products or actual ones
Create a private app on your Shopify admin dashboard. 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 the documentation 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
cd sveltekit-shopify-demo
npm install
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:
screenshot of the demo site
Alright, let's get building!
[H3] Styling
For convenience, I'll use a global style file in this project. Open your app.css file and update it with this CSS 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 Tara for creating this store and filling it up with products so that I can use it and pretend that I did all the work.
screenshot of shopify product listing page
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.
[H2] Set up Shopify
[H2] Set up SvelteKit
npm init svelte@next sveltekit-shopify-democd sveltekit-shopify-demonpm installnpm run dev -- --open[H2] Fetch Products from Shopify