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

# Construa uma vitrine Shopify

> Aprenda como projetar e lançar uma vitrine Shopify personalizada com o Replit.

export const CANDLE_STORE_PROMPT = `Build me an online store that sells hand-poured soy candles for a brand called "Ember & Oak." Use Shopify as the backend for the store and its products.

It should feel warm, calm, and premium — like a boutique home-goods brand. Use a soft cream background, deep charcoal text, and a muted amber accent. Elegant serif headlines, generous spacing, and soft rounded product cards.

Top to bottom:

A simple header with a small "Ember & Oak" wordmark on the left, a few links in the middle (Shop, Scents, Our Story), and a cart icon on the right.

A hero section with a large lifestyle photo of a lit candle on a wooden table in warm light, a headline like "Light that feels like home," a one-line subhead, and a "Shop candles" button.

A product grid that shows each candle with its photo, name, scent, and price, with an "Add to cart" button on each card. Read the products from the connected Shopify store.

A short "Our Story" band with a sentence or two about small-batch, hand-poured candles.

A simple footer with the wordmark and the same links.

Generate warm, cozy candle and home photography. Make it look like a real boutique brand, not a template. Wire the product grid and cart to the Shopify store you set up — don't ask me for any Shopify API keys.`;

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

Você pode projetar e lançar uma vitrine Shopify personalizada apenas descrevendo a loja que deseja criar. O Agent provisiona uma loja Shopify, constrói o front end e adiciona seus produtos, tudo em uma única conversa. Quando estiver pronto para vender, você faz uma única visita ao Shopify para reivindicar a loja e ativar os pagamentos.

Neste guia, você construirá a **Ember & Oak**, uma loja de velas artesanais, desde o prompt até uma vitrine publicada.

<Frame>
  <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="A vitrine finalizada Ember & Oak — um design boutique quente em creme e âmbar, com uma imagem hero de vela acesa, o título 'Light that feels like home' e uma grade de produtos de velas de soja com botões Adicionar ao carrinho" width="3452" height="1978" data-path="images/build-examples/ember-and-oak-candles.png" />
</Frame>

<PromptActions prompt={CANDLE_STORE_PROMPT} campaign="docs-ecommerce-store" />

## O que você vai alcançar

Ao final deste guia, você terá:

* Uma vitrine de velas com design personalizado, respaldada por uma loja Shopify real.
* Produtos e preços criados no Shopify e exibidos na vitrine.
* Um carrinho funcional que direciona compradores para o checkout do Shopify.
* Um caminho claro para entrar no ar: reivindicar a loja, ativar os pagamentos e lançar.

## O que você vai aprender

Você aprenderá a:

* Descrever uma loja para que o Agent recomende o Shopify e o provisione para você.
* Conectar o Shopify sem precisar gerenciar chaves de API.
* Adicionar e publicar produtos conversando com o Agent.
* Refinar o design e o fluxo de compra.
* Levar a loja do desenvolvimento a uma vitrine ativa e vendável.

## Conectar o Shopify

O Shopify está disponível para todos os construtores em todos os apps e você o conecta direto na conversa. Comece descrevendo a loja que deseja construir.

<Steps>
  <Step title="Descreva sua loja">
    Copie o prompt e cole-o na caixa de prompt em [replit.com](https://replit.com), ou clique em **Build on Replit** para abrir o Replit com o prompt preenchido.

    <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="A caixa de prompt do Replit com o prompt da loja de velas Ember & Oak digitado, pronto para iniciar a construção" width="1440" height="900" data-path="images/replitai/shopify/describe-your-store.png" />
    </Frame>

    <PromptActions prompt={CANDLE_STORE_PROMPT} campaign="docs-ecommerce-store" />

    O Agent reconhece que você está vendendo um produto físico e recomenda o Shopify como backend para sua vitrine.

    <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="O Agent do Replit transferindo para o skill do Shopify para a loja de velas Ember & Oak, mostrando um cartão 'Connect to Shopify' com um botão Connect Shopify" width="3452" height="1984" data-path="images/replitai/shopify/connect-shopify-store.png" />
    </Frame>
  </Step>

  <Step title="Aprovar a criação de uma loja Shopify">
    O Agent solicita criar uma loja Shopify para seu app. Aprove e o Agent provisiona uma loja de desenvolvimento própria do Replit e a conecta. Nenhuma configuração adicional é necessária.
    Seu e-mail é compartilhado com o Shopify para que você possa reivindicar a loja mais tarde.

    A loja começa protegida por senha e não pode receber pagamentos reais até que você entre no ar, então você pode construir livremente sem riscos.
  </Step>
</Steps>

<Note>
  Cada loja Shopify está vinculada a um único app. Se você criar uma segunda
  loja depois, o Agent provisiona uma nova loja Shopify para esse app. Para
  detalhes completos do conector, veja [Conectar Shopify](/pt/references/integrations/shopify).
</Note>

## Construir a vitrine

Com o Shopify conectado, o Agent projeta e constrói a vitrine integrada à sua loja.

<Steps>
  <Step title="Deixe o Agent construir o front end">
    O Agent gera a vitrine a partir do seu prompt — o hero, a grade de produtos, o carrinho e as seções de suporte. Quando termina, o painel direito muda para **Preview** para você rolar a página e navegar pelo design.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/storefront-preview.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=7cf0a4f4bd1fd28bbd9df320f1ad89a9" alt="A vitrine Ember & Oak renderizada no painel de Preview do Replit ao lado do chat do Agent, mostrando a seção hero de velas e a grade de produtos" width="3452" height="1978" data-path="images/replitai/shopify/storefront-preview.png" />
    </Frame>
  </Step>

  <Step title="Adicione seus primeiros produtos">
    Uma loja nova começa com um catálogo vazio. Peça ao Agent para adicionar um produto e ele cria o produto no Shopify e o publica na vitrine.

    <AiPrompt>
      Add a lavender soy candle for \$18 with a short cozy description, then publish it to the storefront.
    </AiPrompt>

    O produto é criado na sua loja Shopify e aparece na grade de produtos da vitrine.

    <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="Chat do Agent adicionando uma vela de soja de lavanda, com o novo produto aparecendo na grade de produtos da vitrine Ember & Oak" width="3452" height="1978" data-path="images/replitai/shopify/add-product.png" />
    </Frame>
  </Step>

  <Step title="Complete o catálogo">
    Continue adicionando produtos descrevendo-os. O Agent cria cada um no Shopify com seu preço, descrição e imagem.

    <AiPrompt>
      Add three more candles: Cedar & Sage at $20, Vanilla Bean at $16, and Sea Salt at \$22. Give each a short description and publish them.
    </AiPrompt>
  </Step>
</Steps>

<Tip>
  **Evoluindo:** peça ao Agent para agrupar produtos em coleções ("Crie uma
  coleção de Férias com minhas três velas mais vendidas"), adicionar variantes
  de produtos como tamanho ou fragrância, ou rastrear inventário para que a
  vitrine mostre o que está em estoque. O Shopify continua sendo o sistema de
  registro para tudo isso.
</Tip>

## Iterar no design e no checkout

Cada parte da vitrine é editável por conversa. Refine a aparência e depois verifique o fluxo de compra do início ao fim.

<Steps>
  <Step title="Refine o design">
    Descreva o que deseja mudar e o Agent atualiza a vitrine.

    <AiPrompt>
      Make the hero section feel more editorial — larger headline, more whitespace, and a softer amber accent on the buttons.
    </AiPrompt>
  </Step>

  <Step title="Teste o carrinho e o checkout">
    No Preview, adicione uma vela ao carrinho e inicie o checkout. O carrinho direciona compradores para o checkout hospedado pelo Shopify. Durante o desenvolvimento, sua loja está protegida por senha, então o preview do checkout pode mostrar uma página de senha — isso é esperado e não significa que algo está quebrado.
  </Step>
</Steps>

<Tip>
  **Evoluindo:** peça ao Agent para adicionar uma página de detalhe do produto,
  um drawer de carrinho, busca ou uma seção de produtos em destaque. Como a
  vitrine é um projeto real do Replit, você pode estendê-la com tudo o que
  conseguir descrever — um blog, uma lista de desejos ou páginas de campanha
  personalizadas — enquanto o Shopify cuida do checkout e dos pedidos.
</Tip>

## Publicar

Entrar no ar acontece no Shopify. Peça ao Agent para iniciar o fluxo Entrar no Ar e depois conclua as etapas de responsabilidade do lojista.

<Steps>
  <Step title="Reivindique sua loja no Shopify">
    A reivindicação acontece no Shopify e é a única etapa que ocorre fora do
    Replit. Como seu e-mail foi compartilhado com o Shopify quando a loja foi
    criada, você pode reivindicá-la pelo link que o Replit fornece ou pelo
    e-mail que o Shopify envia.

    O Shopify envia um e-mail com um **Convite de proprietário de loja** que
    orienta você nas etapas. Abra-o e selecione **Começar**.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/claim-store-email.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=df6acd8d6b8dd2168c4931a295025ef4" alt="E-mail de 'Convite de proprietário de loja' do Shopify convidando você a se tornar o proprietário da loja, com um botão 'Começar'" width="856" height="1024" data-path="images/replitai/shopify/claim-store-email.png" />
    </Frame>

    Faça login com sua conta Shopify existente ou crie uma para aceitar o
    convite.

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/claim-store-create-account.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=db61bb84a0b652f4f8bc36e00e8c7034" alt="Tela 'Criar uma conta' do Shopify para aceitar o convite, com opções de login por e-mail, Google, Apple e Facebook" width="3452" height="1978" data-path="images/replitai/shopify/claim-store-create-account.png" />
    </Frame>

    Selecione **Reivindicar loja** para autorizar o app do Replit na sua loja e
    iniciar seu período de avaliação gratuito. Você então acessa seu painel
    Shopify como proprietário principal.

    <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="Tela 'Reivindique sua loja' do Replit com um botão 'Reivindicar loja' para iniciar um período de avaliação gratuito do Shopify" width="3452" height="1978" data-path="images/replitai/shopify/claim-store.png" />
    </Frame>
  </Step>

  <Step title="Escolha um plano e ative os pagamentos">
    Escolha um plano Shopify e ative o Shopify Payments ou outro provedor.
    O Shopify coleta os dados de identidade e bancários necessários para pagar
    você — nada disso acontece no Replit.
  </Step>

  <Step title="Configure frete, impostos e um domínio">
    Defina suas taxas de frete e revise os impostos no Shopify, e opcionalmente
    conecte um domínio personalizado.
  </Step>

  <Step title="Lance e publique">
    Remova a senha da vitrine no Shopify para abrir a loja para compradores. De
    volta ao Replit, clique em **Publicar** para implantar sua vitrine na URL
    pública.
  </Step>
</Steps>

<Note>
  Pagamentos, verificação de identidade, impostos, frete e checagens de fraude
  permanecem no Shopify. Para a lista completa de verificações para entrar no
  ar e detalhes do conector, veja [Conectar
  Shopify](/pt/references/integrations/shopify#go-live-on-shopify).
</Note>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Conectar Shopify" icon="bag-shopping" href="/pt/references/integrations/shopify">
    A referência do conector: como a conexão com o Shopify funciona e a lista
    completa de verificações para entrar no ar.
  </Card>

  <Card title="Adicionar um domínio personalizado" icon="globe" href="/build/add-custom-domain">
    Dê à sua loja uma URL com sua marca antes do lançamento.
  </Card>

  <Card title="Melhorar o SEO" icon="magnifying-glass" href="/build/improve-seo">
    Ajude compradores a encontrar sua loja nas buscas.
  </Card>

  <Card title="Lançar uma landing page" icon="rectangle-list" href="/build/landing-page">
    Construa uma página de campanha focada para direcionar tráfego para sua
    loja.
  </Card>
</CardGroup>

## Relacionados

* [Conectar Shopify](/pt/references/integrations/shopify)
* [Adicionar um domínio personalizado](/build/add-custom-domain)
* [Integrações do Agent](/pt/references/integrations/overview)