SvelteKit + Shopify: How to Build a Lightning-Fast Ecommerce Site

Unlock the Power of Headless Commerce with Shopify and SvelteKit

The world of ecommerce is evolving rapidly, and headless commerce is leading the charge. With the recent update to Shopify’s Storefront API, developers can now use their Shopify store as a backend service to power any frontend application of their choice. In this article, we’ll explore how to build a SvelteKit ecommerce site powered by a Shopify backend.

Getting Started with Shopify

Before we dive into the world of SvelteKit, we need to set up a Shopify store. If you don’t already have one, create a Shopify partner account and set up a development store. Generate your API credentials and create some products and product variants. You’ll also need to create a private app on your Shopify admin dashboard.

Setting Up SvelteKit

Now that we have our Shopify store set up, let’s move on to SvelteKit. Install and run SvelteKit using the commands below:


npx degit sveltejs/template my-sveltekit-project
cd my-sveltekit-project
npm install
npm run dev


These commands will create a new SvelteKit project, install the required packages, and open the project in your browser at localhost:3000.

Styling Our Application

For convenience, we’ll use a global style file in this project. Open your app.css file and update it with the CSS snippet below:


/* Add your styles here */


Fetching Products from Shopify

Now that we have our Shopify store set up and our SvelteKit project running, let’s fetch some products from Shopify. We’ll need to make an API call from our SvelteKit application to fetch all the products from our Shopify store and display them on our application.

Before we do that, let’s talk about authentication. Every Shopify store has credentials that you can use to access them from other applications. If you haven’t generated credentials for your store yet, go ahead and generate them now.

Back in your SvelteKit project, create a .env file and update it with your Shopify API keys. Then, create a store.js file in the root of your project folder and update it with the snippet below:

“`
import { writable } from ‘velte/store’;

const getProducts = async () => {
const response = await fetch(‘/api/products’);
const data = await response.json();
return data;
};

const store = writable([], getProducts);

export default store;
“`

Creating Components to Organize and Display Products

Now that we’ve fetched our products from Shopify, let’s create two components to help us organize and display the products: ProductCard.svelte and ProductList.svelte.

Create a components folder in your project’s src folder and add the two files above. Update ProductCard.svelte with the snippet below:

“`

“`

Update ProductList.svelte with the snippet below:

“`

{#each products as product}

{/each}

“`

Building a Product Details Page

Now that we’ve set up our product listing page, let’s create individual product pages. Update store.js with the snippet below:


const getProductDetails = async (handle) => {
const response = await fetch(`/api/products/${handle}`);
const data = await response.json();
return data;
};


Create a new routes folder in your project’s src folder and add a products/[handle].svelte file. Update it with the snippet below:

“`

“`

Deploying to Netlify

Now that we’ve completed our SvelteKit ecommerce site powered by a Shopify backend, let’s deploy it to Netlify. Install the Netlify adapter using the command below:


npm install @sveltejs/adapter-netlify


Edit your svelte.config.js file and import the Netlify adapter. Create a netlify.toml file and set it up like so:

“`
[build]
command = “npm run build”
publish = “build”

[functions]
directory = “functions”
node_version = “12.20”
“`

Push your project to GitHub and head over to your Netlify dashboard to deploy your site from the GitHub repository.

Next Steps

In our next tutorial, we’ll hook up our SvelteKit ecommerce site with even more Shopify features as we add cart functionalities. Stay tuned!