Edite o visual da sua loja conversando com o Claude (sem precisar de programador)

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. :slightly_smiling_face:


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.

:information_source: 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)

  1. Uma conta no Claude com plano pagoPro, Max ou Team. O editor pela web não funciona no plano gratuito.

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

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

:bulb: 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:

  1. Me mande aqui o seu usuário do GitHub (ex.: @seunome).

  2. 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).

  1. Eu te confirmo aqui quando estiver liberado. Só então siga para a conexão abaixo.

:warning: 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”. :slightly_smiling_face:


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.

  1. Entre em claude.ai/code e faça login na sua conta do Claude.

  2. O Claude vai avisar que precisa conectar ao GitHub. Clique no botão para conectar.

  3. 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;

  • :white_check_mark: O correto é uma tela de “Authorize / Install” do app do Claude.

  • :x: 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.

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

  2. Confirme. O GitHub te devolve para o Claude, já conectado. :white_check_mark:

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

:mag_right: 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

| | :globe_with_meridians: Web — claude.ai/code (recomendado) | :computer: 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

:point_right: 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.

:warning: 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/code no 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.”

:bulb: 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.

:framed_picture: 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.

:point_right: Abra esse link e confira com calma — no computador e no celular.

6. Gostou? Publique.

  • :white_check_mark: Ficou bom: clique no botão verde Merge pull request (Publicar). Em alguns minutos a mudança entra no ar sozinha. Pronto!

  • :x: 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

  • :art: Cores da marca e do tema

  • :framed_picture: Banners e o carrossel da página inicial

  • :abc: Textos, títulos e chamadas

  • :label: Logotipo e ícone

  • :page_facing_up: Páginas de conteúdo (Sobre nós, Trocas, Entrega, Contato…) e posts do blog

  • :brick: Layout do cabeçalho, rodapé, menus e barra de avisos do topo

  • :shopping_cart: 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. :rocket: