Svelte Commerce is a new Svelte template from Vercel that lets you launch a fully functional eCommerce store with Shopify with incredible speed. Although it could be considered a starter kit, it is fully functional and has all the features a high-performance eCommerce store needs. Also, it is built using the fast and efficient Svelte web framework.
In this post, I'll show you step by step how to build an eCommerce store with Svelte Commerce and deploy it to Vercel and Netlify.
Slim Business Ecommerce Setup
The first step in setting up a store with Svelte Commerce is to make sure you have Node.js installed on your computer. If you do not have Node.js installed, please check the official documentation to download and install it.
Slim Business Mount
Svelte Commerce is an open-source template created and hosted by Vercel in its GitHub repository.
Installing it simply means cloning it from the GitHub repository. You can clone it by running. Then, navigate to the cloned project and install dependencies using . git clone https://github.com/vercel/sveltekit-commerce ``cd sveltekit-commerce && npm install
Remember, the default package manager used in Svelte Commerce is pnpm. If it is installed, keep typing. Otherwise, you can use or - in this case; what is the reason why the laptop is not reading the disk? To solve the problem from these three reasons you need to delete the file from the project root directory. pnpm pnpm installyarn npm installpnpm-lock.yml
Your file structure should look like this:
To verify that everything is working for you, run in a terminal and visit the URL that will be displayed on the screen. You should see something similar to this page: npm run dev
This confirms that we have successfully cloned the default version of Svelte Commerce and we are ready to make it our own.
Integrate Shopify
So, Svelte Commerce helps you handle the presentation layer of your eCommerce store. However, this depends on the data storage you will be providing. What are the benefits of Jailbreaking iPhones with Svelte Commerce by default ? Why do iPhones need to be jailbroken? Consume data from your Shopify store via the Shopify Storefront API.
When you clone the project, you'll see that it has some credentials from the default Shopify files. This credential is a sample credential added by the Vercel team to get the sample template working: shopify.js
├── src │ ├── store.js │ └── utils │ └── shopify.js
Let's edit it to add our own custom Shopify store credentials. The file will contain the following code: shopify.js
// src/utils/shopify.js
export async function shopifyFetch({ query, variables }) {
const endpoint =
import.meta.env.VITE_SHOPIFY_API_ENDPOINT ||
'https://next-js-store.myshopify.com/api/2021-10/graphql.json';
const key =
'ef7d41c7bf7e1c214074d0d3047bcd7b';
try {
const result = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': key
},
body: { query, variables } && JSON.stringify({ query, variables }),
duplex: 'half'
});
return {
status: result.status,
body: await result.json()
};
} catch (error) {
console.error('Error:', error);
return {
status: 500,
error: 'Error receiving data'
};
}
}
Note that the credentials are shown in plain text. We need to add this to the file and remove the default credentials. So our updated code will look like this: .env
// src/utils/shopify.js ... const endpoint = import.meta.env.VITE_SHOPIFY_API_ENDPOINT; const key = import.meta.env.VITE_SHOPIFY_API_ACCESS_TOKEN; ...
Now, create a file in the root of your project and add the following variables: .env
//.env VITE_SHOPIFY_API_ENDPOINT= VITE_SHOPIFY_API_ACCESS_TOKEN=
To obtain these credentials, we need a Shopify account and a storefront. Fun Notes If you don't have an account, create one, then create a store.
Your SHOPIFY_API_ENDPOINT will be in this mode when you have all your store setup. So replace storename with your store name. You can then update the variable immediately: https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json``.env
//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=
Next, let's get a Shopify access token from the dashboard.
Access Shopify from your dashboard
Your Shopify backend is where everything happens, from generating access tokens and creating products that will be displayed on your eCommerce store, to viewing your inventory and analytics, and more.
Let's get the basic setup done on the backend, which will allow us to generate storefront access tokens for Svelte Commerce. From the Shopify admin dashboard, click the Apps link on the sidebar. This will return a popup. Then, click Application and Sales Channel Settings in the popup:
You'll be taken to a screen where you'll see the "Develop an App for the Store" button, as shown below. click it:
You 'll then be taken to another screen that allows you to search for apps or create new ones. Select the Create App button as shown below:
After creating the application, you need to configure the storefront API scope, as shown in the following page:
From here, select all Storefront API access scopes, then select Save:
Finally, navigate to the "Credentials" section and click the "Install Application" button:
After the installation process is complete, your storefront API access token will be displayed as follows:
Copy the token, go to the file, and add the access token there: .env
//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=kjbabfjkhfkjhjbkvhjvfiofguhfy
Congratulations! Your Svelte Commerce powered eCommerce store is ready. You can adjust the design or any other features as needed. All the products you create in your Shopify store will be displayed in your custom store. The best part is that you don't need to pay a monthly Shopify fee because the API is free to use.
Now that we have our eCommerce store ready, let's deploy it for the world to see.
Deploy your eCommerce store to Vercel
One of the reasons developers love using Vercel is how easy it is for anyone to deploy a supported application to their server in minutes. You don't have to worry about any complicated settings. All you really need to do is push your code to GitHub and connect to Vercel once, and every time you push a new update to GitHub, it will automatically deploy.
So let's start by creating an account on the Vercel website and logging in.
Next, push your store code to GitHub, GitLab or BitBucket, as Vercel will trigger an automatic deployment through this medium every time an update is pushed to the repository. Be sure to double check that you've added the file to the file so you don't accidentally push secrets to GitHub: .env``.gitignore
For this step, please stay logged into your Vercel account while visiting this New Project – Vercel . You should then see a page requesting to connect to your Git provider. Go ahead and connect and import your project:
Finally, configure it to use environment variables and click the "Deploy" button as follows:
That's all. Just wait for the deployment to complete and you should be ready to show off your eCommerce store to the world. It's easy, right?
Let's also deploy to Netlify.
How to deploy your Svelte Commerce to Netlify
Netlify users enjoy similar benefits to Vercel users—deployment is simple, developer friendly, and it shines in front-end applications and lambda functions.
Like we did for Vercel, there isn't much difference to Netlify in terms of deployment. First, register and log in to your Netlify backend.
From there, click the Add New Site button and choose to import it from your GitHub profile. You will then be directed to connect to the GitHub repository:
When selecting a repository and importing it, click Advanced Options and add the environment variable:
Next, click the "Deploy Site" button:
look! Your eCommerce store is ready.
You can always improve your eCommerce store by taking advantage of all the features of Svelte and taking advantage of the free features provided by the Shopify API.
in conclusion
Building a full-fledged eCommerce store takes time and comes with some financial and mental burdens. If you're trying to build a custom eCommerce store for your business or client, and you want to do it quickly without compromising security or quality, then Svelte Commerce is probably your best bet.