Why use Svelte for eCommerce Sites?

Svelte is a good choice for eCommerce sites because it builds fast sites, and speed in important for SEO and getting your products ranking on search engines. Svelte logic is also less complex than some libraries, help move further faster. The speed comes from Svelte transpiling to vanilla JavaScript. There is no library which the browser has to download and interpret the site and no shadow DOM either. SvelteKit uses browser standards, again helping you get the race quicker!

Are Snipcart and SvelteKit a good match?

We have seen that even though under the hood, Snipcart uses a redux store for shopping cart start, we can set up an app Svelte store, which works well. We subscribe the Svelte store to Snipcart state updates. This offers an efficient path to keeping our Svelte components in sync with the actual Snipcart state. On top, it means we only update those components when they need updating.

Can you build a static eCommerce site with SvelteKit?

SvelteKit can build static or server side rendered SSR sites. A third option mixes the two. We saw how to follow the JAMStack path, build a completely static site. Here we used Netlify Edge functions to offer an image proxy as well as search results. We also saw the SSR alternative, handling the image proxying and search in-app, using SvelteKit form actions. The static typically offers speed and security benefits. It is not suited to every site, though. If you are building out a store with a massive range or need to update product details frequently, the build time of a static site might make the approach unworkable. For small and moderate sized sites, though, the static model is worth exploring. The best part is, SvelteKit offers you the flexibility to try both.

Svelte eCommerce Site: SvelteKit Snipcart Storefront

Name: Svelte eCommerce Site: What we’re Building
Uploaded: 2022-10-03T21:46:44.000Z
Duration: 4 min 37 s
Description: Svelte eCommerce Site: SvelteKit Snipcart Storefront

🛒 Why Snipcart for your eCommerce Site? #

We build a Svelte eCommerce site in this tutorial. Our store will use a Snipcart checkout. You have probably heard of other popular eCommerce solutions like Shopify, though, and might be wondering why we go for Snipcart and not those. We will start by answering that question, then look at some choices, like using a Directus SQL database to store product details and SvelteKit for the frontend.

What is Snipcart? #

Snipcart handles the checkout. We will see telling it what products the customer wants, their prices and even passing descriptions, images, and other meta are quite straightforward. This makes Snipcart a more lightweight solution than something like Shopify which you can use to build your entire site or as a headless service.

Our Snipcart solution is closer to the headless Shopify option than the full site — we build are own customized site using Svelte. We can link the Snipcart checkout to Stripe and other popular payment service providers. Because Snipcart is just a checkout, we are responsible for arranging shipping and keeping track of stock, though. That makes it a potentially fantastic solution if you want quickly to build out a merch store for a site or something similar for a small business. However, it might not be the best solution if you are creating the next Amazon!

🛍 Why is Svelte Good for eCommerce? #

For eCommerce, there are two common approaches to getting traffic to your site online. Pay-per-click (and similar) advertising and Search Engine Optimization. You pay to advertise, but the SEO approach is almost free. You pay a small cost for setting up things in an SEO friendly way. However, generally optimizing for SEO correlates has a side effect of optimizing for user experience and if users are happy that’s a bonus!

Svelte builds fast sites. That is because SvelteKit transpiles it to plain JavaScript. This lets the end user skip the step of downloading a library to their device to be able to run the code those libraries generate. Browsers already understand JavaScript, and skipping that library download step can make your site faster and improve user experience and SEO. All sites are allocated a crawl budget by Google. The faster your site is, the more pages Google can crawl and index within your allocated crawl budget. That is why speed in important for SEO.

💿 Is Directus a Good Choice for Content Management? #

Directus offer SQL databases hosted in the cloud. Although it is essentially a database service, the user interface layer makes it easy for non-technical users to interact with it. On top, the user interface does not get in the way — so you might, even as a developer, prefer it to using the API for some operations. You can create database users with fine-grain control. This makes Directus good for sharing your work with a client or restricting access, for example if you are managing some aspects for a client but who wants to be able to add and update data themselves.

Some great Directus features:

open source with free community access to let you spin up a trial project,
you can choose between REST and GraphQL APIs to access your data and API exposes sharp image library to manipulate images in your database,
nice user experience touches like uploading data as JSON files — this can save you a lot of pointing and clicking then typing compared to other content management solutions.

🧱 Svelte eCommerce Site: What We’re Building #

Svelte eCommerce Site: What we’re building.

We will build out a small online Lego store using SvelteKit for the frontend, Snipcart to manage the checkout and Directus for storing our Lego product details and images. The store will have the basic pages you expect from an eCommerce store, linking them hierarchically in an SEO friendly way recommended by Google. That’s not the end of the SEO side of things though! We see how you can let Google and other search engines know about product prices, reviews and where the images are. With the right information, Google will be able to create featured snippets in search results. These let your eCommerce store stand out from others returned in results. We will also use edge functions paired with Directus search capability to add a quick search facility without the need to add an external service or host your own Open Source search instance.

Pop open the Svelte eCommerce site demo to take a look yourself.

👍🏽 Svelte eCommerce Site: What we will Cover #

What we cover:

New SvelteKit 1.0 routing API,

integrating Snipcart checkout state with Svelte stores,

Svelte flip animations for dynamic product pages,

uploading product data to Directus using your existing JSON files,

using Netlify Edge functions to add Middleware,

querying Directus SQL database the TypeScript friendly way,

generating responsive, NextGen images for products using the Directus API,

adding eCommerce Schema.org markup to improve site SEO,

product search feature using Directus API and edge functions,

generating Base64 encoded low res placeholder images in SvelteKit and Deno edge functions,

deploying to Netlify and testing SEO.

⛔️ What we won’t Cover #

SvelteKit basics: check out the Starting out Svelte and SvelteKit tutorial if this tutorial starts too quickly for you,
order fulfilment, though you can integrate a service like Printful to help with fulfilment, packing and shipping,
finding clients to build eCommerce sites for — that’s down to you!

🌱 Svelte eCommerce Site: Let’s get Going! #

If all that sounds like what you came here for, then why don’t we get going? We will start by cloning the starter code from GitHub for our Svelte eCommerce site.