Das GemPages HTML-zu-Shopify-Kit ist ein kostenloses Toolkit, das Ihnen bei der Verwendung hilft Claude von Anthropic um beliebigen HTML-Code in gültigen HTML-Code umzuwandeln .gempages Datei.
Sobald die Datei generiert wurde, können Sie sie direkt importieren in GemPages Landing Page Builder auf Shopify. GemPages verwaltet Seiten-URL und -Titel, die Sichtbarkeit von Kopf- und Fußzeile sowie die Suchmaschinenindexierung – alles ohne dass benutzerdefinierter Shopify-Theme-Code erforderlich ist.
Was ist der GemPages HTML-zu-Shopify-Kit?
Sie haben eine HTML-Seite – sei es ein Advertorial, eine Liste oder eine Landingpage, ob KI-generiert oder manuell programmiert –, die in Ihrem Browser korrekt angezeigt wird. Doch nach der Veröffentlichung auf Shopify überschreibt das Theme Ihr Design, das Layout wird fehlerhaft dargestellt oder Sie müssen die Seite in Shopify Liquid konvertieren, damit sie funktioniert.
Das GemPages HTML-zu-Shopify-Kit GemPages ist ein kostenloses Toolkit, das Ihren HTML-Code in eine Datei packt, die GemPages direkt auf Shopify veröffentlicht. Ihr HTML-Code wird unverändert übertragen – GemPages konvertiert ihn in Liquid, verwaltet die Seiten-URL und den Titel, blendet Kopf- und Fußzeile aus und steuert die Suchmaschinenindizierung. All dies würde andernfalls benutzerdefinierten Shopify-Theme-Code erfordern.
Was dieses Toolkit leistet und was nicht
Was es tut:
- Konvertiert Ihr HTML in Shopify-kompatibles Liquid; Sie müssen das Liquid nicht selbst schreiben.
- Veröffentlicht die Seite auf Shopify, ohne dass Ihr Theme das Design überschreibt.
- Verwaltet Seiten-URL und Seitentitel über GemPages.
- Blendet Kopf- und Fußzeile aus So steht Ihre Seite für sich allein.
- Blockiert bei Bedarf die Suchmaschinenindexierung (noindex / nofollow).Dies ist besonders wertvoll bei bezahlten Anzeigen, da die Seite nur für Anzeigenkunden sichtbar sein und nicht von Google indexiert werden soll.
Was es nicht tut:
- Die importierte Seite ist nicht editierbar durch Drag-and-Drop-Elemente von GemPages.
- Sie verfeinern zuerst Ihr HTML – mit KI, von Hand, wie auch immer Sie arbeiten – bis es Ihren Erwartungen entspricht, dann übernimmt GemPages die Bereitstellung.
- Dieser Workflow ist für folgende Zwecke konzipiert: Vorverkaufsseiten, Advertorials und eigenständige Landingpages — Es unterstützt keine Produktblöcke oder Integrationen mit anderen Shopify-Apps.
Was Sie benötigen
Sie benötigen drei Dinge:
1. GemPages ist in Ihrem Shopify-Shop installiert.. Installieren GemPages Landing Page Builder in Ihrem Shopify-Shop.
2. Ein bezahltes Claude-KontoClaude Pro, Team oder Enterprise. Die kostenlose Version beinhaltet nicht ProjekteDas ist die Funktion, die wir zum Einrichten verwenden. Sie können sich hier anmelden: Claude.ai.
3. Die Toolkit-Dateien: ein kleines Paket mit 4 Dateien darin.
Laden Sie das Toolkit-Paket hier herunter: gempages-ai-Projekt
| Reichen Sie das | Was sie tut, |
CLAUDE.md |
Sagt Claude, wie er sich bei dieser Aufgabe verhalten soll. |
SKILL.md |
Bringt Claude die Umwandlungsfähigkeit bei |
page_schema.md |
Die technischen Spezifikationen für eine GemPages-Seite |
build_gempages.py |
Ein Skript, das die endgültige Datei verpackt |
Hier sind einige zusätzliche HTML-Vorlagen von GemPages, die im Toolkit-Paket enthalten sind. Sie können diese als Referenz oder Ausgangspunkt verwenden, um mit Claude einfacher eigene Inhalte zu erstellen: HTML-Vorlage für KI-Generierung
Zwei Möglichkeiten zur Verwendung des Export-Builders
Es gibt zwei Einrichtungsoptionen, je nachdem, wie Sie auf Claude zugreifen:
| Funktion | Option A (Web) | Option B (Desktop) |
|---|---|---|
| Plattform | claude.ai (Browser) | Claude Desktop App |
| Ausgang | JSON-Inhalt (Text) | Importbereit .gempages Datei |
| Python-Skript ausführen? | Ja, manuell | Nein, Claude kümmert sich darum. |
| Zusätzliche Installation? | Keine Präsentation | Claude Desktop-App erforderlich |
| Am besten geeignet, | Schnelle Einrichtung, jedes Gerät | Optimierter, durchgängiger Workflow |
Option A: Claude im Web (claude.ai)
Schritt 1: Ein neues Projekt erstellen
- Öffne Claude.ai und melde dich an.
- Klicken Sie in der linken Seitenleiste auf Projekte.
- Klicken Sie auf Neues Projekt.
- Nennen Sie es: GemPages Export Builder (oder ein anderer Name Ihrer Wahl).
- Im Beschreibung Feld, fügen Sie dies ein:
Konvertieren Sie HTML-Code in eine gültige .gempages-Datei, die direkt in den GemPages-Seitenersteller auf Shopify importiert werden kann.
- Klicken Sie auf Erschaffung.
Schritt 2: Benutzerdefinierte Anweisungen hinzufügen
Die benutzerdefinierten Anweisungen informieren Claude wie sich innerhalb dieses Projekts zu verhalten.
- Schauen Sie in Ihrem neuen Projekt in der rechten Seitenleiste nach Benutzerdefinierte Anweisungen.
- Öffnen Sie den Microsoft Store auf Ihrem Windows-PC
CLAUDE.mdÖffnen Sie die Datei auf Ihrem Computer mit einem beliebigen Texteditor. Notepad (Windows) oder TextEdit (Mac) funktionieren einwandfrei, Sie benötigen kein spezielles Programm. - Auswählen alle Fügen Sie den Inhalt in das Feld „Benutzerdefinierte Anweisungen“ in Ihrem Projekt ein.
- Klicken Sie auf Gespeichert.
Schritt 3: Laden Sie die Projektwissensdateien hoch
Das Projekt „Wissen“ ist eine Sammlung von Referenzdateien, die Claude bei Bedarf einsehen kann. Wir laden hier drei Dateien hoch.
- Finden Sie in Ihrem Projekt die Projektkenntnisse Abschnitt (normalerweise in der rechten Seitenleiste).
- Klicken Sie auf Inhalte hinzufügen (der Upload-Button).
- Laden Sie diese drei Dateien nacheinander hoch:
SKILL.mdpage_schema.mdbuild_gempages.py
Schritt 4: Testen Sie es
Alles ist eingerichtet. Jetzt kann es losgehen. Öffnen Sie einen neuen Chat innerhalb des Projekts und probieren Sie diese Eingabeaufforderungen aus, um zu überprüfen, ob alles funktioniert:
Erstelle mir eine einfache Beispiel-.gempages-Datei.
Bitte konvertieren Sie meinen HTML-Code in eine .gempages-Datei, damit ich ihn in GemPages auf Shopify importieren kann.
Option B: Claude Desktop-App (Cowork-Modus)
build_gempages.py direkt und liefern Sie das fertige Produkt .gempages Datei — keine lokale Python-Installation erforderlich.Schritt 1: Stellen Sie sicher, dass Sie die Claude-Desktop-App installiert haben.
Downloaden Sie es von claude.ai/download Falls Sie noch kein Konto haben, melden Sie sich mit Ihrem kostenpflichtigen Konto an.
Schritt 2: Cowork-Modus aktivieren
Öffnen Sie die Desktop-App, gehen Sie zu Ihren Einstellungen und stellen Sie sicher, dass Mitarbeit ist aktiviert. (Cowork ermöglicht es Claude, Code auf Ihrem Computer sicher und in einer Sandbox auszuführen.)
Schritt 3: Projekt erstellen und Dateien hochladen
- Neues Projekt erstellen, ihm einen Namen geben GemPages Export Builder (oder was immer Sie wollen).
- Wenn Sie gefragt werden, klicken Sie auf Ordner auswählen
- Wählen Sie einen Ordner auf Ihrem Computer (oder erstellen Sie einen solchen), z. B. GemPages Export Builder
- Claude hat nun Lese- und Schreibzugriff auf diesen Ordner.
Schritt 4: Projektdateien hinzufügen
Kopieren Sie alle Dateien aus diesem Paket in den von Ihnen ausgewählten Ordner:
CLAUDE.mdSKILL.mdpage_schema.mdbuild_gempages.py
Schritt 5: Testen Sie es
Öffnen Sie einen neuen Chat innerhalb des Projekts und verwenden Sie dieselben Eingabeaufforderungen wie in Option A. Dieses Mal wird Claude die Datei automatisch verpacken und direkt im Chat bereitstellen.
Wie man die .gempages Datei in GemPages hochladen
Nachdem Claude Ihre generiert hat .gempages Der letzte Schritt ist das Importieren der Datei in GemPages Landing Page Builder.
Schritt 1: Öffnen Sie das GemPages-Dashboard
Öffnen Sie in Ihrem Shopify-Adminbereich die GemPages-App und navigieren Sie zu Seiten .
Schritt 2: Hochladen der .gempages Reichen Sie das
Ganz oben im Pages-Dashboard, clecken Importseite.
Wählen Datei hinzufügen
Wähle aus .gempages Datei von Ihrem Computer
Schritt 3: Seite importieren
Klicken Sie auf Import zu bestätigen.
Vielen Dank für Ihre Kommentare