astro-shopify - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #deep-learning #macos #java #cli #kubernetes #awesome-list #pytorch #security #ios #open-source

astro-shopify

(★ 499)

A lightweight and powerful ecommerce starter theme to build headless Shopify storefronts with Astro.

파일 탐색기

최종 버전 다운로드 (.zip)

- dependabot.yml
- extensions.json
- launch.json
- settings.json
- favicon.svg
- - AddToCartForm.svelte
  - AnnouncementBar.astro
  - CartDrawer.svelte
  - CartIcon.svelte
  - Footer.astro
  - Header.astro
  - Logo.astro
  - Money.svelte
  - ProductAccordions.astro
  - ProductBreadcrumb.astro
  - ProductCard.astro
  - ProductImageGallery.astro
  - ProductInformations.astro
  - ProductRecommendations.astro
  - ProductReviews.astro
  - Products.astro
  - ShopifyImage.svelte
- - BaseLayout.astro
  - NotFoundLayout.astro
- - 404.astro
  - index.astro
- - cart.ts
- - global.css
- - cache.ts
  - click-outside.ts
  - config.ts
  - graphql.ts
  - schemas.ts
  - shopify.ts
- env.d.ts
.env.example
.gitignore
.graphqlrc.yml
.prettierrc.cjs
astro.config.mjs
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/thomasKn/astro-shopify

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd astro-shopify

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

![astro_shopify_preview](https://user-images.githubusercontent.com/10447155/214480671-8380f410-cbfb-4f53-a6bb-5c744073e2f2.jpg)

## 🧑‍🚀 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](https://apps.shopify.com/headless) 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](https://user-images.githubusercontent.com/10447155/214448698-ce2a1ef6-6fbd-4fca-b8b6-c5194b72a15b.jpg)