Astro starter theme to build a headless ecommerce website with Shopify
The theme is built with Svelte but you can use any framework you like (React, Vue, Solid etc.) thanks to Astro.
Tailwind UI free components are used for the design.

🧑🚀 Where to start
- Create a
.env file based on .env.example with your Shopify store url and your public and private access tokens
- The credentials are used inside the
/utils/config.ts file, you can update the API version there
- Run
npm install or yarn or pnpm install
- Run
npm run dev or yarn run dev or pnpm run dev
Shopify Configuration Guide
- Create a new account or use an existing one. https://accounts.shopify.com/store-login
- Add the Shopify Headless channel to your store
- Click on
Add Storefront
- Copy/Paste your
public and private access tokens to your .env file
- Next, check Storefront API access scopes
unauthenticated_read_product_listings and unauthenticated_read_product_inventory access should be fine to get you started.
- Add more scopes if you require additional permissions.
Shopify Troubleshooting
- If you encounter an error like
error code 401 you likely didn't set this up correctly. Revisit your scopes and be sure add at least one test product. Also make sure you are using the Storefront API and not the Admin API as the endpoints and scopes are different.
- If you do not see a checkout sidebar, or if it is empty after adding a product, you need to add an image to your test product.
🚀 Project Structure