📸 풀페이지 미리보기 (PC · 모바일)

1. index.html — 메인 (Hero + 카테고리 + 베스트 + 리뷰)

2. shop.html — 상품 목록 (사이드바 필터 + 페이지네이션)

3. product.html — 상품 상세 (갤러리 + 옵션 + 탭)

4. cart.html — 장바구니 + 프로모 코드

5. checkout.html — 4단계 결제 (배송 · 결제 · 요약)

6. account.html — 마이페이지 (주문 + 위시리스트)

7. about.html — 브랜드 스토리 · 가치 · 창립자

8. contact.html — 멀티채널 문의

ShopBolt — D2C 브랜드를 위한 풀스택 이커머스 HTML 템플릿

의류·홈웨어·라이프스타일 D2C 브랜드를 위한 8페이지 풀스택 이커머스 템플릿입니다. 크림(#f7f3ee) 베이스 + 클레이/테라코타 액센트(#c44536) + 세이지 그린의 차분한 D2C 팔레트로 제품 자체가 주인공이 되도록 설계.

구성된 페이지 (8종)

• index.html — Hero + 카테고리 · 베스트 셀러 · 기능 · 후기 · 뉴스레터
• shop.html — 상품 그리드 + 사이드바 필터 (카테고리·가격·컬러) + 페이지네이션
• product.html — 갤러리 + 컬러/사이즈 옵션 + 수량 + 4 탭 (설명·소재·사이즈·리뷰)
• cart.html — 장바구니 표 + 수량 컨트롤 + 프로모 코드 + 요약 카드
• checkout.html — 4단계 결제 (Contact → 배송 → 배송방법 → 결제)
• account.html — 마이페이지 (통계 카드 · 최근 주문 · 위시리스트)
• about.html — 브랜드 스토리 + 통계 + 가치 + 창립자
• contact.html — 멀티채널(라이브챗·이메일·DM) + 폼 + 스튜디오 정보

핵심 특징

• 프로모 바 + 스티키 네비 — 상단 프로모 메시지 + 스티키 네비게이션
• 카테고리 카드 그리드 — 색감 강한 그라데이션 카테고리 4개
• 리치 상품 카드 — 뱃지(Best/New/Limited) · 위시 버튼 · 별점 · 할인 표시
• 완전한 결제 플로우 — Cart → Checkout → 완료까지 모든 페이지
• 옵션 시스템 — 컬러 스와치, 사이즈 칩 (JS 토글)
• 마이페이지 대시보드 — 통계 카드 + 주문 리스트 + 위시리스트 + 사이드바 네비
• 다크 푸터 + 결제 아이콘 — VISA/MASTER/AMEX/PAYPAL/APPLE PAY 표시
• 완전 반응형 — 데스크탑 사이드바 필터, 모바일 풀폭 그리드

사용 기술

• Bootstrap 5.3 (CDN) + 스티키 탑 네비
• Bootstrap Icons 1.11
• Fraunces (display serif) + Inter (body)
• Pure CSS Variables
• Vanilla JS — 수량 컨트롤 · 옵션 칩 · 컬러 스와치 · 폼 검증

이런 분께 추천

• 의류 · 홈웨어 · 액세서리 D2C 브랜드
• 핸드메이드 · 공방 · 인디 메이커
• 라이프스타일 · 뷰티 · 푸드 브랜드
• Shopify · WooCommerce 백엔드 + 정적 프론트엔드 분리하려는 분
• 마켓플레이스(쿠팡·네이버) 이탈해 자체몰 시작하려는 셀러

커스터마이즈 가이드

:root {
  --sb-bg-soft: #f7f3ee;  /* 배경 */
  --sb-accent: #c44536;   /* 클레이 액센트 */
  --sb-success: #4a7c59;  /* 세이지 */
}

라이선스

단일 도메인 라이선스 — 1개 도메인/프로덕트에 무제한 사용. 재판매 · 재배포 · 템플릿 마켓플레이스 등록은 불가합니다.

지원

구매 후 12개월 업데이트 · 기술 지원 무료 제공.