Home

Awesome

<div align="center"> <h2>Svelte Commerce</h2> </div> <div align="center">

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have WIP for MedusaJS, Woocommerce, Bigcommerce and Shopify. The API approach also allows you to merge Svelte Commerce with any third-party tool like payment gateways, POS or AI.

</div> <div align="center" width="60%" height="auto"> <br/> <a href="https://litekart.in"> <img src="https://res.cloudinary.com/itswadesh/image/upload/v1678600224/litekart/free_for_developers_1.png"/></a> </div> <div align="center"> <br> <img width="400" src=".github/svelte-commerce.gif" > <img width="400" src=".github/svelte-commerce-demo.gif" hspace="5"> </div> <br> <p align="center"> <img height="400" src=".github/home-page-mobile.jpg" hspace="10"> <img height="400" src=".github/catalog-listing-mobile.jpg" hspace="10"> <img height="400" src=".github/product-details-mobile.jpg" hspace="10"> <p/> <br/> <p align="center"> <img src="https://img.shields.io/badge/Made_With-Svelte-red.svg?style=for-the-badge&color=dc8a78&logoColor=FF3E00&labelColor=302D41&logo=svelte"><br/><br/> <img src="https://img.shields.io/badge/Maintained%3F-Yes-blueviolet?style=for-the-badge&color=209fb5&labelColor=5c5f77"> <a href="https://github.com/itswadesh/svelte-commerce/stargazers" target="_blank"> <img alt="Stargazers" src="https://img.shields.io/github/stars/itswadesh/svelte-commerce?style=for-the-badge&logo=starship&color=C9CBFF&logoColor=D9E0EE&labelColor=302D41"></a> <a href="https://github.com/itswadesh/svelte-commerce/issues" target="_blank"> <img alt="Issues" src="https://img.shields.io/github/issues/itswadesh/svelte-commerce?style=for-the-badge&logo=gitbook&color=B5E8E0&logoColor=D9E0EE&labelColor=302D41"></a> <a href="https://t.me/itswadesh" target="_blank"> <img alt="Telegram" src="https://img.shields.io/badge/Telegram-itswadesh-blue.svg?style=for-the-badge"></a> </p> <br/> <p align="center"> <a href="https://github.com/itswadesh/svelte-commerce/discussions/new/choose" target="_blank"> <picture> <source srcset="assets/social/macchiato_github.svg" width="64" height="64" alt="Github Logo" media="(prefers-color-scheme: dark)"/> <source srcset="assets/social/latte_github.svg" width="64" height="64" alt="Github Logo" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/> <img src="assets/social/latte_github.svg" width="64" height="64" alt="Github Logo"/> </picture> </a> <img src="assets/misc/transparent.png" height="1" width="5"/> <a href="https://discord.gg/GgdAeccwDR" target="_blank"> <picture> <source srcset="assets/social/macchiato_discord.svg" width="64" height="64" alt="Discord Logo" media="(prefers-color-scheme: dark)"/> <source srcset="assets/social/latte_discord.svg" width="64" height="64" alt="Discord Logo" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/> <img src="assets/social/latte_discord.svg" width="64" height="64" alt="Discord Logo"/> </picture> </a> <img src="assets/misc/transparent.png" height="1" width="5"/> <a href="https://twitter.com/itswadesh" target="_blank"> <picture> <source srcset="assets/social/macchiato_twitter.svg" width="64" height="64" alt="Twitter Logo" media="(prefers-color-scheme: dark)"/> <source srcset="assets/social/latte_twitter.svg" width="64" height="64" alt="Twitter Logo" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/> <img src="assets/social/latte_twitter.svg" width="64" height="64" alt="Twitter Logo"/> </picture> </a> <img src="assets/misc/transparent.png" height="1" width="5"/> <a href="https://reddit.com/u/itswadesh" target="_blank"> <picture> <source srcset="assets/social/macchiato_reddit.svg" width="64" height="64" alt="Reddit Logo" media="(prefers-color-scheme: dark)"/> <source srcset="assets/social/latte_reddit.svg" width="64" height="64" alt="Reddit Logo" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"/> <img src="assets/social/latte_reddit.svg" width="64" height="64" alt="Reddit Logo"/> </picture> </a> </p> <p align="center"> Reach out to me with queries! </p> <br/> <br/> <div align="">

Big Brands using svelte-commerce

</div> <br/> <p align="center"> <a href="https://tesoro.pk/" target="_blank"> <img src="https://res.cloudinary.com/itswadesh/image/upload/v1682424690/tesoro.png?tr=w-auto,h-80,ar-3-4,cm-pad_resize&sharpen=true" height="64" alt="Tesoro"> </a> <img src="assets/misc/transparent.png" height="1" width="15"/> <a href="https://varnijewels.com/" target="_blank"> <img src="https://ik.imagekit.io/3n6cglxq6/img/varni-logo_1619291754__34835-qt10qx2uq90x.webp?tr=w-auto,h-80,ar-3-4,cm-pad_resize&sharpen=true" height="64" alt="Varni Jewels"> </a> <img src="assets/misc/transparent.png" height="1" width="15"/> <a href="https://lrnr.in/" target="_blank"> <img src="https://res.cloudinary.com/itswadesh/image/upload/v1682423814/logo-lrnr.png?tr=w-auto,h-80,ar-3-4,cm-pad_resize&sharpen=true" height="64" alt="LRNR"> </a> <img src="assets/misc/transparent.png" height="1" width="15"/> <a href="https://tablez.com/" target="_blank"> <img src="https://tablez.com/icon.png" height="64" alt="Tablez"> </a> <img src="assets/misc/transparent.png" height="1" width="15"/> <a href="https://b.zapvi.in/" target="_blank"> <img src="https://cdn.zapvi.in/img/Zapvi-Black-Logo-iKPQP43npcI2.svg?width=3&height=4&blur=25&aspect_ratio=3:4" height="64" alt="Misiki"> </a> <img src="assets/misc/transparent.png" height="1" width="15"/> <div> <!-- <img src="https://res.cloudinary.com/itswadesh/image/upload/v1682424327/clicky_logo-97724356932.png?width=3&height=4&blur=25&aspect_ratio=3:4" height="64" alt="Clicky"> --> </div> </p> <br/> <br/>

What is it?

Features

Get Started

git clone https://github.com/itswadesh/svelte-commerce.git
cd svelte-commerce
npm i
npm run dev

Thats all !

Open http://localhost:3000 on chrome. Your app should be live with awesome sveltekit up and running

Configuration

There are 3 places to configure

  1. src/lib/config/ All non secret and application wide configs are stored here, if required, change according to your requirement.

  2. .env All secrets stored here

  3. src/lib/services/index.ts This is used to define which service to use. Only 1 of the listed service can be active at a time. Valid values are Litekart Medusa Bigcommerce Shopify Woocommerce

Deployment

Click on the button to directly deploy to Netlify or Vercel. Zero configuration required.

<a href="https://app.netlify.com/start/deploy?repository=https://github.com/itswadesh/svelte-commerce" aria-label="Click to deploy into netlify"> <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to netlify"> </a>

Deploy with Vercel

The following envirnoment variable is mandatory

PUBLIC_LITEKART_DOMAIN=demo.litekart.in

You can replace the env variable with your store domain

Docker

We also support docker images, use the following command to pull the latest docker image and deploy it:

docker run -d -p 3000:3000 ghcr.io/itswadesh/svelte-commerce:latest

Features

<!-- If you like the ideas behind Svelte Commerce and want to become a contributor - [join github discussions](https://github.com/itswadesh/svelte-commerce/discussions/new/choose), check the list of the [active issues](https://github.com/itswadesh/svelte-commerce/issues) or contact me directly via hi@litekart.in -->

Svelte ecommerce - Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, Open Source

Updates

Latest update: 07-February-2023

<details> <summary>Click here to see all the updates</summary> </details>

IDEAS

Wherever we need store info at server page, we get it from its own api call, if store info requires in client page we take it from the layout.ts page where cached store into is available