> ## 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.

# Crie uma loja online

> Importe seu catálogo para o Shopify e crie o design da vitrine no 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>;
};

Forneça ao Agent seus produtos a partir de uma fonte que você já usa: uma planilha do Google
Sheets (nome, preço, descrição, código do produto, estoque) e fotos no Google Drive. O Agent
configura a loja Shopify, importa produtos, preços, descrições e imagens, e conecta o
checkout e os pagamentos. O design da vitrine e o frontend ficam no Replit, não em um tema do
Shopify. Os pagamentos passam pelo checkout do Shopify, então você não precisa de um conector
Stripe separado.

## Ideal para

* Fundadores que precisam de uma loja a partir de um catálogo que já mantêm no Sheets e no Drive.
* Designers de produto que precisam de uma vitrine personalizada no Replit com o Shopify como backend de comércio.

## Conectores

<Connectors
  items={[
{
  id: "google-sheets",
  name: "Google Sheets",
  why: "Lista de produtos: nomes, preços, descrições, códigos de produto, estoque",
},
{
  id: "google-drive",
  name: "Google Drive",
  why: "Fotos de produtos e materiais de marca",
},
{
  id: "shopify",
  name: "Shopify",
  why: "Configuração da loja, importação de catálogo, checkout e pagamentos",
},
]}
/>

## Antes de começar

Tenha uma planilha com uma linha por produto (nome, preço, descrição, código do produto,
estoque) e uma pasta no Drive com fotos nomeadas de forma que o Agent consiga associá-las às
linhas. Conecte Sheets, Drive e Shopify. O Agent pode provisionar o Shopify pelo chat, caso
você ainda não tenha uma loja. Faça um pedido de teste antes de compartilhar a loja.

## Prompt para o agente

<AiPrompt>
  A partir desta fonte de produtos \[planilha do Google e pasta do Drive],
  configure uma loja Shopify completa: importe todos os produtos com nome,
  preço, descrição e fotos. Crie o design e construa o frontend da vitrine
  neste app do Replit (início, coleção, produto, carrinho). Use o Shopify
  para catálogo, carrinho, checkout e pagamentos. Não use um tema do Shopify
  para as páginas voltadas ao cliente.
</AiPrompt>

## O que esperar

O Agent importa o catálogo para o Shopify e, em seguida, constrói uma vitrine no Replit que lê
os produtos do Shopify e envia os clientes para o checkout do Shopify. Verifique alguns
produtos comparando com a planilha (preço, texto, imagem) e faça um pedido de teste. Use os
pagamentos de teste do Shopify, confirme se o total do carrinho corresponde à planilha e
verifique se o checkout permanece no Shopify.

## Adapte ao seu caso

<AiPrompt>
  Associe as fotos do Drive às linhas da planilha pelo nome do arquivo com o
  código do produto (CODIGO.jpg). Ignore qualquer linha sem foto.
</AiPrompt>

<AiPrompt>
  Adicione páginas de coleção com base na coluna de categoria da planilha, e
  uma barra de busca na vitrine do Replit.
</AiPrompt>

## Solução de problemas

* **As fotos não correspondem aos produtos:** nomeie os arquivos do Drive pelo código do produto (`CODE.jpg`) e peça ao Agent para ignorar qualquer linha sem foto.
* **Preços ou textos não correspondem à planilha:** confirme uma linha por produto (nome, preço, descrição, código do produto, estoque) e verifique alguns itens após a importação.
* **O checkout não é do Shopify, ou a vitrine é um tema:** as páginas voltadas ao cliente devem ficar no Replit. Os pagamentos passam pelo checkout do Shopify. Faça um pedido de teste antes de compartilhar a loja.

## Relacionados

<CardGroup cols={2}>
  <Card title="Crie o design de uma landing page" href="/pt/use-cases/design-landing-page">
    Para fundadores e designers de produto que precisam de uma página de lista de espera primeiro.
  </Card>

  <Card title="Vá do Figma a um App no ar" href="/pt/use-cases/import-figma-design">
    Para designers de produto que já têm a vitrine pronta no Figma.
  </Card>
</CardGroup>