-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from joshwcorbett/dev
- Loading branch information
Showing
14 changed files
with
724 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,81 @@ | ||
| # Svelte Storefront | ||
| # 🛍️ Svelte Storefront | ||
|
|
||
| This is my attempt to svelte-ify Shopify's Hydrogen storefront features. It's a work in progress, but I'm hoping to get it to a point where it's a good boilerplate/template for building a custom Shopify storefront with little hassle and built their favorite js framework (sveltekit). | ||
| 🚧 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. | ||
|
|
||
| ## To Do | ||
| **💧 What is Hydrogen?**<br /> | ||
| 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. | ||
|
|
||
| - [ ] Product Search | ||
| - [ ] Collection Filtering | ||
| ## ⚡ Key Features | ||
|
|
||
| ## Getting Started | ||
| All the features you'd expect from a modern headless eCommerce storefront, and more: | ||
|
|
||
| 1. Clone the repo | ||
| 2. Install Dependencies | ||
| - 🌐 **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 | ||
|
|
||
| ## 📝 To Do | ||
|
|
||
| - [ ] 🖼️ Optimized and performant images | ||
| - [ ] ↕️ 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 | ||
|
|
||
| ```bash | ||
| 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 add the following variables | ||
| 3. 🔑 Create a .env file in the root of the project and fill in the required variables | ||
|
|
||
| I've included a `.env.example` file to use as a template, the two variables that really only need to be changed are | ||
| An example .env.example file is provided to guide you, the two essentials that need replacing are: | ||
|
|
||
| ```bash | ||
| PUBLIC_STOREFRONT_API_TOKEN="your-public-token-here" | ||
| PUBLIC_STORE_DOMAIN="your-store.myshopify.com" | ||
| # Optional | ||
| PUBLIC_STOREFRONT_API_VERSION="2023-04" | ||
| ``` | ||
|
|
||
| 4. Run the project locally | ||
| > To get the `PUBLIC_STOREFRONT_API_TOKEN` and `PUBLIC_STORE_DOMAIN`, refer to the Shopify API Documentation [here](https://shopify.dev/docs/api/storefront#authentication). | ||
| 4. 🚦 Run the project locally | ||
|
|
||
| ```bash | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| 5. Profit! | ||
| 5. 🎉 Start building your storefront! | ||
|
|
||
| Of course there's more to it than that, but this should get you started. I'll be adding more documentation as I go along (assuming I don't get burnt out). | ||
| There's more under the hood, and detailed documentation is coming soon. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.