svelte-storefront Svelte Themes

Svelte Storefront

An evolving SvelteKit-based template for custom Shopify storefronts, mirroring the features of Shopify's Hydrogen

๐Ÿ›๏ธ Svelte Storefront

๐Ÿšง This project aims to bring the magic of Shopify's Hydrogen storefront features to the Svelte world. This project is still on the assembly line, but I'm aiming to shape it into a go-to boilerplate/template that can ease the process of building a personalized Shopify storefront using everyone's beloved JavaScript framework - Sveltekit.

๐Ÿ’ง What is Hydrogen?
Hydrogen is Shopifyโ€™s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopifyโ€™s full stack web framework, but it also provides a React library portable to other supporting frameworks.

โšก Key Features

All the features you'd expect from a modern headless eCommerce storefront, and more:

  • ๐ŸŒ SSR: Server-Side Rendering for superior SEO and initial load performance.
  • ๐ŸŽจ Style-Free: No predefined styles to hold you back. Freedom to create your unique storefront design.
  • ๐Ÿ’จ Tailwind: Lean and fast CSS framework tailored for modern frontend development.
  • ๐Ÿš€ Fast: Engineered for high-speed performance and optimal user experience.
  • โš™๏ธ Optimized: Crafted with best practices for efficient resource utilization.
  • ๐Ÿงน Clean Code: Well-structured, readable, and maintainable codebase.

๐ŸŽˆShopify Features

Almost every aspect and feature of a Shopify theme is covered in this project. Here's a list of the features that are currently implemented:

  • ๐ŸŒ URL-based Localization & Currency Conversion
  • ๐Ÿฌ Collection Pages
  • ๐Ÿ“ฆ Product Pages
  • ๐Ÿ” Product Search
  • ๐Ÿ”’ Authentication & Account Pages
  • ๐Ÿ“ง Customer account activation via email
  • ๐Ÿ›’ Fully functional cart
  • ๐Ÿ“– Blog Pages
  • ๐ŸŽŸ๏ธ Discount URL handling
  • ๐Ÿ“ƒ Policy Pages
  • ๐Ÿ“‘ Standard Shopify Pages
  • ๐Ÿ”€ URL Redirects

๐Ÿ“ To Do

  • ๐Ÿ“ˆ Sync Analytics with Shopify Admin
  • โ†•๏ธ Filtering & Sorting collections
  • ๐Ÿ”— Convert shopify links to local links where applicable

๐Ÿ’ก Prerequisites

Before getting started, make sure you have the following:

  • Node.js installed (preferably the latest version)
  • A Shopify account and a store to work with
  • Basic understanding of Svelte and JavaScript/TypeScript

๐Ÿš€ Getting Started

  1. ๐Ÿ“‚ Clone the repo

  2. ๐Ÿ’ป Install Dependencies

     pnpm install
    

    You can use your package manager of choice, but I strongly recommend pnpm

  3. ๐Ÿ”‘ Create a .env file in the root of the project and fill in the required variables

    An example .env.example file is provided to guide you, the two essentials that need replacing are:

    PUBLIC_STOREFRONT_API_TOKEN="your-public-token-here"
    PUBLIC_STORE_DOMAIN="your-store.myshopify.com"
    # Optional
    PUBLIC_STOREFRONT_API_VERSION="2023-07"
    

    To get the PUBLIC_STOREFRONT_API_TOKEN and PUBLIC_STORE_DOMAIN, refer to the Shopify API Documentation here.

  4. ๐Ÿšฆ Run the project locally

    pnpm dev
    
  5. ๐ŸŽ‰ Start building your storefront!

    There's more under the hood, and detailed documentation is coming soon.

Top categories

Loading Svelte Themes