Sie k\u00f6nnen Ihre Designs auf Online Store 2.0 migrieren und dessen Funktionen auf verschiedene Arten nutzen.<\/p>\n\n\n\n
- Laden Sie ein Online Store 2.0-Design aus dem Shopify Theme Store<\/a> herunter:<\/strong><\/strong> 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\u00dfend das Aussehen und Design des Designs, um Zugriff auf die neuen Funktionen zu erhalten.<\/li>
- Eine neue Version des Themes herunterladen:<\/strong> Wenn Ihr Theme eine aktualisierte Version bereitstellt, die Online Store 2.0 verwendet, f\u00fcgen Sie die neueste Version des Themes zum Shop hinzu, um Zugriff auf die neuen Funktionen zu erhalten. <\/li>
- Das Theme manuell migrieren:<\/strong>Wenn Ihr Theme keine neue Version mit Online Store 2.0-Funktionen bietet und Sie kein anderes Theme verwenden m\u00f6chten, k\u00f6nnen Sie Ihr Theme manuell migrieren. Konvertieren Sie die Liquid-Vorlage in JSON-Vorlagen und verschieben Sie den Liquid-Code und HTML in Abschnitte. F\u00fcgen Sie dann die Abschnitte in Ihre neue JSON-Vorlage ein.<\/li><\/ol>\n\n\n\n
Manuelles Migrieren von Vorlagen zu Online Store 2.0<\/strong><\/h2>\n\n\n\n
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\u00fcgen. Hier verschieben Sie die Codes aus einer product.liquid-Vorlagendatei in eine product-template.liquid-Abschnittsdatei. Anschlie\u00dfend f\u00fcgen Sie den Abschnitt in eine neue product.json-Vorlage ein.<\/p>\n\n\n\n
Anforderungen:<\/strong><\/h3>\n\n\n\n
Stellen Sie sicher, dass Sie diese Schritte ausf\u00fchren, bevor Sie mit der Migration Ihres Themes beginnen.<\/p>\n\n\n\n
- Identifizieren Sie das Thema, das Sie migrieren m\u00f6chten<\/li>
- Wenn Sie Shopify CLI und eine lokale Entwicklungsumgebung zur Migration der Vorlagen verwenden:
- Installieren Sie die Shopify-CLI auf Ihrem System.<\/li>
- Stellen Sie sicher, dass Sie \u00fcber ein Mitarbeiterkonto oder ein Mitwirkendenkonto f\u00fcr den Shop verf\u00fcgen, an dem Sie arbeiten m\u00f6chten, oder dass Sie der Eigent\u00fcmer des Shops sind. Wenn Sie \u00fcber ein Mitarbeiterkonto oder ein Mitwirkendenkonto verf\u00fcgen, m\u00fcssen Sie \u00fcber die Berechtigung \u201eThemes verwalten<\/strong>\u201d oder \u201eThemes<\/strong>\u201d f\u00fcr den Shop verf\u00fcgen. Shop-Eigent\u00fcmer verf\u00fcgen standardm\u00e4\u00dfig \u00fcber diese Berechtigungen.<\/li>
- Notieren Sie sich die URL des Shops.<\/li><\/ul><\/li><\/ol>\n\n\n\n
Schritt 1: Sichern Sie das Theme<\/strong><\/h3>\n\n\n\n
Sobald Sie das zu migrierende Theme identifiziert haben, erstellen Sie eine Kopie Ihres Themes.<\/p>\n\n\n\n
- Wenn Sie das Theme im Code-Editor bearbeiten m\u00f6chten, duplizieren Sie das Theme und stellen Sie sicher, dass es w\u00e4hrend der Bearbeitung nicht ver\u00f6ffentlicht ist. F\u00fcgen Sie au\u00dferdem ein weiteres Duplikat des Themes als Backup hinzu.
![\"shopify\"](\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2025\/08\/shopify.png\")
<\/li> - Wenn Sie die lokale Entwicklungsumgebung und Shopify CLI zum Bearbeiten verwenden, laden Sie die Theme-Dateien mit dem Befehl \u201eshopify theme pull\u201c herunter.<\/li><\/ol>\n\n\n\n
Schritt 2: Abschnitte identifizieren und Abschnittsverweise entfernen<\/strong><\/h3>\n\n\n\n
Um mit der Konvertierung Ihrer Liquid-Vorlage in eine JSON-Vorlage zu beginnen, notieren Sie sich alle {% section %}-Tags und entfernen Sie diese anschlie\u00dfend. Sie m\u00fcssen diese Verweise entfernen, damit Sie den verbleibenden Code in eine Abschnittsdatei verschieben k\u00f6nnen. Eine Abschnittsdatei darf keine Verweise auf einen anderen Abschnitt enthalten.<\/p>\n\n\n\n
- \u00d6ffnen Sie das Theme in Ihrer lokalen Entwicklungsumgebung oder Ihrem Code-Editor.<\/li>
- Suchen Sie nun die Datei \u201eproduct.liquid\u201c im Verzeichnis \u201e\/templates\u201c und \u00f6ffnen Sie sie.<\/li>
- Suchen Sie nach allen {% section %}-Tags, notieren Sie deren Namen und wo sich diese Tags befinden. Die Vorlage \u201eproduct.liquid\u201c enth\u00e4lt zwei Abschnitte.
{% section ‚product-template‘ %}
{% section ‚product-recommendations‘ %}<\/strong><\/li>- Die meisten Markups wie Produkttitel, Produktbilder, Schaltfl\u00e4chen zum Hinzuf\u00fcgen zum Warenkorb usw. sind im Abschnitt \u201eProduktvorlage\u201c enthalten. Der Abschnitt \u201eProduktempfehlungen\u201c enth\u00e4lt hingegen eine Liste von Produkten, die automatisch als Vorschl\u00e4ge f\u00fcr Kunden ausgew\u00e4hlt werden.<\/li>
- Sobald Sie alle {% section %} Tags notiert haben, l\u00f6schen Sie diese Tags aus der Vorlage product.liquid.<\/li><\/ol>\n\n\n\n
Schritt 3: Code aus der Vorlage in einen Abschnitt verschieben<\/strong><\/h3>\n\n\n\n
Nachdem Sie die {% section %} Tags aus dem Vorlagencode gel\u00f6scht haben, m\u00fcssen Sie diesen Code in einen bestehenden Abschnitt oder einen neuen Abschnitt verschieben.<\/p>\n\n\n\n
1. Code zu einem bestehenden Abschnitt hinzuf\u00fcgen<\/strong><\/h4>\n\n\n\n
- \u00d6ffnen Sie die Abschnittsdatei, in die Sie den Code einf\u00fcgen m\u00f6chten.<\/li>
- Kopieren Sie anschlie\u00dfend den restlichen Code der Vorlage \u201eproduct.liquid\u201c und f\u00fcgen Sie ihn in die Abschnittsdatei oberhalb des Tags {% schema %} ein.<\/li><\/ul>\n\n\n\n
2. Code zu einem neuen Abschnitt hinzuf\u00fcgen<\/strong><\/h4>\n\n\n\n
- Erstellen Sie im Verzeichnis \/section eine Datei. Zum Beispiel product-template.liquid. Wenn Sie diesen Abschnitt im Code-Editor erstellt haben, l\u00f6schen Sie den Standardcode aus der Abschnittsdatei.<\/li>
- Kopieren Sie anschlie\u00dfend den restlichen Code der Vorlage \u201eproduct.liquid\u201c und f\u00fcgen Sie ihn in die leere Abschnittsdatei ein.<\/li><\/ul>\n\n\n\n
Schritt: 4 L\u00f6schen Sie die Liquid-Vorlagendatei.<\/h3>\n\n\n\n
Nachdem Sie den Code aus der Datei \u201eproduct.liquid\u201c verschoben haben, l\u00f6schen Sie ihn aus dem Verzeichnis \u201e\/template\u201c. Sie m\u00fcssen die Liquid-Vorlagendatei l\u00f6schen, da sie durch die Datei \u201eproduct.json\u201c ersetzt wird. Au\u00dferdem k\u00f6nnen die Dateien \u201eproduct.liquid\u201c und \u201eproduct.json\u201c nicht gleichzeitig im Verzeichnis \u201e\/templates\u201c abgelegt werden.<\/p>\n\n\n\n
Schritt 5: Erstellen Sie eine JSON-Vorlagendatei.<\/h3>\n\n\n\n
Nachdem Sie die Datei \u201eproduct.liquid\u201c gel\u00f6scht haben, k\u00f6nnen Sie eine JSON-Vorlagendatei als Ersatz erstellen.<\/p>\n\n\n\n
- Erstellen Sie eine neue Datei mit dem Namen product.json im Verzeichnis \/template.
- Wenn Sie den Code-Editor verwenden,
\u27a3<\/strong> Klicken Sie auf \u201eNeue Vorlage hinzuf\u00fcgen\u201c.
\u27a2<\/strong> W\u00e4hlen Sie dann \u201eProdukt\u201c aus dem Dropdown-Men\u00fc \u201eVorlage erstellen f\u00fcr\u201c aus.
\u27a3<\/strong> W\u00e4hlen Sie dann JSON als Vorlagentyp aus.<\/li>- Wenn Sie die lokale Entwicklungsumgebung verwenden, erstellen Sie eine neue Datei mit dem Namen product.json im Verzeichnis \/templates.<\/li><\/ul><\/li>
- Nachdem Sie die Datei \u201eproduct.json\u201c erstellt haben, ersetzen Sie den Standardcode dieser Datei durch die folgenden Codes und speichern Sie sie.<\/li><\/ol>\n\n\n\n
{\n \"sections\": {\n \"main\": {\n \"type\": \"product-template\"\n }\n },\n \"order\": [\n \"main\"\n ]\n}<\/code><\/pre>\n\n\n\nSchritt 6: Testen Sie die Vorlage<\/h3>\n\n\n\n
Nachdem Sie die neue Vorlage erstellt haben, \u00f6ffnen Sie sie im Theme-Editor, um zu \u00fcberpr\u00fcfen, ob sie korrekt dargestellt wird. Navigieren Sie im Theme-Editor zur Produktseite. In der linken Seitenleiste sehen Sie die Schaltfl\u00e4che \u201eAbschnitt hinzuf\u00fcgen\u201d. Wenn Sie darauf klicken, k\u00f6nnen Sie auf alle Abschnitte der Produktseite zugreifen, die zuvor auf der Startseite verf\u00fcgbar waren.<\/p>\n\n\n\n
Schritt 7: Verweise auf Abschnitte hinzuf\u00fcgen<\/h3>\n\n\n\n
Wenn die Vorlage \u201eproduct.liquid\u201c Verweise auf andere Abschnitte wie \u201eproduct-recommendations\u201c enth\u00e4lt, k\u00f6nnen Sie diese in der Datei \u201eproduct.json\u201c definieren und anschlie\u00dfend die Reihenfolge der Abschnitte festlegen.<\/p>\n\n\n\n
- \u00d6ffnen Sie die Vorlagendatei \u201eproduct.json<\/strong>\u201c, die nur einen Verweis auf den Hauptabschnitt enth\u00e4lt (den Abschnitt, der Ihren migrierten Code enth\u00e4lt).<\/li>
- F\u00fcgen Sie nun den Abschnitt mit den Produktempfehlungen<\/strong> in die Datei \u201eproduct.json<\/strong>\u201c unter Verwendung der angegebenen Struktur ein. In dieser Struktur enth\u00e4lt die Eigenschaft \u201etype\u201c den Dateinamen des Abschnitts.<\/li><\/ol>\n\n\n\n
{\n \"sections\": {\n \"main\": {\n \"type\": \"product-template\"\n },\n \"recommendations\": {\n \"type\": \"product-recommendations\"\n }\n },\n \"order\": [\n \"main\"\n ]\n}<\/code><\/pre>\n\n\n\n- F\u00fcgen Sie dann die Empfehlungen in das Array \u201eorder\u201c ein, das festlegt, wo dieser Abschnitt angezeigt wird. Jetzt sieht Ihr Code wie folgt aus.<\/li><\/ol>\n\n\n\n
{\n \"sections\": {\n \"main\": {\n \"type\": \"product-template\"\n },\n \"recommendations\": {\n \"type\": \"product-recommendations\"\n }\n },\n \"order\": [\n \"main\",\n \"recommendations\"\n ]\n}<\/code><\/pre>\n\n\n\nSchritt 8: Unterst\u00fctzung f\u00fcr App-Bl\u00f6cke zu Abschnitten hinzuf\u00fcgen<\/h3>\n\n\n\n
Um App-Bl\u00f6cke in den Abschnitten zu verwenden, m\u00fcssen Sie das erforderliche Schema hinzuf\u00fcgen und den Blockinhalt im Abschnitt rendern.<\/p>\n\n\n\n
App-Bl\u00f6cke im Abschnittsschema aktivieren<\/h4>\n\n\n\n
Um das Hinzuf\u00fcgen von App-Bl\u00f6cken in diesem Abschnitt zu erm\u00f6glichen, m\u00fcssen Sie Bl\u00f6cke vom Typ @app zum Schema des Abschnitts hinzuf\u00fcgen. Um die Unterst\u00fctzung f\u00fcr App-Bl\u00f6cke im Abschnitt \u201eproduct-template\u201c hinzuzuf\u00fcgen, k\u00f6nnen Sie den folgenden Code hinzuf\u00fcgen. <\/p>\n\n\n\n
\"settings\": [\n ...\n]\n\"blocks\": [\n {\n \"type\": \"@app\"\n }\n]<\/code><\/pre>\n\n\n\nRender-App-Bl\u00f6cke<\/h4>\n\n\n\n
Sie m\u00fcssen den entsprechenden Typ des Blocks \u00fcberpr\u00fcfen, um einen App-Block zu rendern. Rendern Sie dann den Block mit {% render block %}, wie unten angegeben.<\/p>\n\n\n\n
{% for block in section.blocks %}\n {% case block.type %}\n {% when '@app' %}\n {% render block %}\n ...\n {% endcase %}\n{% endfor %}<\/code><\/pre>\n\n\n\nSchritt 9: Wiederholen Sie den Vorgang<\/h3>\n\n\n\n
Jetzt k\u00f6nnen Sie denselben Vorgang wiederholen, um alle Abschnitte im Theme zu konvertieren.<\/p>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a> oder rufen Sie uns an unter +91-8800519180<\/a> \/ +91-9582784309<\/a><\/strong> f\u00fcr jegliche Unterst\u00fctzung im Zusammenhang mit Shopify. Sie k\u00f6nnen auch die Shopify-Entwicklungsseite<\/a> um die von uns angebotenen Dienstleistungen zu pr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00e4chlich auf JSON-Vorlagen anstelle von Liquid-Vorlagen. Bisher wurden JSON-Vorlagen nur f\u00fcr die Startseite verwendet, w\u00e4hrend alle anderen Seiten auf Liquid-Vorlagen basierten. YSie k\u00f6nnen […]<\/p>\n","protected":false},"author":1,"featured_media":17423,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,45],"tags":[],"class_list":["post-17403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","category-shopify"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17403"}],"version-history":[{"count":4,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17403\/revisions"}],"predecessor-version":[{"id":17412,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17403\/revisions\/17412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17423"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- F\u00fcgen Sie nun den Abschnitt mit den Produktempfehlungen<\/strong> in die Datei \u201eproduct.json<\/strong>\u201c unter Verwendung der angegebenen Struktur ein. In dieser Struktur enth\u00e4lt die Eigenschaft \u201etype\u201c den Dateinamen des Abschnitts.<\/li><\/ol>\n\n\n\n
- Wenn Sie den Code-Editor verwenden,
- Erstellen Sie eine neue Datei mit dem Namen product.json im Verzeichnis \/template.
- Notieren Sie sich die URL des Shops.<\/li><\/ul><\/li><\/ol>\n\n\n\n
- Eine neue Version des Themes herunterladen:<\/strong> Wenn Ihr Theme eine aktualisierte Version bereitstellt, die Online Store 2.0 verwendet, f\u00fcgen Sie die neueste Version des Themes zum Shop hinzu, um Zugriff auf die neuen Funktionen zu erhalten. <\/li>