As Kit GemPages HTML para Shopify é um conjunto de ferramentas gratuito que ajuda você a usar Claude por Antrópico para converter qualquer código HTML em um código válido .gempages arquivo.
Uma vez gerado, você pode importar o arquivo diretamente para... Construtor de Landing Pages GemPages Na Shopify, você pode editá-la visualmente como qualquer outra página do GemPages, sem precisar programar.
O que é Kit GemPages HTML para Shopify?
Você tem uma página HTML — um publieditorial, uma lista, uma landing page, criada por IA ou codificada manualmente — que é exibida corretamente no seu navegador. Mas, ao publicá-la no Shopify, o tema sobrescreve seu design, o layout quebra ou você precisa convertê-la para Shopify Liquid para que funcione.
As Kit GemPages HTML para Shopify é um conjunto de ferramentas gratuito que empacota seu HTML em um arquivo que o GemPages publica diretamente no Shopify. Seu HTML é enviado como está — o GemPages o converte para Liquid, gerencia a URL e o título da página, oculta o cabeçalho e o rodapé e controla a indexação nos mecanismos de busca. Tudo isso exigiria código personalizado no tema do Shopify.
O que este conjunto de ferramentas faz e o que ele não faz.
O que faz:
- Converte seu HTML em Liquid compatível com Shopify; você não precisa escrever código Liquid.
- Publica a página no Shopify sem que o seu tema sobrescreva o design.
- Gerencia o URL e o título da página através do GemPages.
- Oculta o cabeçalho e o rodapé para que sua página seja independente.
- Bloqueia a indexação dos mecanismos de busca quando necessário (noindex / nofollow)Isso é especialmente útil ao veicular anúncios pagos, onde você deseja que a página seja visível apenas para o tráfego de anúncios, e não indexada pelo Google.
O que não faz:
- A página importada é não editável através de elementos de arrastar e soltar do GemPages.
- Primeiro, você refina seu HTML — com IA, manualmente, da maneira que preferir — até que ele corresponda às suas expectativas. Em seguida, o GemPages cuida da publicação.
- Este fluxo de trabalho foi projetado para Páginas de pré-venda, publieditoriais e páginas de destino independentes. — não oferece suporte a blocos de produtos ou integrações com outros aplicativos da Shopify.
O que você precisará
Você vai precisar de três coisas:
1. GemPages instalado na sua loja Shopify. Instale Construtor de Landing Pages GemPages na sua loja Shopify.
2. Uma conta Claude pagaClaude Pro, Team ou Enterprise. O plano gratuito não inclui Projetos, que é o recurso que usamos para configurar isso. Você pode se inscrever em claude.ai.
3. Os arquivos do conjunto de ferramentas: um pequeno pacote com 4 arquivos dentro.
Faça o download do pacote de ferramentas aqui: projeto gempages-ai
| Envie o | O que ele faz |
CLAUDE.md |
Explica a Claude como ele deve se comportar para realizar essa tarefa. |
SKILL.md |
Ensina a Claude a habilidade de conversão. |
page_schema.md |
Especificações técnicas para uma página GemPages |
build_gempages.py |
Um script que empacota o arquivo final. |
Aqui estão alguns modelos HTML adicionais do GemPages incluídos no pacote de ferramentas. Você pode usá-los como referência ou ponto de partida para gerar seu próprio conteúdo com o Claude com mais facilidade: modelo-html-para-geração-de-IA
Duas maneiras de usar o Construtor de Exportação
Existem duas opções de configuração, dependendo de como você acessa o Claude:
| Característica | Opção A (Web) | Opção B (Desktop) |
|---|---|---|
| Plataforma | claude.ai (navegador) | Aplicativo de desktop Claude |
| saída | Conteúdo JSON (texto) | Pronto para importar .gempages lima |
| Executar script Python? | Sim, manualmente | Não, Claude cuida disso. |
| Instalação adicional? | nenhum | É necessário o aplicativo Claude Desktop. |
| Destaques | Configuração rápida, em qualquer dispositivo. | Fluxo de trabalho simplificado e completo |
Opção A: Claude na web (claude.ai)
Passo 1: Criar um novo projeto
- Abra claude.ai e entre.
- Na barra lateral esquerda, clique em Projetos.
- Clique Novo projeto.
- Diga: Construtor de Exportação do GemPages (ou qualquer nome que você preferir).
- De acordo com o relatório Descrição campo, cole isto:
Converta o código HTML em um arquivo .gempages válido que possa ser importado diretamente para o construtor de páginas GemPages no Shopify.
- Clique Criar.
Passo 2: Adicionar instruções personalizadas
Instruções personalizadas informam a Claude como comportar-se dentro deste Projeto.
- Dentro do seu novo projeto, observe a barra lateral direita para Instruções personalizadas.
- Abra o
CLAUDE.mdAbra o arquivo no seu computador com qualquer editor de texto. O Bloco de Notas (Windows) ou o TextEdit (Mac) funcionam perfeitamente, você não precisa de nada especial. - Selecionar todos os Copie o conteúdo e cole-o no campo "Instruções Personalizadas" do seu projeto.
- Clique Economize.
Etapa 3: Carregar os arquivos de conhecimento do projeto
O Projeto Knowledge é um conjunto de arquivos de referência que Claude pode ler sempre que precisar. Vamos carregar 3 arquivos aqui.
- No seu projeto, encontre o Conhecimento do projeto seção (geralmente na barra lateral direita).
- Clique Adicionar conteúdo (o botão de upload).
- Faça o upload destes três arquivos um de cada vez:
SKILL.mdpage_schema.mdbuild_gempages.py
Etapa 4: teste
Está tudo pronto. Hora de usar. Abra um novo chat dentro do projeto e tente estas instruções para verificar se tudo está funcionando:
Crie um arquivo .gempages de exemplo simples para mim.
Por favor, converta meu HTML em um arquivo .gempages para que eu possa importá-lo para o GemPages no Shopify.
Opção B: Aplicativo Claude para desktop (modo de trabalho colaborativo)
build_gempages.py diretamente e entregar o produto finalizado .gempages arquivo — nenhuma configuração local do Python é necessária.Passo 1: Certifique-se de ter o aplicativo Claude para desktop.
Faça o download de claude.ai/download Se você ainda não tem, faça login com sua conta paga.
Passo 2: Ative o modo de trabalho colaborativo
Abra o aplicativo para desktop, acesse suas configurações e certifique-se de que... cowork Está ativado. (O Cowork permite que Claude execute código no seu computador de forma segura e isolada.)
Etapa 3: Crie o projeto e carregue os arquivos.
- Crie um novo projeto e dê um nome a ele. Construtor de Exportação do GemPages (ou qualquer outra coisa que você queira).
- Quando solicitado, clique Selecionar pasta
- Escolha (ou crie) uma pasta no seu computador, por exemplo Construtor de Exportação do GemPages
- Claude agora terá acesso de leitura/gravação a essa pasta.
Etapa 4: Adicione os arquivos do projeto
Copie todos os arquivos deste pacote para a pasta que você selecionou:
CLAUDE.mdSKILL.mdpage_schema.mdbuild_gempages.py
Etapa 5: Teste
Abra um novo chat dentro do projeto e use as mesmas instruções da Opção A. Desta vez, Claude irá empacotar o arquivo automaticamente e entregá-lo diretamente no chat.
Como importar o .páginas gem Arquivo no GemPages
Depois que Claude gerar o seu .gempages O último passo é importá-lo para o arquivo. Construtor de Landing Pages GemPages.
Passo 1: Abra o painel de controle do GemPages
Dentro do painel de administração da Shopify, abra o aplicativo GemPages e navegue até... PÁGINAS seção.
Passo 2: Carregue o .gempages Envie o
Na parte superior do painel de controle do Pages, clamber Página de importação.
Escolha Adicionar arquivo
Selecione os .gempages arquivo do seu computador
Passo 3: Importar a página
Clique Importar para confirmar.
Obrigado por seus comentários