Le Kit GemPages HTML vers Shopify est une boîte à outils gratuite qui vous aide à utiliser Claude par Anthropic convertir n'importe quel code HTML en un code valide .gempages fichier.
Une fois généré, vous pouvez importer le fichier directement dans Générateur de pages de destination GemPages Sur Shopify, GemPages gère l'URL et le titre de la page, la visibilité de l'en-tête et du pied de page, ainsi que l'indexation par les moteurs de recherche, le tout sans nécessiter de code de thème Shopify personnalisé.
Quel est le Kit GemPages HTML vers Shopify?
Vous avez une page HTML (un article publicitaire, une liste, une page de destination, créée par IA ou codée manuellement) qui s'affiche correctement dans votre navigateur. Mais une fois déployée sur Shopify, le thème remplace votre design, la mise en page est incorrecte, ou vous devez la convertir en Shopify Liquid pour qu'elle fonctionne.
Le Kit GemPages HTML vers Shopify GemPages est un outil gratuit qui compile votre code HTML en un fichier que GemPages publie directement sur Shopify. Votre code HTML est envoyé tel quel ; GemPages le convertit en Liquid, gère l’URL et le titre de la page, masque l’en-tête et le pied de page, et contrôle l’indexation par les moteurs de recherche. Sans cela, il faudrait un thème Shopify personnalisé.
Ce que fait cette boîte à outils, et ce qu'elle ne fait pas
Ce qu'il fait:
- Convertit votre HTML en Liquid compatible avec Shopify ; vous n'avez pas besoin d'écrire de code Liquid vous-même.
- Publie la page sur Shopify sans que votre thème ne modifie le design.
- Gère l'URL et le titre des pages via GemPages.
- Masque l'en-tête et le pied de page Votre page est donc autonome.
- Bloque l'indexation par les moteurs de recherche lorsque cela est nécessaire (noindex / nofollow), particulièrement utile lors de la diffusion de publicités payantes, lorsque vous souhaitez que la page soit visible uniquement pour le trafic publicitaire, et non indexée par Google.
Ce qu'il ne fait pas :
- La page importée est non modifiable grâce aux éléments glisser-déposer de GemPages.
- Vous affinez d'abord votre code HTML — avec l'IA, manuellement, ou selon votre méthode de travail — jusqu'à ce qu'il corresponde à vos attentes, puis GemPages se charge du déploiement.
- Ce flux de travail est conçu pour pages de prévente, publi-reportages et pages de destination autonomes — Il ne prend pas en charge les blocs de produits ni les intégrations avec d'autres applications Shopify.
Ce qu'il vous faut
Vous aurez besoin de trois choses :
1. GemPages installé sur votre boutique Shopify. Installer Générateur de pages de destination GemPages sur votre boutique Shopify.
2. Un compte Claude payéClaude Pro, Team ou Enterprise. Le forfait gratuit n'inclut pas Projets, c'est la fonctionnalité que nous utilisons pour configurer cela. Vous pouvez vous abonner à claude.ai.
3. Les fichiers de la boîte à outils: un petit paquet contenant 4 fichiers.
Téléchargez le kit d'outils ici : projet gempages-ai
| Fichier | Ce qu'il fait |
CLAUDE.md |
Indique à Claude comment se comporter pour cette tâche |
SKILL.md |
Enseigne à Claude la compétence de conversion |
page_schema.md |
Spécifications techniques d'une page GemPages |
build_gempages.py |
Un script qui empaquete le fichier final |
Voici quelques modèles HTML supplémentaires de GemPages inclus dans le kit d'outils. Vous pouvez les utiliser comme références ou points de départ pour générer plus facilement votre propre contenu avec Claude : modèle HTML pour la génération d'IA
Deux façons d'utiliser le générateur d'exportation
Il existe deux options de configuration selon la façon dont vous accédez à Claude :
| Fonctionnalité | Option A (Web) | Option B (Ordinateur de bureau) |
|---|---|---|
| Plateforme complète | claude.ai (navigateur) | Application de bureau Claude |
| Sortie | Contenu JSON (texte) | Prêt à importer .gempages filet |
| Exécuter un script Python ? | Oui, manuellement | Non, Claude s'en occupe. |
| Installation supplémentaire ? | Aucun | Application de bureau Claude requise |
| Meilleur pour | Installation rapide, compatible avec tous les appareils | Flux de travail simplifié de bout en bout |
Option A : Claude sur le web (claude.ai)
Étape 1 : Créer un nouveau projet
- Ouvrez claude.ai et connectez-vous.
- Dans la barre latérale gauche, cliquez sur Projets.
- Cliquez à nouveau Nouveau projet.
- Nommez-le : Générateur d'exportation GemPages (ou tout autre nom de votre choix).
- Dans l' Description champ, collez ceci :
Convertissez le code HTML en un fichier .gempages valide pouvant être directement importé dans l'éditeur de pages GemPages de Shopify.
- Cliquez à nouveau Créer.
Étape 2 : Ajouter des instructions personnalisées
Les instructions personnalisées indiquent à Claude how se comporter au sein de ce projet.
- Dans votre nouveau projet, consultez la barre latérale droite pour Consignes personnalisées.
- Ouvrez le
CLAUDE.mdOuvrez le fichier sur votre ordinateur avec n'importe quel éditeur de texte. Le Bloc-notes (Windows) ou TextEdit (Mac) conviennent parfaitement, vous n'avez besoin de rien de particulier. - Sélectionner tous Copiez le contenu et collez-le dans le champ « Instructions personnalisées » de votre projet.
- Cliquez à nouveau Enregistrer.
Étape 3 : Téléverser les fichiers de connaissances du projet
Le projet Knowledge est un ensemble de fichiers de référence que Claude peut consulter à tout moment. Nous allons télécharger 3 fichiers ici.
- Dans votre projet, trouvez le Connaissance du projet section (généralement dans la barre latérale droite).
- Cliquez à nouveau Ajouter du contenu (le bouton de téléchargement).
- Téléversez ces trois fichiers un par un :
SKILL.mdpage_schema.mdbuild_gempages.py
Étape 4 : Testez-le
Tout est prêt. Il est temps de l'utiliser. Ouvrez une nouvelle conversation dans le projet et essayez ces invites pour vérifier que tout fonctionne correctement :
Créez-moi un fichier .gempages d'exemple simple.
Veuillez convertir mon fichier HTML en un fichier .gempages afin que je puisse l'importer dans GemPages sur Shopify.
Option B : Application de bureau Claude (mode coworking)
build_gempages.py directement et livrer le produit fini .gempages fichier — aucune installation Python locale n'est nécessaire.Étape 1 : Assurez-vous d'avoir l'application de bureau Claude
Téléchargez-le depuis claude.ai/télécharger Si vous n'en avez pas déjà un, connectez-vous avec votre compte payant.
Étape 2 : Activer le mode Cowork
Ouvrez l'application de bureau, accédez à vos paramètres et assurez-vous collègue est activé. (Cowork permet à Claude d'exécuter du code sur votre ordinateur de manière sécurisée et isolée.)
Étape 3 : Créer le projet et télécharger les fichiers
- Créez un nouveau projet, nommez-le Générateur d'exportation GemPages (ou tout ce que vous voulez).
- Lorsque vous êtes invité, cliquez sur Sélectionner le dossier
- Choisissez (ou créez) un dossier sur votre ordinateur, par exemple Générateur d'exportation GemPages
- Claude aura désormais un accès en lecture/écriture à ce dossier.
Étape 4 : Ajouter les fichiers du projet
Copiez tous les fichiers de ce paquet dans le dossier que vous avez sélectionné :
CLAUDE.mdSKILL.mdpage_schema.mdbuild_gempages.py
Étape 5 : Testez-le
Ouvrez une nouvelle conversation dans le projet et utilisez les mêmes instructions que dans l'option A. Cette fois-ci, Claude empaquetera automatiquement le fichier et le livrera directement dans la conversation.
Comment importer le .gempages Fichier dans GemPages
Après que Claude ait généré votre .gempages Le fichier, la dernière étape consiste à l'importer dans Générateur de pages de destination GemPages.
Étape 1 : Ouvrez le tableau de bord GemPages
Dans votre interface d'administration Shopify, ouvrez l'application GemPages et accédez à Pages .
Étape 2 : Téléchargez le .gempages Fichier
En haut du tableau de bord Pages, cCliquez Page d'importation.
Choisissez Ajouter un fichier
Sélectionnez le .gempages fichier de votre ordinateur
Étape 3 : Importer la page
Cliquez à nouveau Global pour confirmer.
Comment convertir un fichier HTML de page sans interface graphique en une page web ? .gempages Fichier
Si vous avez déjà le Fichier HTML pour une page sans interface graphiqueVous pouvez utiliser Claude avec le projet Headless Page dédié pour le convertir en un fichier valide. .gempages filet qui peuvent être importés dans GemPages.
Le flux de travail est similaire à celui du kit HTML vers Shopify présenté ci-dessus, mais Les pages sans interface graphique utilisent un package de projet distinct et un flux d'importation..
Étape 1 : Téléchargez le projet de page sans interface graphique
Téléchargez ici le package dédié au projet Headless Page :
Étape 2 : Mise en place du projet Claude
La configuration de base est la même que celle décrite dans Option A : Claude sur le web or Option B : Application de bureau Claude au dessus.
Au lieu d'utiliser les fichiers du kit HTML-to-Shopify, utilisez les fichiers inclus dans le Projet de page sans interface graphique (ZIP).
Une fois le projet mis en place, fournissez à Claude vos Fichier HTML de page sans interface graphique et suivez les instructions incluses dans le projet pour générer le .gempages fichier.
Étape 3 : Importez le .gempages Fichier dans GemPages
Le flux d'importation est différent pour les pages sans interface graphique :
- Ouvrez le GemPages application dans votre interface d'administration Shopify.
- Rendez-vous dans la section Pages sans tête languette.
- Cliquez à nouveau Page d'importation et téléchargez le fichier généré
.gempagesfichier. - Attendez que l'importation soit terminée, puis ouvrez la page dans l'éditeur.
Merci pour vos commentaires