Wie migrieren Sie Ihr Shopify-Theme zu Online Store 2.0?

Wie migrieren Sie Ihr Shopify-Theme zu Online Store 2.0
Ecommerce, Shopify

Shopify Online Store 2.0 ist eine Sammlung von Funktionen und Verbesserungen bestehender Funktionen, die die Erstellung von Designs und Design-Apps vereinfachen. Dadurch werden die Designs flexibler und einfacher zu pflegen. Es basiert hauptsächlich auf JSON-Vorlagen anstelle von Liquid-Vorlagen. Bisher wurden JSON-Vorlagen nur für die Startseite verwendet, während alle anderen Seiten auf Liquid-Vorlagen basierten.

YSie können Ihr Theme auf Online Store 2.0 migrieren, indem Sie die Liquid-Vorlagen in JSON-Vorlagen konvertieren und den Liquid-Code und HTML in Abschnitte verschieben. Fügen Sie dann die Abschnitte in die JSON-Vorlage ein. Es ist nicht zwingend erforderlich, Ihr Theme auf Online Store 2.0 zu aktualisieren. Sie können das Vintage-Theme (1.0) weiterhin verwenden, wenn es Ihren Anforderungen entspricht.

Umstellung auf Online Store 2.0

Sie können Ihre Designs auf Online Store 2.0 migrieren und dessen Funktionen auf verschiedene Arten nutzen.

  1. Laden Sie ein Online Store 2.0-Design aus dem Shopify Theme Store herunter: Wenn Ihr aktuelles Design keine Online Store 2.0-Funktionen bietet, laden Sie ein Online Store 2.0-Design aus dem Shopify Theme Store herunter. Aktualisieren Sie anschließend das Aussehen und Design des Designs, um Zugriff auf die neuen Funktionen zu erhalten.
  2. Eine neue Version des Themes herunterladen: Wenn Ihr Theme eine aktualisierte Version bereitstellt, die Online Store 2.0 verwendet, fügen Sie die neueste Version des Themes zum Shop hinzu, um Zugriff auf die neuen Funktionen zu erhalten.
  3. Das Theme manuell migrieren:Wenn Ihr Theme keine neue Version mit Online Store 2.0-Funktionen bietet und Sie kein anderes Theme verwenden möchten, können Sie Ihr Theme manuell migrieren. Konvertieren Sie die Liquid-Vorlage in JSON-Vorlagen und verschieben Sie den Liquid-Code und HTML in Abschnitte. Fügen Sie dann die Abschnitte in Ihre neue JSON-Vorlage ein.

Manuelles Migrieren von Vorlagen zu Online Store 2.0

In diesem Artikel erfahren Sie, wie Sie die Codes aus der Liquid-Vorlage in eine Abschnittsdatei verschieben und den Abschnitt in die JSON-Vorlage einfügen. Hier verschieben Sie die Codes aus einer product.liquid-Vorlagendatei in eine product-template.liquid-Abschnittsdatei. Anschließend fügen Sie den Abschnitt in eine neue product.json-Vorlage ein.

Anforderungen:

Stellen Sie sicher, dass Sie diese Schritte ausführen, bevor Sie mit der Migration Ihres Themes beginnen.

  1. Identifizieren Sie das Thema, das Sie migrieren möchten
  2. Wenn Sie Shopify CLI und eine lokale Entwicklungsumgebung zur Migration der Vorlagen verwenden:
    • Installieren Sie die Shopify-CLI auf Ihrem System.
    • Stellen Sie sicher, dass Sie über ein Mitarbeiterkonto oder ein Mitwirkendenkonto für den Shop verfügen, an dem Sie arbeiten möchten, oder dass Sie der Eigentümer des Shops sind. Wenn Sie über ein Mitarbeiterkonto oder ein Mitwirkendenkonto verfügen, müssen Sie über die Berechtigung „Themes verwalten” oder „Themes” für den Shop verfügen. Shop-Eigentümer verfügen standardmäßig über diese Berechtigungen.
    • Notieren Sie sich die URL des Shops.

Schritt 1: Sichern Sie das Theme

Sobald Sie das zu migrierende Theme identifiziert haben, erstellen Sie eine Kopie Ihres Themes.

  1. Wenn Sie das Theme im Code-Editor bearbeiten möchten, duplizieren Sie das Theme und stellen Sie sicher, dass es während der Bearbeitung nicht veröffentlicht ist. Fügen Sie außerdem ein weiteres Duplikat des Themes als Backup hinzu.
    shopify
  2. Wenn Sie die lokale Entwicklungsumgebung und Shopify CLI zum Bearbeiten verwenden, laden Sie die Theme-Dateien mit dem Befehl „shopify theme pull“ herunter.

Schritt 2: Abschnitte identifizieren und Abschnittsverweise entfernen

Um mit der Konvertierung Ihrer Liquid-Vorlage in eine JSON-Vorlage zu beginnen, notieren Sie sich alle {% section %}-Tags und entfernen Sie diese anschließend. Sie müssen diese Verweise entfernen, damit Sie den verbleibenden Code in eine Abschnittsdatei verschieben können. Eine Abschnittsdatei darf keine Verweise auf einen anderen Abschnitt enthalten.

  1. Öffnen Sie das Theme in Ihrer lokalen Entwicklungsumgebung oder Ihrem Code-Editor.
  2. Suchen Sie nun die Datei „product.liquid“ im Verzeichnis „/templates“ und öffnen Sie sie.
  3. Suchen Sie nach allen {% section %}-Tags, notieren Sie deren Namen und wo sich diese Tags befinden. Die Vorlage „product.liquid“ enthält zwei Abschnitte.
    {% section ‚product-template‘ %}
    {% section ‚product-recommendations‘ %}
  4. Die meisten Markups wie Produkttitel, Produktbilder, Schaltflächen zum Hinzufügen zum Warenkorb usw. sind im Abschnitt „Produktvorlage“ enthalten. Der Abschnitt „Produktempfehlungen“ enthält hingegen eine Liste von Produkten, die automatisch als Vorschläge für Kunden ausgewählt werden.
  5. Sobald Sie alle {% section %} Tags notiert haben, löschen Sie diese Tags aus der Vorlage product.liquid.

Schritt 3: Code aus der Vorlage in einen Abschnitt verschieben

Nachdem Sie die {% section %} Tags aus dem Vorlagencode gelöscht haben, müssen Sie diesen Code in einen bestehenden Abschnitt oder einen neuen Abschnitt verschieben.

1. Code zu einem bestehenden Abschnitt hinzufügen

  • Öffnen Sie die Abschnittsdatei, in die Sie den Code einfügen möchten.
  • Kopieren Sie anschließend den restlichen Code der Vorlage „product.liquid“ und fügen Sie ihn in die Abschnittsdatei oberhalb des Tags {% schema %} ein.

2. Code zu einem neuen Abschnitt hinzufügen

  • Erstellen Sie im Verzeichnis /section eine Datei. Zum Beispiel product-template.liquid. Wenn Sie diesen Abschnitt im Code-Editor erstellt haben, löschen Sie den Standardcode aus der Abschnittsdatei.
  • Kopieren Sie anschließend den restlichen Code der Vorlage „product.liquid“ und fügen Sie ihn in die leere Abschnittsdatei ein.

Schritt: 4 Löschen Sie die Liquid-Vorlagendatei.

Nachdem Sie den Code aus der Datei „product.liquid“ verschoben haben, löschen Sie ihn aus dem Verzeichnis „/template“. Sie müssen die Liquid-Vorlagendatei löschen, da sie durch die Datei „product.json“ ersetzt wird. Außerdem können die Dateien „product.liquid“ und „product.json“ nicht gleichzeitig im Verzeichnis „/templates“ abgelegt werden.

Schritt 5: Erstellen Sie eine JSON-Vorlagendatei.

Nachdem Sie die Datei „product.liquid“ gelöscht haben, können Sie eine JSON-Vorlagendatei als Ersatz erstellen.

  1. Erstellen Sie eine neue Datei mit dem Namen product.json im Verzeichnis /template.
    • Wenn Sie den Code-Editor verwenden,
      ➣ Klicken Sie auf „Neue Vorlage hinzufügen“.
      ➢ Wählen Sie dann „Produkt“ aus dem Dropdown-Menü „Vorlage erstellen für“ aus.
      ➣ Wählen Sie dann JSON als Vorlagentyp aus.
    • Wenn Sie die lokale Entwicklungsumgebung verwenden, erstellen Sie eine neue Datei mit dem Namen product.json im Verzeichnis /templates.
  2. Nachdem Sie die Datei „product.json“ erstellt haben, ersetzen Sie den Standardcode dieser Datei durch die folgenden Codes und speichern Sie sie.
{
  "sections": {
    "main": {
      "type": "product-template"
    }
  },
  "order": [
    "main"
  ]
}

Schritt 6: Testen Sie die Vorlage

Nachdem Sie die neue Vorlage erstellt haben, öffnen Sie sie im Theme-Editor, um zu überprüfen, ob sie korrekt dargestellt wird. Navigieren Sie im Theme-Editor zur Produktseite. In der linken Seitenleiste sehen Sie die Schaltfläche „Abschnitt hinzufügen”. Wenn Sie darauf klicken, können Sie auf alle Abschnitte der Produktseite zugreifen, die zuvor auf der Startseite verfügbar waren.

Schritt 7: Verweise auf Abschnitte hinzufügen

Wenn die Vorlage „product.liquid“ Verweise auf andere Abschnitte wie „product-recommendations“ enthält, können Sie diese in der Datei „product.json“ definieren und anschließend die Reihenfolge der Abschnitte festlegen.

  1. Öffnen Sie die Vorlagendatei „product.json“, die nur einen Verweis auf den Hauptabschnitt enthält (den Abschnitt, der Ihren migrierten Code enthält).
  2. Fügen Sie nun den Abschnitt mit den Produktempfehlungen in die Datei „product.json“ unter Verwendung der angegebenen Struktur ein. In dieser Struktur enthält die Eigenschaft „type“ den Dateinamen des Abschnitts.
{
  "sections": {
    "main": {
      "type": "product-template"
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main"
  ]
}
  1. Fügen Sie dann die Empfehlungen in das Array „order“ ein, das festlegt, wo dieser Abschnitt angezeigt wird. Jetzt sieht Ihr Code wie folgt aus.
{
  "sections": {
    "main": {
      "type": "product-template"
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}

Schritt 8: Unterstützung für App-Blöcke zu Abschnitten hinzufügen

Um App-Blöcke in den Abschnitten zu verwenden, müssen Sie das erforderliche Schema hinzufügen und den Blockinhalt im Abschnitt rendern.

App-Blöcke im Abschnittsschema aktivieren

Um das Hinzufügen von App-Blöcken in diesem Abschnitt zu ermöglichen, müssen Sie Blöcke vom Typ @app zum Schema des Abschnitts hinzufügen. Um die Unterstützung für App-Blöcke im Abschnitt „product-template“ hinzuzufügen, können Sie den folgenden Code hinzufügen. 

"settings": [
  ...
]
"blocks": [
  {
    "type": "@app"
  }
]

Render-App-Blöcke

Sie müssen den entsprechenden Typ des Blocks überprüfen, um einen App-Block zu rendern. Rendern Sie dann den Block mit {% render block %}, wie unten angegeben.

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

Schritt 9: Wiederholen Sie den Vorgang

Jetzt können Sie denselben Vorgang wiederholen, um alle Abschnitte im Theme zu konvertieren.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns an unter +91-8800519180 / +91-9582784309 für jegliche Unterstützung im Zusammenhang mit Shopify. Sie können auch die Shopify-Entwicklungsseite um die von uns angebotenen Dienstleistungen zu prüfen.