> ## 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로 가져오고 스토어프론트를 Replit에서 디자인하세요.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

이미 보유하고 있는 소스에서 제품 정보를 Agent에게 제공하세요: Google Sheet(이름, 가격,
설명, 제품 코드, 재고)와 Google Drive에 있는 사진입니다. Agent가 Shopify 스토어를
설정하고, 제품, 가격, 설명, 이미지를 가져오고, 결제와 체크아웃을 연결합니다.
스토어프론트 디자인과 프런트엔드는 Shopify 테마가 아니라 Replit에 있습니다. 결제는
Shopify 체크아웃을 통해 이루어지므로 별도의 Stripe 커넥터가 필요하지 않습니다.

## 적합한 대상

* 이미 Sheets와 Drive에 카탈로그를 관리해온 창업자
* Shopify를 커머스 백엔드로 사용하면서 커스텀 Replit 스토어프론트가 필요한 프로덕트 디자이너

## 커넥터

<Connectors
  items={[
{
  id: "google-sheets",
  name: "Google Sheets",
  why: "제품 목록: 이름, 가격, 설명, 제품 코드, 재고",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "제품 사진 및 브랜드 자산",
},
{
  id: "shopify",
  name: "Shopify",
  why: "스토어 설정, 카탈로그 가져오기, 체크아웃, 결제",
},
]}
/>

## 시작하기 전에

제품당 한 행씩(이름, 가격, 설명, 제품 코드, 재고) 정리된 Sheet와, Agent가 행에 매칭할 수
있도록 이름을 붙인 사진이 담긴 Drive 폴더를 준비하세요. Sheets, Drive, Shopify를
연결하세요. 아직 스토어가 없다면 Agent가 채팅에서 Shopify를 프로비저닝할 수 있습니다.
스토어를 공유하기 전에 테스트 주문을 넣어보세요.

## Agent에게 요청하기

<AiPrompt>
  이 제품 소스\[Google Sheet 및 Drive 폴더]를 바탕으로 완전한 Shopify 스토어를 설정해
  주세요: 이름, 가격, 설명, 사진이 포함된 모든 제품을 가져오세요. 이 Replit 앱에서
  스토어프론트 프런트엔드(홈, 컬렉션, 제품, 장바구니)를 디자인하고 구축해 주세요.
  카탈로그, 장바구니, 체크아웃, 결제에는 Shopify를 사용하세요. 고객이 보는 페이지에는
  Shopify 테마를 사용하지 마세요.
</AiPrompt>

## 예상되는 결과

Agent는 카탈로그를 Shopify로 가져온 다음, Shopify에서 제품을 읽어와 고객을 Shopify
체크아웃으로 보내는 Replit 스토어프론트를 구축합니다. Sheet와 비교해 몇 개 제품(가격,
문구, 이미지)을 확인하고 테스트 주문을 넣어보세요. Shopify 테스트 결제를 사용하고,
장바구니 합계가 Sheet와 일치하는지 확인하고, 체크아웃이 Shopify에 그대로 남아 있는지
확인하세요.

## 나에게 맞게 조정하기

<AiPrompt>
  Drive 사진을 제품 코드 파일명(CODE.jpg)으로 Sheet 행에 매칭해 주세요. 사진이 없는
  행은 건너뛰어 주세요.
</AiPrompt>

<AiPrompt>
  Sheet의 카테고리 열을 기준으로 컬렉션 페이지를 추가하고, Replit 스토어프론트에
  검색창을 추가해 주세요.
</AiPrompt>

## 문제 해결

* **사진이 제품과 맞지 않음:** Drive 파일명을 제품 코드(`CODE.jpg`)로 지정하고, 사진이 없는 행은 건너뛰도록 Agent에게 요청하세요.
* **가격이나 문구가 Sheet와 다름:** 제품당 한 행(이름, 가격, 설명, 제품 코드, 재고)으로 정리되어 있는지 확인하고, 가져온 후 몇 개 항목을 샘플로 확인하세요.
* **체크아웃이 Shopify가 아니거나 스토어프론트가 테마임:** 고객이 보는 페이지는 Replit에 있어야 합니다. 결제는 Shopify 체크아웃을 통해 이루어집니다. 스토어를 공유하기 전에 테스트 주문을 넣어보세요.

## 관련 문서

<CardGroup cols={2}>
  <Card title="랜딩 페이지 디자인하기" href="/ko/use-cases/design-landing-page">
    먼저 대기자 명단 페이지가 필요한 창업자와 프로덕트 디자이너를 위한 문서입니다.
  </Card>

  <Card title="Figma에서 실제 App으로 전환하기" href="/ko/use-cases/import-figma-design">
    이미 스토어프론트를 Figma로 만들어둔 프로덕트 디자이너를 위한 문서입니다.
  </Card>
</CardGroup>