Upgrade des Online-Checkouts durchführen

Sie können Ihren Online-Checkout anpassen, um Ihre Marke auszubauen, Texte zu ändern, Angebote bereitzustellen und andere Verbesserungen am Einkaufserlebnis Ihrer Kunden vorzunehmen. Damit sichergestellt ist, dass Ihre Anpassungen mit den laufenden Änderungen von Shopify kompatibel sind, müssen Sie Ihren Checkout regelmäßig aktualisieren.

Im Februar 2019 wird eine aktualisierte Version des Checkouts veröffentlicht. Dieses Upgrade enthält eine Reihe von optischen Verbesserungen, die sich auf das Erscheinungsbild Ihres Checkouts auswirken.

Sie haben bis zum 4. März 2019 Zeit, die erforderlichen Änderungen an der Datei checkout.liquid vorzunehmen und die Änderungen im neuen Shopify-Checkout (mithilfe einer Vorschau) zu testen. Wenn Sie nicht bis zum 4. März 2019 ein Upgrade für Ihren Checkout vorgenommen haben, wird das Upgrade Ihres Shops auf die neue Version des Shopify-Checkouts automatisch vorgenommen.

Um sich auf dieses Upgrade vorzubereiten, müssen Sie Folgendes tun:

  1. Sehen Sie sich eine Vorschau des neuen Checkouts an und testen Sie das Kundenerlebnis.

    Je nachdem, welche Anpassungen Sie an Ihrem Checkout vorgenommen haben, kann es sein, dass Sie vor dem Upgrade Änderungen an Ihrer Datei "checkout.liquid" vornehmen müssen.

  2. Wenn Sie mit Ihren Änderungen zufrieden sind, nehmen Sie das Upgrade für Ihren Shop vor, um den neuen Shopify-Checkout zu verwenden.

Sehen Sie sich Ihren Checkout in einer Vorschau an und testen Sie ihn auf Fehler

Denken Sie daran, sich eine Vorschau mit den Änderungen anzusehen, bevor Sie ein Upgrade Ihres Shops auf die neue Checkout-Version vornehmen. Tun Sie einfach so, als wären Sie ein Kunde, und durchlaufen Sie mehrere Test-Checkouts. Sollten Sie während dieser Tests Fehler finden, stehen einige Ihrer Checkout-Anpassungen in Konflikt mit anderen Verbesserungen an der neuen Version. In diesem Fall müssen Sie vor dem Upgrade Änderungen an Ihrer checkout.liquid-Datei vornehmen.

Schritte:

  1. Duplizieren Sie Ihr aktuelles Theme:

    1. Klicken Sie in Ihrem Onlineshop auf Themes.
    2. Klicken Sie auf Aktionen und dann auf Duplizieren:
      Theme-Datei duplizieren
      Eine duplizierte (und unveröffentlichte) Version Ihres aktuellen Themes wird erstellt.
  2. Suchen Sie unter Weitere Themes nach dem duplizierten Theme und klicken Sie anschließend auf Aktionen > Code bearbeiten. Sie nehmen Ihre Änderungen vor und testen sie mit dieser duplizierten und unveröffentlichten Version Ihres Themes.

Hinweis: Wenn Sie Änderungen an einem Theme vornehmen oder ein Theme testen, erstellen Sie eine Kopie und arbeiten Sie mit der Kopie. Wenn Sie bei der Arbeit mit der Kopie einen Fehler machen, können Sie das Duplikat löschen und eine weitere Kopie des ursprünglichen Themes erstellen (ohne Auswirkungen für Ihre Kunden).

  1. Öffnen Sie die Datei checkout.liquid .

  2. Sehen Sie sich eine Vorschau der Datei checkout.liquid in Ihrem duplizierten Theme mit der neuen Version des Shopify-Checkouts an:

    1. Kehren Sie zur Seite Checkout-Upgrade zurück, klicken Sie auf Vorschau für Checkout anzeigen und wählen Sie das duplizierte Theme aus:
      Vorschau für Checkout anzeigen
    2. Führen Sie Testbestellungen in der Vorschau durch.

Wenn Fehler vorliegen oder Sie Probleme mit der Darstellung des Checkouts feststellen, müssen Sie die Datei checkout.liquid bearbeiten, um die Fehler und Probleme zu beheben.

Wenn während der Tests keine Fehler auftreten, ist der Checkout mit der neuen Version des Shopify-Checkouts kompatibel. Sie können ein Upgrade auf die neue Version des Shopify-Checkouts vornehmen und Ihr Theme aktualisieren.

Upgrade auf den neuen Shopify-Checkout durchführen

Das Upgrade des Checkouts erfolgt in zwei Schritten: Sie müssen den Shopify-Checkout aktualisieren und das aktuelle veröffentlichte Theme durch die Kopie mit den Änderungen ersetzen.

Führen Sie das Upgrade zu einer ruhigeren Tageszeit durch, z. B. am frühen Morgen, am späten Abend oder am Wochenende, um mögliche Störungen zu minimieren.

Schritte:

  1. Klicken Sie auf der Seite Checkout-Upgrade auf Upgrade für Checkout vornehmen (diese Schaltfläche befindet sich unten auf der Seite).

  2. Veröffentlichen Sie das duplizierte (und jetzt aktualisierte) Theme:

    1. Klicken Sie in Ihrem Onlineshop auf Themes.
    2. Suchen Sie nach dem duplizierten Theme und klicken Sie anschließend auf Aktionen > Veröffentlichen.

Ihr Checkout wurde aktualisiert und das duplizierte Theme ist jetzt Ihr aktuelles Theme.

Neuheiten beim Shopify-Checkout

Die neue Version des Shopify-Checkouts enthält die folgenden Änderungen und neuen Funktionen.

Rabatte

Es wurden visuelle Änderungen (HTML und CSS) daran vorgenommen, wie automatische Rabatte und Skript-Rabatte in der Bestellübersicht dargestellt werden. Zum Beispiel wird nun neben Einzelartikeln, für die ein automatischer Rabatt gewährt wurde, ein Symbol angezeigt:

Änderungen an automatischen Rabatten

Es wurden auch geringfügige visuelle Änderungen (HTML und CSS) an den Symbolen vorgenommen, die anzeigen, dass ein Rabattcode auf einen Einzelartikel angewendet wurde.

Internationaler Support für Adressfelder

An der Datei countries.js wurden Änderungen vorgenommen, um die Adresseingabe für die Kunden zu erleichtern. Die Datei countries.js steuert, wie Adressfelder formatiert werden und welche Felder je nach Land des Kunden angezeigt werden.

Zu den Änderungen an countries.js gehören:

  • Aktualisierung der Liste der Provinzen, Bundesstaaten, Bundesländer, Kantone usw. der unterstützten Länder.

  • Anpassung der Breite einiger Adressfelder.

Wenn Sie Anpassungen haben, die countries.js verwenden, müssen Sie in der Checkout-Vorschau überprüfen, ob diese Anpassungen funktionieren. Wenn Sie Anpassungen zum Hinzufügen oder Ausblenden von Adressfeldern haben, müssen Sie diese möglicherweise aktualisieren.

Autovervollständigung für Adressfelder

Die Funktion zur Autovervollständigung verwendet jetzt einen Shopify-Dienst, um Daten an Google zu senden. Deshalb verlässt sich die Autovervollständigung bei der Zuordnung während des Checkouts jetzt nicht mehr auf data=”google_autocomplete_*” sondern auf data=”autocomplete_*”.

Wenn Sie Anpassungen an der Funktion zur Autovervollständigung vorgenommen haben, müssen Sie die Referenzen möglicherweise von google_autocomplete_* in autocomplete_* umbenennen.

Wenn Sie eine eigene Funktion zu Autovervollständigung hinzugefügt haben (d. h., Sie haben benutzerdefinierten Code hinzugefügt, der die Autovervollständigung von Shopify ersetzt), wird in Ihrem Shop weiterhin Ihre Funktion verwendet (die Änderungen an der Autovervollständigung sollten also keine Auswirkungen auf Ihren Shop haben).

Die Autovervollständigung von Adressen wird für folgende Länder unterstützt:

  • Australien (AU)
  • Belgien (BE)
  • Brasilien (BR)
  • Kanada (CA)
  • Schweiz (CH)
  • Deutschland (DE)
  • Dänemark (DK)
  • Spanien (ES)
  • Frankreich (FR)
  • Hongkong (HK)
  • Indien (IN)
  • Italien (IT)
  • Japan (JP)
  • Luxemburg (LU)
  • Niederlande (NL)
  • Neuseeland (NZ)
  • USA (US)
  • Singapur (SG)

Verbesserungen der Eingabehilfen für Adressfelder

Es wurden visuelle Änderungen (HTML, SVG und CSS) an Adressfeldern vorgenommen, die Dropdown-Listen verwenden (z. B. beim Feld Land). Diese Änderungen verbessern die Barrierefreiheit und die Nutzererfahrung für Kunden, die Eingabehilfen verwenden:

Änderungen an Dropdown-Feldern

Kreditkartensymbole

Es wurden visuelle Änderungen (HTML und CSS) an den Kreditkartensymbolen vorgenommen, die angezeigt werden, wenn ein Händler seine Kreditkartendaten eingibt. Wenn Shopify den Kreditkartentyp erkennt, wird das Kreditkartensymbol hervorgehoben.

Änderungen bei Shopify Pay

Es wurden visuelle Änderungen (HTML und CSS) an der eingeblendeten Verifizierung für Shopify Pay vorgenommen, in der Kunden zur Eingabe ihres Shopify Pay-Codes aufgefordert werden:

Änderungen an der Eingabeaufforderung für Shopify Pay

Bestellstatus-Seite

Auf der Seite mit dem Bestellstatus wurden visuelle (HTML und CSS) und inhaltliche Änderungen vorgenommen. Zu diesen Änderungen gehören die Neuanordnung und die Aktualisierung von Inhalten. Außerdem können Mobilnutzer jetzt die mobile App von Arrive verwenden, um die Lieferung von Paketen zu verfolgen:

Mit einer neuen Schaltfläche können Kunden den Lieferstatus der Pakete über die Arrive-App verfolgen

Schaltflächen für den Express-Checkout

Es wurden visuelle Änderungen (HTML und CSS) vorgenommen, die sich auf die Darstellung der Express-Checkout-Optionen auswirken. Diese Optionen sind beispielsweise jetzt in einer Box gruppiert und einige Schaltflächen (z. B. die für Google Pay) verwenden iFrames.

Der neue Checkout prüft, ob im Browser des Kunden bevorzugte Zahlungsmethoden und Anmeldeinformationen hinterlegt sind. Diese Informationen werden dann verwendet, um die Schaltflächen entsprechend anzuordnen und den Kunden überall dort anzumelden, wo es möglich ist:

Änderungen am Format der Express-Checkout-Optionen

Richtlinien und Allgemeine Geschäftsbedingungen:

Die Rückerstattungsrichtlinie, die Rückgaberichtlinie und die Allgemeinen Geschäftsbedingungen werden jetzt in einem iFrame angezeigt, der sich im modalen Fenster befindet:

Neuer iFrame für Richtlinien

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus