Agora você mesmo pode mudar o visual da sua loja com um assistente de inteligência artificial (o Claude). Você não precisa saber programar e não precisa de terminal: você descreve o que quer, o assistente prepara a mudança, e você vê como ficou antes de publicar.
Neste passo a passo eu te mostro tudo, do começo ao fim. Qualquer dúvida, é só me responder aqui no tópico. ![]()
Como funciona
Você pede a mudança → o assistente prepara → aparece um link de pré-visualização pra você conferir → se gostar, você aperta Publicar → a loja no ar é atualizada sozinha.
Nada vai para a sua loja de verdade sem a sua aprovação. Enquanto você não apertar Publicar, o site que seus clientes veem continua exatamente igual.
Funciona melhor nas lojas v2 que usam Cloud Commerce. Nelas, cada pedido gera automaticamente um link de pré-visualização antes de qualquer coisa ir pro ar — é essa “prévia” que torna a edição pelo Claude segura pra quem não é técnico. Nas lojas que estão na v1 essa prévia automática não existe, então sugerimos que faça isso junto com testes locais para conferir o resultado antes de publicar na loja. Não sabe qual é a sua versão ou tem interesse de migrar sua loja para a v2? Entre em contato com nosso suporte que te ajudamos.
O que você vai precisar (3 coisas)
-
Uma conta no Claude com plano pago — Pro, Max ou Team. O editor pela web não funciona no plano gratuito.
-
Uma conta no GitHub (gratuita). O GitHub é o sistema onde ficam guardados os arquivos da sua loja. Se não tiver, crie em github.com.
-
O seu acesso liberado por nós (passo abaixo). Sem essa liberação, a sua loja não aparece para o assistente — mesmo que todo o resto esteja certo.
Só isso. Você não vai precisar criar “token”, “chave de acesso” (PAT) nem instalar nada técnico. Se em algum momento uma tela te pedir para gerar um token/PAT, pare — você entrou pelo caminho errado. O caminho certo só pede para autorizar o aplicativo do Claude (explico adiante). Na dúvida, me chame aqui no tópico.
Passo 0 — Peça o seu acesso (faça isto primeiro)
Provavelmente você ainda não tem acesso aos arquivos da sua loja. Então o primeiro passo é comigo:
-
Me mande aqui o seu usuário do GitHub (ex.:
@seunome). -
Eu faço duas liberações (é rápido e você não precisa fazer nada):
-
adiciono você como colaborador do repositório da sua loja (com permissão de publicar);
-
garanto que a organização da sua loja está liberada para o aplicativo do Claude (esse é o detalhe que costuma travar quando alguém pula esta etapa — ver “Bastidores” no fim do guia).
- Eu te confirmo aqui quando estiver liberado. Só então siga para a conexão abaixo.
Enquanto eu não confirmar, não adianta seguir — a sua loja não vai aparecer no Claude e você pode acabar caindo em telas de token que não são o caminho. Espere o meu “ok”. ![]()
Primeira vez — Conectar o Claude ao seu GitHub (só uma vez)
Isto é o que dá ao assistente permissão para preparar as mudanças e abrir o “pedido de publicação” em seu nome — sempre esperando a sua aprovação. Você faz uma única vez.
-
Entre em claude.ai/code e faça login na sua conta do Claude.
-
O Claude vai avisar que precisa conectar ao GitHub. Clique no botão para conectar.
-
Vai abrir uma tela do próprio GitHub pedindo para autorizar o aplicativo do Claude (o app oficial da Anthropic). Se pedir, faça login no GitHub primeiro. Dê acesso a todos repositórios que queira trabalhar;
-
O correto é uma tela de “Authorize / Install” do app do Claude. -
Se aparecer “Generate new token”, “Personal Access Token (PAT)” ou pedirem para colar um código de token — não é aqui. Feche e me chame.
-
Se o GitHub perguntar quais repositórios liberar, deixe “All repositories” (todos) — ou, se preferir, selecione manualmente a sua loja na lista. O importante é que a sua loja esteja incluída.
-
Confirme. O GitHub te devolve para o Claude, já conectado.

-
Ao abrir uma seção no claude code selecione o repositório que quer trabalhar. Nesse exemplo o foi selecionado o “testestore”.

A sua loja não aparece para escolher, ou deu erro de acesso? Quase sempre é uma destas três coisas: (a) eu ainda não confirmei o seu acesso no Passo 0; (b) a sua loja não foi marcada na tela de autorização; ou (c) falta a liberação do app na organização (bastidor nosso). Nos três casos, é só me chamar aqui que eu verifico — não tente resolver por token/PAT.
Web × Desktop — qual usar? (importante)
O Claude Code existe em duas formas, e elas não são a mesma coisa. Para editar a sua loja, a diferença é grande — então leia com atenção. Para lojista, o certo é a versão web.
A diferença em uma frase
-
Web (
claude.ai/code) trabalha nos repositórios do seu GitHub, na nuvem. A sua loja aparece numa lista, o Claude edita lá em cima e devolve tudo como “pedido de publicação”. Não instala nada no seu computador. -
Desktop (aplicativo no seu computador) trabalha nas pastas que já estão baixadas na sua máquina. Ele não mostra a lista do seu GitHub — você teria que ter a loja clonada no computador antes, e configurar coisas técnicas (incluindo um token). É a ferramenta de quem é programador.
Comparação
| |
Web — claude.ai/code (recomendado) |
Desktop — app no computador |
|—|—|—|
| Quais projetos aparecem | Os repositórios do GitHub conectado (a sua loja aparece na lista) | Só as pastas/repos já baixados na sua máquina — não é a lista do GitHub |
| Onde roda | Na nuvem (ambiente temporário; nada instalado) | No seu computador |
| Precisa clonar a loja antes? | Não | Sim (baixar o repositório localmente) |
| Conexão com o GitHub | OAuth “Authorize” — sem token | Usa o git do seu computador → normalmente exige token/credencial (PAT) |
| Como a mudança vira pré-visualização | Automático: branch + Pull Request com link de preview | Você edita local, mas ainda precisa enviar ao GitHub (push + PR) por conta própria |
| O que dá pra editar | Todos os arquivos de visual/conteúdo da loja | Os mesmos arquivos — e, se o computador tiver as ferramentas, dá pra rodar a loja localmente (isso é coisa de dev) |
| Para quem é | Lojista (sem instalar nada, sem token) | Programador |
Conclusão prática
Se você é lojista, use a versão web (claude.ai/code) no navegador. Ela mostra a sua loja na lista, conecta o GitHub por “Authorize” (sem token) e cuida sozinha do “pedido de publicação” com link de pré-visualização — que é exatamente o fluxo deste guia.
Se em algum momento aparecer pedido de token/PAT, você provavelmente está no app desktop (ou montando uma conexão manual). Volte para o
claude.ai/codeno navegador — lá é sempre “Authorize”, sem token.
O dia a dia — Como fazer uma alteração
1. Abra o assistente
Entre em claude.ai/code (ou abra o aplicativo). Nas próximas vezes você já vai estar logado.
2. Escolha a sua loja
Logo abaixo do campo onde você escreve, há um seletor de repositório. Clique nele e selecione a sua loja (por exemplo mundoquadri-v2). É nela que o assistente vai trabalhar.
Não aparece a sua loja aí? Duas coisas:
- Acabei de liberar seu acesso? A loja pode levar alguns minutos para aparecer na lista (o GitHub e o Claude levam um tempinho para sincronizar). Recarregue a página (F5), reabra o seletor ou busque por parte do nome (“mundoquadri”).
- Se depois disso ainda não aparecer, volte na seção “Primeira vez” e confira se ela foi incluída na autorização — ou me chame aqui que eu verifico o seu acesso.
3. Peça a mudança em português
Escreva, com as suas palavras, o que você quer mudar. Quanto mais claro, melhor. Exemplos que funcionam bem:
-
“Troque o banner principal da home pela imagem em anexo e faça ele levar para a página de pneus.”
-
“Deixe a barra de avisos do topo com o texto: Frete grátis acima de R$ 200.”
-
“Mude a cor principal da loja para um azul mais escuro.”
-
“Atualize o texto da página ‘Trocas e devoluções’ com este conteúdo: …”
-
“Adicione uma vitrine de ‘Mais vendidos’ na página inicial.”
-
“Troque o logotipo pela imagem que estou enviando.”
Se a sua ideia estiver vaga (tipo “deixa mais bonito”), o assistente vai te fazer uma ou duas perguntas rápidas para entender. É só responder.
Sobre enviar imagens (banner, logo, foto): hoje o jeito mais garantido de a imagem chegar ao assistente é por um link/arquivo que o sistema consiga acessar. Se você anexar a imagem e o assistente disser que não conseguiu abrir o arquivo, não se preocupe: é só me chamar aqui no tópico que eu te passo a melhor forma de enviar aquela imagem específica. (Estamos deixando essa parte cada vez mais simples.)
4. Aguarde o assistente preparar e crie o “pedido de publicação”
O assistente prepara a alteração e te avisa quando terminar. Vai aparecer um botão para criar o Pull Request — clique nele. Pense no Pull Request como um “pedido de publicação” que fica esperando a sua aprovação (o Claude já preenche título e descrição pra você).
5. Veja como ficou (pré-visualização)
Poucos minutos depois, dentro desse Pull Request vai aparecer um link de pré-visualização — um endereço temporário que mostra a sua loja já com a mudança, sem afetar o site real.
Abra esse link e confira com calma — no computador e no celular.
6. Gostou? Publique.
-
Ficou bom: clique no botão verde Merge pull request (Publicar). Em alguns minutos a mudança entra no ar sozinha. Pronto! -
Não ficou bom: volte na conversa e peça o ajuste (“o banner ficou grande demais, diminua”), ou clique em Close pull request para descartar. A loja no ar não muda até você publicar.
E é só isso. Quando quiser outra mudança, é só voltar ao passo 3.
O que dá para mudar
-
Cores da marca e do tema -
Banners e o carrossel da página inicial -
Textos, títulos e chamadas -
Logotipo e ícone -
Páginas de conteúdo (Sobre nós, Trocas, Entrega, Contato…) e posts do blog -
Layout do cabeçalho, rodapé, menus e barra de avisos do topo -
Vitrines de produtos na home (mais vendidos, lançamentos, por categoria…)
O que não dá para fazer por aqui
Estas coisas não são “visual”, e o assistente vai te orientar a falar comigo:
-
Meios de pagamento, frete e integrações
-
Domínio da loja e configurações de e-mail
-
Chaves, senhas e credenciais
-
Cadastro de produtos e preços (isso é feito no painel da loja, não aqui)
Precisa de algo dessa lista? Me chame aqui no tópico que eu resolvo com você.
Dúvidas comuns
Corro o risco de quebrar a loja?
Não pela pré-visualização. O assistente é limitado aos arquivos de visual e conteúdo, e nada é publicado sem você apertar Publicar. Se algo ficar estranho, é só não publicar.
A minha loja não aparece para selecionar / deu “erro de acesso”.
Isto é o tropeço mais comum. Verifique, nesta ordem: (1) eu já confirmei o seu acesso no Passo 0? (2) na tela de autorização do GitHub, a sua loja foi incluída? (3) falta a liberação do app na organização (bastidor nosso)? Lembre também que, se o acesso foi liberado agora, a loja pode levar alguns minutos para aparecer — recarregue a página. Me chame aqui que eu confiro tudo em 1 minuto. Não tente resolver criando token/PAT.
Apareceu uma tela pedindo “token” ou “Personal Access Token (PAT)”.
Você entrou pelo caminho errado (provavelmente o app desktop ou uma conexão manual). O fluxo certo, no claude.ai/code pelo navegador, nunca pede token: ele só pede para autorizar o aplicativo do Claude. Feche essa tela e me chame — a gente reconecta do jeito certo.
Não apareceu o link de pré-visualização.
Espere de 3 a 5 minutos após o Pull Request ser criado — a preparação leva um tempinho. Se depois disso não aparecer, me avise no comentário do Pull Request ou aqui no tópico.
Publiquei e quero voltar atrás.
Peça ao assistente para desfazer a última mudança, ou me chame. Sempre dá para reverter.
Posso escrever em inglês?
Pode, mas em português funciona perfeitamente — foi feito para isso.
Quantas mudanças posso fazer?
Quantas quiser. O ideal é uma mudança (ou um conjunto relacionado) por Pull Request — fica mais fácil de conferir e publicar.
Dicas para pedidos que saem redondos
-
Diga em qual página é a mudança (“na home”, “na página de produto”, “no rodapé”).
-
Para banners, informe para onde o clique deve levar e, se tiver, envie as imagens já no tamanho certo (uma para computador e uma para celular).
-
Fale uma coisa de cada vez se for algo grande — dá para encadear vários pedidos na mesma conversa.
-
Não gostou de uma palavra do resultado? Só pedir: “troque ‘promoção’ por ‘oferta’”.
Qualquer dúvida, responda aqui neste tópico que eu te ajudo. ![]()