thomasKn/astro-shopify
Astro와 Shopify Storefront API로 구축한 헤드리스 이커머스 스타터 테마
493+1이번 주0 찜
146포크5이슈
중간맛 분석
스택: Astro(정적 사이트 생성/SSR), Svelte(컴포넌트), Shopify Storefront , Tailwind CSS. 난이도 중간 (Shopify 인증, 환경변수 설정 필요). Astro 프로젝트 구조가 명확하게 제공되며, /pages, /components, /stores (카트 상태 관리) 등이 이미 구성되어 있습니다. 데모는 라이트하우스 성능 스크린샷으로 증명됨 (높은 점수). 즉시 npm install → .env 설정 → npm run dev로 로컬 개발 가능.
이런 레포예요
이럴 때 쓰면 좋아요
- Shopify 상품 카탈로그를 높은 성능의 정적/동적 웹사이트로 빠르게 전환
- 팀의 디자인 시스템이나 프레임워크 선호도에 맞춰 커스터마이징 가능한 쇼핑몰 프로토타입 구축
- 마이크로프론트엔드 아키텍처로 여러 팀이 독립적으로 컴포넌트를 개발하는 대규모 이커머스 프로젝트
핵심 기능
Shopify Storefront API 통합으로 헤드리스 아키텍처 지원Astro의 프레임워크 유연성으로 Svelte/React/Vue/Solid 자유로운 선택Nanostores 기반 경량 카트 상태 관리 및 Tailwind UI 무료 컴포넌트
대안 대비 차별점
Astro의 프레임워크 비종속성으로 팀 선호도에 따라 다양한 UI 라이브러리를 혼합 사용 가능한 반면, 기존 Hydrogen 같은 솔루션은 특정 프레임워크에 강하게 종속됨.
준비물
- Shopify 스토어 계정 (또는 개발 스토어 생성 가능)
- Shopify Headless 채널 접근 및 Storefront API 토큰
- Node.js와 npm/yarn/pnpm
- 선택 프레임워크 기초 지식 (Svelte, React, Vue 등)
바로 시작하기
- 환경변수 파일 생성 -
.env.example파일을 참조하여.env파일을 만들고 Shopify 스토어 URL, 공개/비공개 접근 토큰 입력
cp .env.example .env
- Shopify에서 Headless 채널 설정 - https://accounts.shopify.com/store-login 에서 계정 생성 또는 로그인
- Storefront 추가 및 토큰 복사 - Shopify Headless 채널에서 "Add Storefront" 클릭 후 공개/비공개 토큰을
.env에 붙여넣기 - 접근 범위(Scope) 확인 -
unauthenticated_read_product_listings와unauthenticated_read_product_inventory는 필수, 필요시 추가 범위 설정 - 의존성 설치 - 선택한 패키지 매니저 실행
npm install
- 개발 서버 시작
npm run dev
별 추이 · 7일
493+1 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2023년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/thomasKn/astro-shopify)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기