stackblitz · tizmagik · Jul 16, 2025 · Jul 16, 2025 · Jul 25, 2025 · d3lm
diff --git a/shopify-vite-react-ts/.bolt/prompt b/shopify-vite-react-ts/.bolt/prompt
@@ -0,0 +1,32 @@
+# Shopify-Powered Vite React TS Storefront Template
+
+The code in this starter template is an example Shopify-powered storefront built with Vite, React, and TypeScript. The meat of the functionality is in the useShopify hook, which is a wrapper around the Shopify Tokenless API and can be used to build out additional features.
+
+## Tokenless API
+
+Shopify integration is all via the Tokenless API which only supports:
+
+- Products and Collections
+- Selling Plans
+- Search
+- Pages, Blogs, and Articles
+- Cart (read/write)
+- Product and Variant Availability (no quantities)
+
+IMPORTANT NOTE: You may need to guide me in specifying my Shopify store URL. If the .env file still contains the placeholder "VITE_SHOPIFY_STORE_URL=fakestore-ai.myshopify.com" (note no https:// prefix), you should guide me in specifying my actual Shopify store URL. Remind me that I can find this in my Shopify Admin panel under Settings > Domains. If I don't already have a Shopify store, remind me to create one at shopify.com/free-trial.
+
+### Shopping Cart
+
+The cart is read/write and is available for use with the useCart hook.
+
+### Shopify Permalinks
+
+Permalinks can be used to create direct-to-checkout links for any number of products and quantities. This is especially useful when building novel UIs that don't have a traditional cart.
+
+## Design
+
+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+
+Use icons from lucide-react for logos.
diff --git a/shopify-vite-react-ts/.gitignore b/shopify-vite-react-ts/.gitignore
@@ -0,0 +1,23 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
diff --git a/shopify-vite-react-ts/eslint.config.js b/shopify-vite-react-ts/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
diff --git a/shopify-vite-react-ts/index.html b/shopify-vite-react-ts/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MockStore Powered by Shopify</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>