/astro-shopify-preact-scss

Astro starter theme to build a headless ecommerce website with Shopify and Preact

Primary LanguageAstroMIT LicenseMIT

⚠ WIP: Astro starter theme to build a headless ecommerce website with Shopify

This theme was based on @thomasKn's astro-shopify theme.

Changes made to that theme (in progress):

  • Replace Svelte with Preact
  • Replace TailwindCSS with SCSS modules

I'm not making these changes because Preact and SCSS are "better" than Svelte and Tailwind; I just prefer them more, and am planning to use them in an upcoming Astro project, so I want the practice.

astro_shopify_preview

🧑‍🚀 Where to start

  1. Create a .env file based on .env.example with your Shopify store url and your public and private access tokens
  2. The credentials are used inside the /utils/config.ts file, you can update the API version there
  3. Run npm install or yarn or pnpm install
  4. 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

Inside the project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── components/
│       └── Header.astro
│   └── layouts/
│       └── BaseLayout.astro
│   └── pages/
│       └── index.astro
│   └── stores/
│       └── cart.ts
│   └── styles/
│       └── global.css
│   └── utils/
│       └── shopify.ts
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro --help Get help using the Astro CLI

⚡️ Lighthouse

lighthouse_astro_shopify