# Como adicionar e-commerce a qualquer site (sem trocar de plataforma) > Três padrões de integração para adicionar comércio a um site que você já tem. Quando cada um faz sentido, o que muda no seu site e quando realmente vale a pena trocar de plataforma. Ryan Badger - 2 de junho de 2023 - 4 min de leitura ## O que as pessoas realmente querem dizer com "integrar e-commerce" Você tem um site. Um site institucional, um portfólio, um blog, talvez um projeto em Webflow ou Squarespace. Ele funciona. Faz visualmente o que você quer. Mas agora você precisa vender algo a partir dele. O movimento errado é jogá-lo fora e reconstruir tudo na Shopify. O movimento certo depende de três coisas: 1. **O que você vende.** Um produto ou um catálogo? Físico ou digital? Assinatura ou venda avulsa? 2. **Em que seu site roda.** Se dá para colar uma tag de script, as opções se abrem. 3. **Quanto da experiência de checkout você quer controlar.** Este post mostra como a "integração" realmente se parece em 2026 para cada um desses eixos. Sem trocar de plataforma, se você escolher direito. ## Os três padrões reais de integração ### Padrão 1: Redirecionar para um checkout hospedado O mais simples. Seu site tem botões de compra. Ao clicar, o cliente sai do seu site para o checkout (Stripe Payment Links, Gumroad, Payhip, Lemonsqueezy). O pagamento acontece no domínio deles e o cliente volta depois para a sua página de agradecimento. **Prós:** zero integração em JS, funciona literalmente em qualquer site, baixa manutenção. **Contras:** a quebra de UX (sair do seu site) prejudica a conversão. A marca fica inconsistente. Os fluxos de carrinho abandonado e a análise ficam mais difíceis. Bom para: criadores de produto único, baixo volume, aversão técnica a embutir qualquer coisa. ### Padrão 2: Embutir um widget na página Um widget embutido roda dentro do seu site. O cliente nunca sai. Carrinho, detalhes do produto e checkout são renderizados dentro das suas páginas. É isso que Shoprocket, Snipcart, Ecwid e plataformas semelhantes oferecem. Integração típica: ```
``` Uma linha, uma colagem, pronto. O widget se sincroniza automaticamente com o seu painel: produtos, preços, imagens, regras de imposto, opções de frete, meios de pagamento. Os clientes ficam no seu domínio de "navegar" até "obrigado pelo seu pedido". **Prós:** UX consistente, controle da marca, menos vazamentos de conversão. **Contras:** seu site agora tem uma dependência de JS. A maioria é leve (~20-50KB), mas não é zero. Bom para: qualquer site que queira uma loja de verdade sem trocar de plataforma. ### Padrão 3: Integração headless (API) Você constrói a interface por conta própria e chama uma API de comércio (API do Stripe, Storefront API da Shopify, BigCommerce, Commercetools) para a mecânica do comércio. Totalmente personalizado, totalmente seu. **Prós:** controle completo, sem concessões visuais, escala para fluxos personalizados. **Contras:** trabalho de engenharia de verdade. Você vai construir checkout, estado do carrinho, cálculo de impostos, sincronização de estoque, webhooks. Meses de trabalho, não minutos. Bom para: equipes com um dev dedicado a comércio em tempo integral, ou produtos que não caberiam em um widget pronto. ## A árvore de decisão Comece com "você quer que seu cliente saia do seu site": - **Sim**: Padrão 1 (link de checkout hospedado). Stripe Payment Links ou Gumroad, 10 minutos para configurar. - **Não**: vá para a próxima pergunta. Você quer escrever código personalizado? - **Sim, temos capacidade de desenvolvimento**: Padrão 3 (headless). - **Não, queremos algo pronto**: Padrão 2 (widget embutido). É onde a maioria dos sites acaba. Para o Padrão 2, a próxima decisão é a escolha da plataforma. Isso está em outro texto nosso: [plataformas de carrinho de compras embutível comparadas](https://v3.shoprocket.io/pt/blog/plataformas-de-carrinho-embutivel-comparadas-snipcart-ecwid-gumroad-payhip-shoprocket.md). ## Como é uma integração real do Padrão 2 nas plataformas mais comuns ### WordPress Coloque o snippet de embed num bloco de HTML personalizado (editor de blocos) ou num widget de texto (barra lateral clássica). Não precisa instalar plugin. ### Squarespace Adicione um Bloco de Código em qualquer página. Cole. O widget respeita a largura e o espaçamento do tema do seu Squarespace. ### Webflow Elemento Embed → cole. A exportação estática do Webflow continua incluindo o embed ao publicar. ### Framer Elemento Embed → cole. As ferramentas de desenvolvimento do Framer facilitam colocar o snippet numa seção específica. ### Carrd Componente de código personalizado (recurso de plano pago). Sites de página única com uma aba de loja, simples. ### Notion Use uma página pública do Notion como seu site, embuta por meio de um serviço como Super ou Potion e cole o snippet. Vira uma loja de verdade. ### HTML estático / Jekyll / Hugo / 11ty Cole o snippet no template que renderiza a página da sua loja. Mais nada. ## O que muda no seu site depois da integração Menos do que você imagina. - Suas páginas atuais continuam como estão. Nenhuma edição de tema é necessária. - O script carrega de forma assíncrona, então a velocidade da página praticamente não muda (as notas do Lighthouse se mantêm). - Produtos, preços e estoque ficam no seu painel de comércio, não no seu CMS. - Os dados dos clientes (pedidos, e-mails, endereços) vão para a plataforma de comércio. Seu CMS não precisa lidar com nada disso. O que você NÃO precisa fazer: - Reconstruir seu site - Instalar um plugin de CMS - Migrar conteúdo - Contratar um desenvolvedor - Comprar um domínio novo > **Dica:** Teste o widget primeiro numa página de staging. Ele não deveria conflitar com nada, mas vale verificar com o seu tema específico antes de colocá-lo numa página de loja em produção. ## Quando realmente trocar de plataforma Às vezes a resposta É "migrar para uma plataforma de comércio completa". Sinais: - Você fatura US$ 100 mil+/mês e a função principal do seu site passou a ser vender, não a marca. - Você precisa de integração com PDV (varejo físico + online). - Seu catálogo de produtos tem mais de 1.000 SKUs com atualizações constantes. Nessa escala, a Shopify Plus ou algo parecido começa a se pagar. Para a maioria dos sites independentes abaixo desse patamar, embutir é mais barato, mais rápido e preserva o site que você já tem. ## Resumo - **Link de checkout hospedado**: o mais rápido, quebra a UX no pagamento. Bom para produtos únicos. - **Widget embutido**: mantém o cliente no seu site, sem trocar de plataforma. Um bom padrão. - **API headless**: construa o seu, meses de trabalho. Só vale a pena em escala. [Experimente o embed do Shoprocket no seu site atual](https://app-v3.shoprocket.io/signup). Teste grátis, sem cartão. Preços: [a partir de US$ 29](https://v3.shoprocket.io/pt/precos.md), zero taxa de transação em todos os planos. --- - HTML version: https://v3.shoprocket.io/pt/blog/como-adicionar-ecommerce-a-qualquer-site-sem-trocar-de-plataforma - Language: Português (pt) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-zu-jeder-website-hinzufuegen-ohne-plattformwechsel.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [English](https://v3.shoprocket.io/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Español](https://v3.shoprocket.io/es/blog/anadir-ecommerce-a-cualquier-web-sin-cambiar-de-plataforma.md), [Français](https://v3.shoprocket.io/fr/blog/ajouter-ecommerce-a-un-site-sans-changer-de-plateforme.md), [עברית](https://v3.shoprocket.io/he/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/cara-menambahkan-ecommerce-ke-situs-web-mana-pun-tanpa-ganti-platform.md), [Italiano](https://v3.shoprocket.io/it/blog/aggiungere-ecommerce-a-qualsiasi-sito-senza-cambiare-piattaforma.md), [日本語](https://v3.shoprocket.io/ja/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/kaip-prideti-el-prekyba-prie-bet-kurios-svetaines-nekeiciant-platformos.md), [Norsk](https://v3.shoprocket.io/nb/blogg/legg-nettbutikk-til-et-hvilket-som-helst-nettsted-uten-a-bytte-plattform.md), [Nederlands](https://v3.shoprocket.io/nl/blog/webshop-toevoegen-aan-elke-website-zonder-te-verhuizen.md), [Polski](https://v3.shoprocket.io/pl/blog/jak-dodac-e-commerce-do-dowolnej-strony-bez-zmiany-platformy.md), [Română](https://v3.shoprocket.io/ro/blog/cum-adaugi-ecommerce-pe-orice-site-fara-sa-schimbi-platforma.md), [Русский](https://v3.shoprocket.io/ru/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [ไทย](https://v3.shoprocket.io/th/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Türkçe](https://v3.shoprocket.io/tr/blog/platform-degistirmeden-web-sitesine-eticaret-ekleme.md), [中文](https://v3.shoprocket.io/zh/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md)