Alles, was Sie über Shopify 2.0 wissen müssen (und was zu tun ist)

Veröffentlicht: 2022-08-03

Wenn Sie ein Geschäftsinhaber oder Vermarkter sind und erwägen, Shopify zum Erstellen Ihres E-Commerce-Shops zu verwenden, sollten Sie diesen Artikel genau lesen.

Wir werden Ihnen gleich etwas über Shopify 2.0 erzählen – einschließlich was neu ist, warum es gut ist und was Sie tun müssen, um das Update zu nutzen.

Egal, ob Sie gerade erst anfangen und recherchieren oder bereits ein Shopify-Benutzer sind, der ein Upgrade in Betracht zieht, lesen Sie weiter, um alles zu erfahren, was Sie wissen müssen.

Was wird in diesem Beitrag behandelt:
  • Ein kurzer Überblick über den Shopify Store
  • Was ist Shopify 2.0 und was sind die neuen Funktionen?
  • Was ist die neue Themenarchitektur?
  • Was müssen Entwickler wissen?
  • So richten Sie Ihren Shop auf Shopify 2.0 ein
  • Was sollten Sie tun, wenn Ihr Shop auf Shopify 1.0 erstellt wurde?
  • Müssen Sie Ihren Shopify Store auf 2.0 aktualisieren?

1. Ein kurzer Überblick über den Shopify Store

Screenshot von Shopify 2, wie als Shopify angekündigt.

Quelle: Einführung des Online Store 2.0: Was es für Entwickler bedeutet

Wenn Sie hier sind, haben Sie entweder bereits einen Shopify-Shop oder denken darüber nach, einen zu bekommen. Und wenn es letzteres ist, fragen Sie sich vielleicht, ob ein Shopify-Onlineshop die richtige Plattform für Sie ist.

Wenn dies der Fall ist, könnte es Sie interessieren, unseren Artikel „Shopify vs. WooCommerce – Welches ist das Beste für Sie“ zu lesen.

Bild mit dem Text: „Im Jahr 2020 gab es 457 Millionen Käufer auf Shopify.

Im Jahr 2020 gab es 457 Millionen Käufer auf Shopify – gegenüber 218 Millionen im Jahr 2018 (Quelle: Shopify).

Hier bei Exposure Ninja lieben wir die Arbeit mit Shopify. Es ist das Richtige für Sie, wenn Sie ein E-Commerce-Unternehmen sind, das einen Online-Shop sucht, der einfach zu bedienen ist und viel Support bietet.

Seine großartigen Funktionen ermöglichen es Ihnen, Verkäufe zu verfolgen, Umsatzberichte zu erstellen und Bestellungen zu generieren.

Der ursprüngliche Shopify-Shop wurde mit 70 benutzerdefinierten Plug-and-Play-Designs geladen, sodass jeder seinen Online-Shop in nur 15 Minuten einrichten kann.

Das Bearbeiten von Themen und das Erstellen benutzerdefinierter Seiten war nicht immer einfach, aber der Shopify-Onlineshop 2.0 hofft, dies zu ändern. Shopify-Händler können sich jetzt auf einen viel flexibleren Online-Shop freuen, der einen Theme-Editor und Theme-App-Erweiterungen enthält.

2. Was ist Shopify 2.0 und was sind die neuen Funktionen?

Shopify Online Store 2.0 ist ein wichtiges Update der Online-Shop-Plattform von Shopify.

Der aktualisierte Online-Shop 2.0, der im Juni 2021 veröffentlicht wurde, hat eine deutliche Verschiebung für Shopify hin zu einem anpassbareren Bereich erlebt, den viele Entwickler begrüßen könnten.

Mit einem Auge auf die Benutzererfahrung hat Shopify dank seiner Benutzerfreundlichkeit seine vielen Benutzer nicht vergessen, die die Plattform nutzen. Die Änderungen seien „einfacher und flexibler“, versichern sie uns.

Was sind also die wichtigsten neuen Funktionen?

  • „Abschnitte“ sind jetzt auf allen Seiten verfügbar, nicht nur auf der Startseite
  • Sie haben Themen-App-Erweiterungen eingeführt
  • App-Blöcke sind jetzt über die Design-Editor-Oberfläche verfügbar
  • Fügen Sie Assets zu Ihren Design-App-Erweiterungen hinzu
  • Verbesserungen an Metafeldern
  • Die Dateiauswahl unterstützt Bilddateien
  • Eine neue Datei-API
  • Verbesserungen des Theme-Editors
  • Einstellung der Flüssigkeitszufuhr.

Das Update enthält ein neues Referenzdesign namens „ Dawn “, das 35 % schneller ist als das vorherige Standarddesign Debut. Der Shopify-Onlineshop 2.0 ist auch offen für Themeneinreichungen von Entwicklern und bietet verbesserte Anpassungsoptionen und Support.

Wenn Sie die Liste der neuen Funktionen durchsehen und sich fragen, was das alles zu bedeuten hat, bleiben Sie bei uns. Wir führen Sie durch alles, was Sie über den Online-Shop 2.0 wissen müssen.

Beauftragen Sie keine Webdesign-Agentur, bevor Sie dieses eBook gelesen haben

Laden Sie dieses eBook herunter
Titelseite von 21 Dinge, die Sie wissen müssen, bevor Sie sich für eine Webdesign-Agentur entscheiden

3. Was ist die neue Theme-Architektur?

Themenarchitektur mag wie Fachjargon klingen, bezieht sich aber einfach ausgedrückt darauf, wie der Editor aufgebaut ist.

Shopify Online Store 2.0 hat einen aktualisierten Theme-Editor, was aus zwei Gründen eine gute Nachricht ist:

  1. Für Nicht-Entwickler ist es einfacher, alle Seiten anzupassen
  2. Für Entwickler ist es einfacher, benutzerdefinierte Designs und Integrationen zu erstellen.

Sieben neue Funktionen wurden dem Online-Shop 2.0 hinzugefügt. Hier werden wir uns jedes einzelne etwas genauer ansehen.

Seitenvorlagen haben jetzt Abschnitte

Abschnitte sind die visuellen Bestandteile einer Seite auf Ihrer Website, beispielsweise ein Banner, ein Bildblock mit Text oder eine Schaltfläche.

In der vorherigen Version von Shopify konnten Sie nur auf der Startseite neue Abschnitte hinzufügen und per Drag-and-Drop an die gewünschte Stelle auf Ihrer Seite ziehen.

Es war möglich, Ihre Abschnitte auf anderen Seiten anzupassen, aber nicht ohne die Hilfe eines Entwicklers.

Jetzt können Händler jede Seite ihrer Website anpassen, einschließlich Produktseiten, sodass ihr Online-Shop vollständig auf ihr Unternehmen zugeschnitten ist.

Wie arbeiten Sie?

  • Jede Seite kann jetzt mit JSON-Vorlagendateien gerendert werden
  • Sie können mehrere Vorlagendateien einrichten, die verschiedenen Produkten zugeordnet sind
  • Händler können verschiedene Produktseiten, Kollektionsseiten und andere Seiten im selben Geschäft haben
  • Händler können die Abschnitte und die Reihenfolge definieren, in der die Abschnitte standardmäßig angezeigt werden sollen, wenn das Thema installiert wird
  • Der Startseite können jetzt dynamische Abschnitte hinzugefügt werden.

Design-App-Erweiterungen mit App-Blöcken

Im vorherigen Shopify-Onlineshop gab es keine Möglichkeit, Apps in den Theme-Editor zu integrieren. Ein Händler hätte einen Entwickler beschäftigen müssen, um die Integration mit bestehenden Themen zu codieren. Dies könnte zu Brüchen im Themencode führen, was es schwierig macht, Integrationen über Themen hinweg zu übertragen.

Mit dem Onlineshop 2.0 ermöglicht eine Design-App-Erweiterung Entwicklern das Hinzufügen von Funktionen und Erweiterungen. Dank dessen können Sie Ihren Shopify-Shops jetzt zusätzliche Funktionen hinzufügen.

Integrierte App-Modularität

App-Blöcke ermöglichen es Entwicklern, Komponenten zu erstellen, die sie einem Design-Editor hinzufügen können, ohne die Integration zu codieren.

Was bedeutet das für Sie als Händler? Einfach ausgedrückt: Wenn Sie Ihr Design ändern, aber eine integrierte App mitnehmen möchten, ist dies viel einfacher und bedeutet, dass ein Entwickler nicht die gesamte Integration neu erstellen muss. Es macht es auch viel einfacher, eine App zu entfernen, da der gesamte Geistercode bei einer Deinstallation entfernt wird.

Änderungen an Metafeldern

Screenshot des Metafeld-Updates von Shopify 2.0.

Ein Metafeld ist der Platz, an dem Sie Informationsdaten zu einem bestimmten Asset auf Ihrer Website hinzufügen können. Dies kann ein Bild, eine Liste, ein Diagramm oder ein Download sein.

Mit diesem neuen Design-Editor können Sie Metafelder und Eigenschaften hinzufügen, ohne APIs oder Code zu verwenden. Dies ist mit früheren Funktionen in den nativen Bearbeitungstools von Shopify nicht möglich.

Metafelder wurden von Grund auf überarbeitet, um flexibler und intuitiver zu sein. Jetzt können Sie mit dem erweiterten Typsystem des Online-Shops 2.0 in wenigen Minuten benutzerdefinierte Felder erstellen, die Ihren Anforderungen entsprechen. Es wurden Standard-Metafelder eingeführt, damit jedes Thema sofort in Geschäften in verschiedenen Marktsegmenten funktioniert – keine Notwendigkeit für zusätzliche Codierung oder Plug-in-Installation.

Dateiauswahl

Die Metafeld-Dateiauswahl erleichtert das Hochladen und Auswählen von Medien auf Produktseiten. Alle Ihre Bilder, die im Abschnitt Einstellungen/Dateien gespeichert sind, stehen sofort für die Verwendung mit dieser neuen Funktion zur Verfügung.

Metafelder funktionieren mit vielen Medienquellen wie Bildern oder PDF-Dateien.

Anstatt beispielsweise bestimmte Dateitypen in den Seitenerstellungs-Inhaltsbereich jedes Themas zu codieren, können Sie mit Metafeldern das ausgewählte Element von Ihrem Telefon hochladen und es sofort auf den Produktseiten anzeigen lassen – ohne dass Sie zu den Einstellungen zurückkehren müssen.

Datei-API

Das Online Store 2.0-Update der Datei-API bietet Händlern neue Funktionen und eine optimierte Schnittstelle zum Hochladen von Dateien.

Mit dieser Version können Entwickler Medien in ihren Shopify-Shops über eine benutzerfreundliche GraphQL-Konsole im Admin-Bereich von Shopify erstellen, auswählen und hochladen.

Darüber hinaus ermöglicht die API jetzt den Zugriff von mehreren Apps, um den Speicherplatz für Dateien zu nutzen, die sich nicht direkt auf ein bestimmtes Produkt beziehen.

Flüssigkeitseingangseinstellungen

Liquid-Eingabeeinstellungen ermöglichen es Händlern, benutzerdefinierten Liquid-Code direkt aus dem Editor mit einer neuen Einstellung ähnlich der HTML-Einstellung zu Seiten hinzuzufügen. Dies bedeutet, dass Sie Zugriff auf globale Variablen und vorlagenspezifische Objekte haben, wodurch die Notwendigkeit reduziert wird, den Themencode manuell zu ändern.

Dieser benutzerdefinierte Liquid-Code erleichtert Shopify-Händlern die Arbeit mit dem neuen Onlineshop 2.0, ohne den Code Ihres Themes zu beeinträchtigen oder App-Entwickler zu stark einzubeziehen.

Titelseite von Wie man an die Spitze von Google kommt

Erreiche die Spitze von Google kostenlos

Laden Sie ein kostenloses Exemplar unseres Bestsellers herunter,
" So gelangen Sie an die Spitze von Google "
Laden Sie meine kostenlose Kopie herunter

4. Was müssen Entwickler wissen?

Wenn Sie ein Händler sind und nur die grundlegenden Gründe wissen möchten, warum Sie zu Shopify 2.0 wechseln sollten, sollte der aktualisierte Theme-Editor Grund genug sein.

Aber Shopify hat einige neue Entwicklertools als Teil des überarbeiteten Online-Shops aufgenommen. Diese gehen wir hier kurz durch.

GitHub-Integration

Die Shopify GitHub-Integration ermöglicht es Entwicklern, sich mit nur wenigen Klicks einfach mit ihrem GitHub-Benutzerkonto zu verbinden.

Die Integration zwischen Themes und GitHub wird es Entwicklern ermöglichen, effizienter zu arbeiten, wenn sie Änderungen vornehmen. Entwickler können jetzt Workflows implementieren, wo sie eine Genehmigung benötigen, bevor sie Live-Sites mit ihren Updates füllen. Dies funktioniert jetzt auf einer Plattform und spart Zeit beim Auffüllen eines Live-Themes.

Shopify CLI-Tool

Zuvor haben Entwickler möglicherweise CLI verwendet, um Node.js, Ruby on Rails-Apps und App-Erweiterungen zu generieren. Shopify Online Store 2.0 ermöglicht es ihnen, die CLI zu verwenden, um Entwicklungsthemen zu aktualisieren.

Entwicklungsthemen werden im Shopify-Admin-Bereich des Shops ausgeblendet, sodass Entwickler daran arbeiten können. Diese Entwicklungsthemen zählen nicht zu Ihrem Themenlimit, aber Shopify ‌löscht diese automatisch, wenn nach sieben Tagen Inaktivität bei den Entwicklungsthemen festgestellt wird.

Das neue CLI-Tool gibt Ihnen oder Ihrem Entwickler die Kontrolle über die Designentwicklung, das Bearbeiten von Designs und das Aussehen Ihres neuen Designs. Innerhalb Ihres neuen Themenprojekts können Sie alle Änderungen live anzeigen, mit ihnen interagieren und sie mithilfe des Editors anpassen.

Theme-Check

Zu den neuen Entwicklertools gehört der Theme Check – ein Sprachserver, der in einen Texteditor integriert ist, um Probleme im Code für eine effiziente Entwicklung neuer Designs zu identifizieren.

Es ist mit dem Shopify CLI-Tool gebündelt, daher sollte ein Entwickler diese zusammen installieren. Es wurde sorgfältig gestaltet, mit Fehlermeldungen, einschließlich eines Links zur Dokumentation der fehlgeschlagenen Prüfung.

Dämmerung

Screenshot-Beispiel des Dawn-Designs von Shopify 2.0.

Quelle: Einführung des Online Store 2.0: Was es für Entwickler bedeutet

Dawn ist das neue Referenzthema, das standardmäßig mit dem neuen Shopify-Onlineshop 2.0 geliefert wird. Das vorherige Standardthema war Debut, und Dawn ist deutlich schneller, flexibler und schlanker als sein Vorgänger, was den Entwicklungsprozess viel reibungsloser macht.

Dawn hat bereits JSON-Vorlagen für alle seine Seiten, sodass es als Modell verwendet werden kann, wenn Abschnitte innerhalb eines neuen Themas freigeschaltet werden.

Seine Geschwindigkeit ist dem Aufbau mit minimalem Javascript zu verdanken, daher ermutigt Shopify Entwickler, die nativen Browserfunktionen zu nutzen, um HTML- und CSS-Layouts zu rendern.

5. So richten Sie Ihren Shop auf Shopify 2.0 ein

Screenshot-Beispiel des Shopify-Tools zum Hinzufügen von Produkten in Shopify 2.0.

Das Einrichten eines Shops in Shopify 2.0 ist dasselbe wie in der vorherigen Version von Shopify. Es ist schnell und einfach zu machen, aber bevor Sie loslegen, sollten Sie über Folgendes nachgedacht haben:

  • Wie lautet der Name Ihres Unternehmens? Sie werden sofort nach dem Namen Ihres Geschäfts gefragt, und es ist unmöglich, diesen zu ändern. Wählen Sie ihn also sorgfältig aus. Sie können dies jedoch später auf eine ausgewählte Domäne ändern.
  • Markenfarben, Schriftarten und ein Logo. Sie wählen ein Design aus dem Shopify-Designshop aus, möchten aber wahrscheinlich bestimmte Designkomponenten durch Ihr Branding ersetzen.
  • Bilder und Beschreibungen der Produkte, die Sie verkaufen möchten, einschließlich UPCs, Varianten, Versanddetails und natürlich der Preisgestaltung.
  • Wie Sie möchten, dass Benutzer Zahlungen leisten.
    • Shopify erlaubt die meisten Optionen, einschließlich Paypal, Visa, Mastercard, AMEX, Apple Pay, Amazon Pay und Google Pay.
  • Die Seitenstruktur; welche Seiten Sie einschließen möchten und welche Kopie Sie darauf haben möchten. Sie müssen dies wissen, wenn Sie Ihre Navigation und Ihre neuen Seiten einrichten.
  • Zusätzliche Elemente wie die Metadaten und SEO-Elemente, die Sie in Ihre Seiten aufnehmen möchten.

Für eine vollständige Anleitung zur Einrichtung Ihres Shopify-Shops unter Berücksichtigung von SEO, hören Sie sich unseren Podcast Shopify SEO for Beginners an oder sehen Sie sich das Video unten an.

Was sollten Sie tun, wenn Ihr Shop auf Shopify 1.0 erstellt wurde?

Wenn Sie bereits einen Shopify-Onlineshop haben und auf Shopify 2.0 upgraden möchten, stehen Ihnen drei Möglichkeiten zur Verfügung:

Besuchen Sie den Shopify-Designshop und laden Sie eines der neuen Shopify-Designs herunter.

Überprüfen Sie, ob Ihr vorhandenes Thema eine aktualisierte Version bietet, indem Sie den Online-Shop 2.0 verwenden.

Migrieren Sie Ihre aktuellen Designvorlagen auf die neue Architektur.

1. Laden Sie ein neues Thema herunter

  1. Besuchen Sie den Shopify-Designshop.
  2. Filtern Sie nach „Thema Architektur“.
  3. Wählen Sie „Online-Shop 2.0“.
  4. Wählen Sie Ihr bevorzugtes Design und klicken Sie auf „Design ausprobieren“.
  5. Sie müssen nur bezahlen, wenn Sie das Design auf Ihrer Shopify-Website veröffentlichen.

2. Aktualisieren Sie Ihr aktuelles Thema

  1. Screenshot der Option von Shopify, auf das Dawn-Design zu aktualisieren. Besuchen Sie den Shopify Theme Store und filtern Sie wie oben nach „Online Store 2.0“. Wenn Ihr Design für ein Upgrade verfügbar ist, sollten Sie es dort sehen.
  2. Alternativ sollten Sie eine Benachrichtigung in Ihrem Shopify-Adminbereich haben (unten, wo Ihr Thema angegeben ist).
  3. Klicken Sie auf die Benachrichtigung und „Zur Themenbibliothek hinzufügen“.
  4. Alle Anpassungen, die mit dem Design-Editor an Ihrem Design vorgenommen wurden, werden kopiert und auf das aktualisierte Design angewendet. Diese beinhalten:
  5. Geänderte Theme-Einstellungen
  6. Geänderte Seitenlayouts, z. B. Hinzufügen, Neuordnen, Entfernen oder Ausblenden von Abschnitten oder Blöcken
  7. Neue Vorlagen
  8. Hinzugefügte, entfernte oder geänderte Einstellungen von App-Einbettungen oder App-Erweiterungen.

3. Migrieren Sie Ihre Designvorlage

Dies ist ein langwieriger Prozess, den wir nur empfehlen würden, wenn Sie ein Entwickler sind.

  1. Verwenden Sie das Shopify CLI-Tool oder den Code-Editor. Möglicherweise müssen Sie CLI installieren.
  2. Stellen Sie sicher, dass Sie als Mitbearbeiter oder als „Mitarbeiter“ für das Konto angemeldet sind, an dem Sie arbeiten möchten.
  3. Erstellen Sie eine Kopie Ihres Designs.
  4. Konvertieren Sie Ihren aktuellen Designcode aus einer Liquid-Eingabeeinstellung in eine JSON-Vorlage.
  5. Verschieben Sie beliebigen Liquid-Code oder HTML in Abschnitte, die in Ihrer neuen JSON-Vorlage verwendet werden sollen.
  6. Den vollständigen Prozess können Sie hier auf Shopify.dev nachlesen.

Müssen Sie Ihren Shopify Store auf 2.0 aktualisieren?

Die kurze Antwort darauf ist nein .

Shopify bietet immer noch viele Themen, die mit der Originalversion kompatibel sind.

Wenn Sie jedoch ein Ladenbesitzer sind, der nach zusätzlichen Anpassungen, neuen Seitenvorlagen und benutzerdefinierten Seiten sucht, könnte der Wechsel zu 2.0 eine gute Option für Sie sein.

Der neueste Rat von Shopify lautet, dass Sie, wenn Sie Apps verwenden möchten, versuchen sollten, App-Erweiterungen zu verwenden, um sie in Ihren Online-Shop zu integrieren. Dies gilt, wenn Sie eine neue App einreichen, da diese zur Integration Designerweiterungen verwenden muss. Shopify plant, dies in Zukunft für alle Apps zur Voraussetzung zu machen.

Shopify-Geschäftsinhaber? Vielleicht haben Sie Spaß daran, unseren Blog zum Erstellen einer erfolgreichen Shopify-Marketingstrategie zu lesen.

Was als nächstes zu lesen ist

  • Die besten zu verwendenden E-Commerce-Plattformen
  • Shopify vs. WooCommerce – Was ist das Beste für Sie?
  • So erstellen Sie eine erfolgreiche Shopify-Marketingstrategie
  • Ein PPC-Leitfaden für Shopify eCommerce Stores
  • 11 Dinge, die Sie wissen müssen, bevor Sie sich für eine Webdesign-Agentur entscheiden
  • 6 Möglichkeiten, den Umsatz Ihres E-Commerce-Shops zu steigern