> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify 연결하기

> Shopify를 연결하면 Agent가 Replit 안에서 Shopify 스토어를 프로비저닝하고, 커스텀 스토어프런트를 구축하며, 제품과 인벤토리를 관리할 수 있습니다.

export const WistiaEmbed = ({videoId, title = "Wistia video", playerColor = "FF0000", controlsVisibleOnLoad = false}) => {
  if (!videoId) {
    return null;
  }
  const url = "https://fast.wistia.net/embed/iframe/" + videoId + "?seo=false&playerColor=" + playerColor + "&controlsVisibleOnLoad=" + controlsVisibleOnLoad;
  return <Frame>
      <iframe src={url} title={title} allow="autoplay; fullscreen" allowFullScreen></iframe>
    </Frame>;
};

<WistiaEmbed videoId="d3o9gwwtiw" title="Shopify를 연결하고 Agent로 스토어프런트 구축하기" />

Shopify 커넥터를 사용하면 Agent가 Shopify 스토어를 프로비저닝하고, 커스텀 스토어프런트를 구축하며, 하나의 대화에서 API 키 없이 제품과 인벤토리를 관리합니다. 물리적 제품 판매를 설명하면 Agent가 Shopify를 추천하고, 라이브로 전환할 때만 Shopify를 방문하면 됩니다. 첫 번째 프롬프트부터 실제 주문까지 약 10분이면 됩니다.

<Note>
  단계별 안내는 [Shopify 스토어프런트 구축하기](/build/ecommerce-store)를 참조하세요.
</Note>

## 만들 수 있는 것

* 물리적 제품을 위한 커스텀 디자인 스토어프런트
* 브랜드 굿즈 및 의류 스토어
* 장바구니와 결제가 있는 D2C 쇼핑몰
* Shopify 스토어 기반의 카탈로그 및 인벤토리 도구
* 단일 히어로 아이템을 판매하는 제품 랜딩 페이지

## 예시

<Frame caption="Ember & Oak: 튜토리얼에서 구축된 수제 소이 캔들 스토어">
  <img src="https://mintcdn.com/replit/HIUZSogml1gclscE/images/build-examples/ember-and-oak-candles.png?fit=max&auto=format&n=HIUZSogml1gclscE&q=85&s=f22b2300c152ac6555dd5edb8dfbcc1f" alt="Ember & Oak 캔들 스토어프런트: 크림색과 앰버 톤 디자인, 켜진 캔들 히어로 이미지와 'Light that feels like home' 헤드라인" width="3452" height="1978" data-path="images/build-examples/ember-and-oak-candles.png" />
</Frame>

<Frame caption="Petals & Purl: 수제 뜨개질 실꽃 스토어">
  <img src="https://mintcdn.com/replit/HIUZSogml1gclscE/images/build-examples/petals-and-purl.png?fit=max&auto=format&n=HIUZSogml1gclscE&q=85&s=8c704f8af42e1d0c010445cdf2eaee36" alt="Petals & Purl 스토어프런트: 아늑한 수제 뜨개질 실꽃 쇼핑몰, 'Blooms that last a lifetime' 헤드라인" width="1291" height="740" data-path="images/build-examples/petals-and-purl.png" />
</Frame>

## 작동 방식

<Steps>
  <Step title="스토어 설명하기">
    Agent에게 판매하고 싶은 것을 말하세요. 이름을 지정하지 않아도 물리적 제품에는 Shopify를 추천합니다.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/describe-your-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=b25c3bc8ff45c1bc509a10f60be294bd" alt="Replit 프롬프트 박스에 캔들 스토어 프롬프트가 입력된 상태" width="1440" height="900" data-path="images/replitai/shopify/describe-your-store.png" />
    </Frame>
  </Step>

  <Step title="Agent가 스토어 프로비저닝">
    Replit의 Shopify Partner 계정 아래에 개발 스토어가 생성되고(약 10초), Replit Sales Channel 앱이 설치되어 스토어가 연결됩니다. API 키 불필요. 앱당 스토어 하나. 클레임할 때까지 비밀번호로 보호됩니다.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/connect-shopify-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=f10b41182863d7cb7afb5611d79bace1" alt="Replit Agent가 Shopify 스킬로 핸드오프하며 Connect Shopify 버튼이 있는 'Connect to Shopify' 카드 표시" width="3452" height="1984" data-path="images/replitai/shopify/connect-shopify-store.png" />
    </Frame>
  </Step>

  <Step title="Agent가 구축 및 관리">
    Agent가 헤드리스 스토어프런트를 디자인하고 제품, 옵션, 인벤토리, 컬렉션, 할인을 관리합니다.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/add-product.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=5f7a254e82ae13c1770632a9db916005" alt="이름과 가격이 있는 캔들 제품이 표시된 스토어프런트 제품 그리드" width="3452" height="1978" data-path="images/replitai/shopify/add-product.png" />
    </Frame>
  </Step>

  <Step title="Shopify에서 라이브 전환">
    판매 준비가 되면 스토어를 클레임하고, 플랜을 선택하고, 결제를 설정하고, 런칭합니다.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/claim-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=317bdb5509beb15270c694087e3279fe" alt="'Claim store' 버튼이 있는 Replit 'Claim your store' 화면" width="3452" height="1978" data-path="images/replitai/shopify/claim-store.png" />
    </Frame>
  </Step>
</Steps>

## Agent가 관리하는 것

스토어프런트와 카탈로그의 모든 것을 채팅으로 편집할 수 있습니다.

| 영역       | Agent가 하는 것                                                                                                                                                                                          |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 디자인      | 지침에 따라 헤드리스 프런트엔드를 생성합니다(Liquid 테마나 템플릿 라이브러리 없음). 카피, 레이아웃, 내비게이션, 모션, 제품 페이지를 채팅으로 편집하고 [Canvas](/references/design/canvas) 변형으로 방향을 탐색할 수 있습니다. 실제 Replit 프로젝트이므로 블로그, 위시리스트, 랜딩 페이지로 확장할 수 있습니다. |
| 제품       | 제품 및 옵션 생성, 수정, 삭제. 필드: 제목, 설명, 유형, 공급업체, 태그, SKU, 가격, 무게, 옵션(사이즈, 색상), 이미지, 가용성.                                                                                                                    |
| 인벤토리     | 옵션별 재고 설정 및 조정.                                                                                                                                                                                      |
| 컬렉션      | 제품을 컬렉션으로 그룹화.                                                                                                                                                                                       |
| 할인       | 가격 규칙과 사용 가능한 코드 생성.                                                                                                                                                                                 |
| 게시 및 동기화 | 새 제품은 스토어프런트에 자동으로 게시됩니다. 양방향 동기화: Shopify 관리자에서의 수정이 Replit 미리보기에 반영되고, Agent의 변경 사항은 Shopify 관리자에 반영됩니다.                                                                                           |

## Replit과 Shopify: 역할 분담

| Replit 담당                    | Shopify 담당                 |
| ---------------------------- | -------------------------- |
| 스토어프런트 디자인 및 구축              | 호스팅된 결제                    |
| 채팅을 통한 카탈로그 관리(제품, 인벤토리, 할인) | 제품, 인벤토리, 장바구니, 주문의 기록 시스템 |
| 스토어프런트 호스팅 및 배포              | 결제, 신원 확인(KYC), 지급         |
| Canvas 디자인 변형                | 세금, 배송, 이행                 |
| 앱 확장(블로그, 랜딩 페이지 등)          | 멀티채널 판매                    |

주문, 환불, 지급, 이행은 Agent가 아닌 Shopify 관리자에서 처리됩니다.

## 연결 범위

* API 키나 Connectors 패널 설정 없이 모든 앱의 모든 빌더가 대화에서 연결 가능.
* 앱당 하나의 스코프: 각 앱은 고유한 Shopify 스토어를 갖습니다.
* 스토어는 클레임할 때까지 Replit 소유의 개발 스토어입니다. 이메일이 Shopify와 공유되어 나중에 클레임할 수 있습니다.
* 언제든지 Shopify 관리자에서 Replit 앱을 제거할 수 있습니다.

## Shopify에서 라이브 전환

라이브 전환은 Replit이 아닌 Shopify에서 이루어집니다. Agent에게 Go Live 플로우를 시작하도록 요청한 후 Shopify 관리자에서 다음 판매자 소유 단계를 완료합니다:

* **스토어 클레임**: 채팅의 링크나 Shopify가 보내는 이메일을 통해 스토어를 클레임합니다. 링크는 7일 후 만료됩니다. 클레임하면 무료 체험이 시작됩니다.
* **플랜 선택**: 실제 주문을 처리하려면 [유료 플랜](https://www.shopify.com/pricing)이 필요합니다.
* **결제 설정**: [Shopify Payments](https://help.shopify.com/en/manual/payments/shopify-payments) 또는 다른 공급업체를 활성화하고 신원 확인(KYC)을 완료합니다. 클레임 계정의 KYC 완료 후 실제 결제가 가능합니다.
* **[배송](https://help.shopify.com/en/manual/shipping)과 [세금](https://help.shopify.com/en/manual/taxes) 설정.**
* **[커스텀 도메인 연결](/build/add-custom-domain)**(선택사항) 후 스토어 비밀번호를 제거하여 구매자에게 스토어를 오픈합니다.

결제는 항상 Shopify 호스팅 결제로 리다이렉트되므로 구매자는 Shopify에서 결제합니다.

<Note>
  결제, 신원 확인, 세금, 배송, 사기 검사는 Shopify에서 처리됩니다. Replit은 판매자 은행 정보, 세금 ID, 기타 민감한 정보를 수집하지 않습니다.
</Note>

## 문제 해결

<AccordionGroup>
  <Accordion title="Shopify 스토어 설정에 시간이 걸립니다">
    프로비저닝 과정에서 여러 Shopify API를 호출하므로 시간이 걸릴 수 있습니다. Agent가 설정을 완료한 후 스토어프런트 구축을 요청하세요.
  </Accordion>

  <Accordion title="개발 중 결제 시 비밀번호 페이지가 표시됩니다">
    개발 스토어는 라이브 전환 전까지 비밀번호로 보호되므로 결제 미리보기가 비밀번호 페이지로 이동할 수 있습니다. 예상된 동작이지만 장바구니는 여전히 작동합니다. 런칭할 때만 Shopify에서 비밀번호를 제거하세요.
  </Accordion>

  <Accordion title="결제에서 실제 결제가 완료되지 않습니다">
    실제 결제는 클레임한 Shopify 계정의 결제 설정 및 KYC 완료가 필요합니다. 완료 전까지 결제는 Shopify로 리다이렉트되지만 결제를 캡처할 수 없습니다. KYC를 완료하거나 이미 결제가 설정된 계정을 사용하세요.
  </Accordion>

  <Accordion title="Agent가 이 앱에 Shopify가 연결되지 않았다고 합니다">
    각 스토어는 하나의 앱에 스코프됩니다. 다른 앱에서 Shopify를 연결했다면 Agent에게 현재 앱에 Shopify 스토어를 설정하도록 요청하세요.
  </Accordion>

  <Accordion title="스토어프런트에 제품이 표시되지 않습니다">
    제품은 활성화되고 게시된 경우에만 표시됩니다. Agent가 생성한 제품은 자동으로 게시됩니다. 없는 제품이 있다면 Agent에게 게시를 요청한 후 미리보기를 새로고침하세요.
  </Accordion>

  <Accordion title="이전 후 연결을 다시 해야 합니다">
    스토어를 클레임하거나 이전한 후 Shopify가 연결 재인증을 요청할 수 있습니다. Agent에게 Shopify 재연결을 요청하면 스토어 데이터 손실 없이 접근 권한을 복원합니다.
  </Accordion>
</AccordionGroup>

## 관련 문서

* [Shopify 스토어프런트 구축하기](/build/ecommerce-store): 프롬프트부터 게시된 스토어프런트까지 단계별 가이드
* [커스텀 도메인 추가하기](/build/add-custom-domain): 스토어프런트에 브랜드 URL 부여
* [Agent 통합](/references/integrations/overview): Replit 관리 통합 및 Agent 서비스
* [커넥터 관리](/replitai/managing-connectors): 커넥터 설정 및 관리
* [Shopify 도움말 센터](https://help.shopify.com/): 스토어 설정, 결제, 계정 관리