Shopify로 이커머스 스토어 만들기
새로운 Shopify 스토어를 만들거나 기존 스토어를 Lovable에 연결한 다음 스토어프론트를 빌드하고 출시하는 방법을 알아보세요.
Lovable은 Shopify와 직접 통합되어 새로운 Shopify 스토어를 만들거나 기존 스토어를 연결한 다음 자연어를 사용하여 완전한 이커머스 스토어프론트를 빌드, 커스터마이즈 및 출시할 수 있습니다. Shopify는 라이브 시 결제, 재고 및 물류를 처리합니다.
사용 사례
Lovable + Shopify를 사용하면 다음을 위한 실제 온라인 스토어를 빌드하고 출시할 수 있습니다:
- 물리적 제품: 의류, 가젯, 액세서리 또는 가정용품 판매
- 디지털 제품: 전자책, 강좌, 음악 또는 소프트웨어 다운로드 제공
- 니치 브랜드: 한정판 굿즈, 지역 제품, 드롭쉬핑 또는 사이드 프로젝트를 위한 스토어 빠르게 시작
- 소규모 비즈니스: 베이커리, 커피숍 또는 공예품 비즈니스를 전시하고 온라인 주문 받기
- 새로운 제품 아이디어 테스트: 몇 가지 제품을 추가하고 대규모 생산 전에 성과 평가
- 비즈니스 확장: 프롬프트만으로 새로운 컬렉션, 시즌 캠페인 또는 번들 소개
시작하기 전에
이커머스 스토어를 빌드하기 전에 알아야 할 몇 가지 중요한 사항이 있습니다:
- 신규 또는 기존 Shopify 스토어
Lovable은 새로운 Shopify 스토어 생성과 기존 Shopify 스토어 연결을 모두 지원합니다. - Sandbox 스토어 - Shopify 비용 없음 (신규 스토어만)
Lovable에서 새 Shopify 스토어를 만들면 Lovable이 자동으로 sandbox (개발) 스토어를 생성하여 Shopify 비용 없이 안전하게 빌드하고 실험할 수 있습니다. 이 환경은 설정과 테스트에 완벽하지만 실제 결제를 처리하지 않습니다. - 스토어 클레임 (신규 스토어만)
새로 만든 스토어를 출시할 준비가 되면 스토어를 클레임해야 합니다. 이렇게 하면 Shopify 계정으로 마이그레이션되고 30일 무료 Shopify 평가판이 시작되며, 클레임하는 Lovable 사용자가 Shopify 스토어 소유자가 됩니다. Shopify에서 결제를 활성화하고 스토어 설정을 완료해야 고객으로부터 실제 결제를 받을 수 있습니다. - 필수 Shopify 구독
무료 평가판 기간 후에는 온라인에서 제품 판매를 계속하려면 유료 Shopify 플랜이 필요합니다. 이 구독은 Shopify를 통해 직접 관리되며 Lovable 가격과 별개입니다. - Shopify 리뷰 정책 준수
스토어를 게시하기 전에 모든 리뷰가 진정성 있고, 편견 없으며, Shopify의 리뷰 정책을 준수하는지 확인하세요.
Shopify 통합 활성화
기본적으로 Shopify 통합은 워크스페이스에서 활성화됩니다. 설정 → 커넥터 → 공유 커넥터 → Shopify → 권한 관리에서 프로젝트에 대한 Shopify 통합 동작 및 관련 Shopify 설정을 관리할 수 있습니다.
권한 기본 설정
기본 권한 설정은 매번 묻기이며, 각 프로젝트에 대해 Shopify 통합을 활성화할지 비활성화할지 결정합니다. 설정 → 커넥터 → 공유 커넥터 → Shopify → 권한 관리에서 언제든지 기본 설정을 변경할 수 있습니다.
Shopify 통합이 필요할 때 Lovable이 프롬프트합니다. 세 가지 옵션이 있습니다:
- 허용: 현재 프로젝트에 대해 통합을 활성화합니다.
- 거부: 이 요청에 대해 통합을 거부합니다 (나중에 다시 요청받을 수 있음).
- 기본 설정 조정: 향후 프로젝트의 기본 동작을 변경합니다 (현재 프로젝트에는 영향 없음).
Shopify 통합 플로우
아래 단계에 따라 Shopify로 이커머스 스토어를 빌드하세요.
단계 1: 프로젝트 시작
다음으로 시작할 수 있습니다:
- 처음부터 새 프로젝트 만들기
- 기존 프로젝트 리믹스
Lovable에 어떤 유형의 스토어를 만들고 싶은지 알려주고 Shopify를 지정하세요.
예:
핸드메이드 향초를 판매하기 위한 Shopify 이커머스 스토어를 만들어주세요.다음을 리믹스할 수 있습니다:
-
Shopify 템플릿 프로젝트, Lovable + Shopify 템플릿 참조
리믹스할 때 Lovable에 Shopify를 통합하고 모의 데이터를 제거하도록 프롬프트하세요. 좋고 포괄적인 프롬프트를 사용하는 것이 중요합니다.이 스토어의 제품을 내 제품으로 교체하고 내 Shopify 스토어를 만들고 싶습니다. 다음을 진행해주세요: 1. Shopify에 연결합니다. 2. 스토어에서 모든 모의 제품 데이터를 제거하고 제품 이미지가 포함된 X개의 새 제품을 만듭니다. 3. 새 제품 정보를 사용하도록 제품 카드와 제품 상세 페이지를 업데이트합니다. 4. 새 제품과 일치하도록 제품 상세 페이지 URL을 업데이트합니다. 5. 이 변경에 맞게 위시리스트에 추가 컴포넌트와 로직을 업데이트합니다. 6. Shopify 스토어 통합을 반영하도록 모든 페이지의 장바구니, 지금 구매 CTA 및 관련 체크아웃 작업을 업데이트합니다. -
이전에 Shopify 스토어에 연결된 프로젝트
연결된 Shopify 스토어가 있는 프로젝트를 리믹스하려면 먼저 Shopify 스토어 연결 해제해야 합니다. 활성 Shopify 연결이 있는 프로젝트는 스토어가 연결 해제될 때까지 리믹스할 수 없습니다.
단계 2: 새 Shopify 스토어 만들기 또는 기존 스토어 연결
위의 두 시나리오 모두에서 Agent가 Shopify 연결 활성화를 프롬프트합니다. Allow를 클릭하고 Shopify 설정을 선택합니다.
새 Shopify 스토어를 만들거나 이미 소유한 기존 Shopify 스토어를 연결하여 계속할 수 있습니다.
새 스토어를 만들려면 아래 단계를 따르세요:
국가 선택
스토어가 기반을 둘 국가를 선택합니다. 이는 Shopify 스토어의 통화를 설정하는 데 사용됩니다.
스토어 만들기
Create store를 클릭합니다. sandbox 스토어가 이제 설정할 준비가 되었습니다. 다음 단계에서 설명하는 대로 스토어를 계속 빌드할 수 있습니다.
스토어가 클레임되기 전에는 프로젝트의 모든 협업자가 전체 읽기/쓰기 접근 권한으로 Shopify 통합을 사용할 수 있습니다.
기존 스토어를 성공적으로 연결하려면 Lovable 계정 이메일이 Shopify 스토어 소유자의 이메일과 일치해야 합니다.
기존 Shopify 스토어를 연결하려면 아래 단계를 따르세요:
Shopify 관리자 링크 입력
Shopify 관리자에 로그인하고 브라우저에서 URL을 복사합니다. 예: https://admin.shopify.com/store/{your store}. Lovable에 URL을 입력합니다.
스토어 연결
Connect store를 클릭합니다. Shopify로 이동합니다.
Shopify에 Lovable 앱 설치
Install을 클릭하여 Shopify 스토어에 Lovable 앱을 설치합니다.
앱이 인증되면 Shopify 스토어가 연결되고 Lovable로 다시 리디렉션됩니다. 다음 단계에서 설명하는 대로 스토어를 계속 빌드할 수 있습니다.
- 채팅에서 직접 제품을 생성, 업데이트 및 삭제할 수 있습니다.
- Agent에게 기존 스토어에서 제품을 가져오고 표시하도록 프롬프트할 수 있습니다.
- 기존 스토어를 연결한 사용자만 쓰기 접근 권한이 있습니다(제품, 변형 및 할인 코드 생성, 업데이트, 삭제). 스토어를 연결한 사용자가 변경한 내용은 Shopify 스토어에 즉시 반영됩니다.
- 협업자는 Shopify 데이터에 대한 읽기 전용 접근 권한을 유지하지만(제품, 변형 및 할인 코드 검색 및 검색) 스토어프론트를 완전히 빌드할 수 있습니다.
단계 3: 제품 및 제품 이미지 추가
이름, 설명 및 가격으로 제품을 추가하는 것부터 시작하세요. 예:
Lavender Breeze Candle이라는 제품을 추가하세요. 설명: '라벤더 에센셜 오일이 주입된 진정 효과가 있는 핸드메이드 소이 캔들', 가격: $25.나중에 세부 정보를 편집할 수 있습니다. 제품이 표시되지 않으면 다음을 프롬프트하세요:
웹사이트에 제품을 표시하세요.그런 다음 아래 옵션 중 하나를 사용하여 비주얼로 목록을 향상시킵니다. 항상 대표적인 이미지를 사용하세요.
AI 이미지 생성
Lavender Breeze Candle 제품에 AI 생성 이미지를 추가하세요.자체 이미지 업로드 또는 첨부
첨부된 이미지를 Lavender Breeze Candle 제품에 추가하세요.URL에서 이미지 추가
URL에서 이미지를 Lavender Breeze Candle 제품에 추가하세요.단계 4: 스토어 관리
Lovable을 떠나지 않고 제품을 관리하고 스토어를 개선하세요. 예를 들어 Lovable에 다음을 말할 수 있습니다:
- 제품 이름, 설명 또는 가격 업데이트
- 제품 제거
- 모든 제품 표시
- 제품 필터링 기능 추가 및 다른 카테고리를 기반으로 컬렉션 생성
- 제품 리뷰 기능 추가 및 확인된 구매에 대해서만 리뷰 허용
- 백분율 기반 또는 고정 금액 기반(USD) 할인 코드 추가 및 유효 기간 포함
- 위시리스트 기능 및 위시리스트 공유 기능 추가
Lavender Breeze Candle의 가격을 $28로 업데이트하세요.
Vanilla Bean Candle의 설명을 나무 심지를 강조하도록 변경하세요.
Cinnamon Spice Candle 제품을 제거하세요.
모든 제품을 표시하세요.
제품 리뷰 시스템을 만들고 확인된 구매에 대해서만 리뷰를 허용하세요.
Lavender Breeze Candle 제품에 대해 15% 할인 코드를 만드세요. 코드는 LAVENDER15이고 2025년 11월 말까지 유효합니다.
위시리스트에 제품을 추가하고 공유할 수 있게 해주세요.단계 5: Shopify 스토어 클레임 (신규 스토어만)
- 스토어가 클레임되면 클레임한 Lovable 사용자가 Shopify 스토어 소유자가 됩니다.
- 스토어를 클레임한 Lovable 사용자만 스토어에 대한 쓰기 접근 권한이 있습니다.
- 협업자는 Shopify 데이터에 대한 읽기 전용 접근 권한을 유지하지만(제품, 변형 및 할인 코드 검색 및 검색) 스토어프론트를 완전히 빌드할 수 있습니다.
새 스토어를 클레임하고 출시할 준비가 되면 스토어를 잠금 해제하고 KYC (Know Your Customer) 프로세스를 완료하여 결제를 설정하고 활성화할 준비를 하세요. 이 과정은 시간이 걸릴 수 있습니다.
스토어 클레임
Claim the store를 입력합니다. Lovable이 스토어를 클레임하도록 프롬프트합니다. Claim을 클릭합니다.
이렇게 하면 새 탭에서 Shopify가 열리고 로그인한 다음 클레임 프로세스를 완료할 수 있습니다. 스토어 클레임을 위한 이메일 초대장도 받을 수 있습니다.
스토어 클레임 링크 수락
Shopify에서 Claim store 링크를 수락합니다. Lovable 프로젝트로 돌아갑니다.
스토어 클레임 확인이 실패하는 경우 Try again을 클릭하면 해결됩니다.
Shopify 관리자에서 스토어 설정 완료
Shopify 스토어가 준비되었습니다. Shopify 관리자로 이동하여 스토어 설정을 완료하고 결제를 활성화하여 판매를 시작하세요. 자세한 내용은 Shopify 결제를 참조하세요.
스토어를 클레임하면 Shopify가 상점에 영구 도메인을 할당하며, 이는 backend에만 사용됩니다. 프로젝트를 게시하면 실제 스토어 URL은 lovable.app 또는 커스텀 도메인이 됩니다.
30일 무료 평가판 후 온라인에서 제품 판매를 계속하려면 유료 Shopify 구독이 필요하므로 완전히 출시할 준비가 되었을 때만 스토어를 클레임하세요.
단계 6: 스토어 출시
스토어 설정이 완료되면 Lovable 프로젝트를 게시하고 스토어를 세상과 공유하세요.
언제든지 Lovable에서 직접 다음을 할 수 있습니다:
- 제품 생성, 업데이트 및 삭제
- 가격 및 설명 관리
- 새로운 컬렉션, 프로모션 또는 번들 출시
Shopify 스토어 연결 해제
언제든지 프로젝트에서 Shopify 스토어 연결을 해제할 수 있습니다. 다음을 원할 때 유용합니다:
- 프로젝트 리믹스 (연결된 Shopify 스토어가 있는 프로젝트는 리믹스할 수 없음)
- 다른 Shopify 스토어 연결
- 새 프로젝트를 시작하지 않고 새 Shopify 스토어 만들기
연결 해제하면 Lovable 프로젝트와 Shopify 스토어 간의 연결이 제거됩니다. Shopify 스토어와 해당 데이터는 Shopify에 그대로 유지되지만 Lovable 프로젝트는 더 이상 해당 스토어에 연결되지 않으며 자유롭게 재사용할 수 있습니다.
연결을 해제하는 세 가지 방법이 있습니다:
- Agent에 요청:
Disconnect my Shopify store와 같은 프롬프트를 입력 - Shopify 메뉴: 탐색 표시줄에서 Shopify 아이콘을 클릭하고 점 세 개 메뉴에서 Disconnect store를 선택
- 프로젝트 설정: 프로젝트 설정 → Shopify로 이동하여 Disconnect를 클릭