Shopify Checkout anpassen

    NICCOS passt den Shopify Checkout für Marken im DACH-Raum an. Wir ordnen jede Anforderung einem Werkzeug zu: Checkout UI Extension, Shopify Function, Branding oder Warenkorb. Danach entwickeln wir die Erweiterung als App, testen sie mit Ländern, Zahlarten und Rabatten und rollen sie versioniert aus. Am Ende steht ein Checkout, der Deine Regeln abbildet und den Dein Team im Checkout-Editor pflegt.
    Hände biegen und rollen eine blaue Freiluftkind-Einlegesohle vor mintgrünem HintergrundRosa und weiße Rosen im Strauß, NahaufnahmeBraune Boxershorts mit blauen Kontrastnähten und CR7-Bund am Körper vor hellem StudiohintergrundHände öffnen eine braune Gusti-Umhängetasche aus Leder und zeigen die InnenfächerFrau mit Einkaufstüte lehnt an einer Hauswand, Groundies-Schuhe auf KopfsteinpflasterHände halten ein salbeigrünes Erinnerungsbuch mit der Aufschrift This is your storyJunge schaut im Wald durch ein FernglasGlasampullen laufen durch eine Abfüllanlage in der Heel-ProduktionFrau im Profil mit voluminösen blonden Locken, eine Hand sprüht von oben Haarspray.Frau trägt vor einem Schminkspiegel Wimperntusche auf.Lächelnder Mann mit Reinigungsschaum im Gesicht hält die Face-Cleanser-Flasche.Zwei junge Frauen in Weiß liegen auf einem Bett und halten Parfumflakons.Drei Vitabay-Dosen auf einem Steintisch vor einem grünen Sofa.PHARMOS NATUR Behandlung mit Aloe-vera-Blättern in einem hellen Spa.

    Marken, für die wir arbeiten

    MYCR7 logo
    CAT logo
    O'Neal logo
    FRITZ! logo
    Groundies logo
    Gusti Leder logo
    Smilodox logo
    Sirocco logo
    Olakala logo
    Deputy logo
    Bikemailorder logo
    Prepmymeal logo
    Freiluftkind logo
    Bloomingloft logo
    Heel logo
    Lieferhinweise, Geschenkoptionen und Zusatzfelder erscheinen dort, wo Kunden sie brauchen.
    Passende Informationen
    Rabatte, Versand- und Zahlartenlogik greifen bei jeder Bestellung, ohne Eingriffe ins Theme.
    Regeln automatisch
    Branding und Sprache führen das Store-Erlebnis bis zum abgeschlossenen Kauf weiter.
    Marke bleibt konsistent

    Was lässt sich am Shopify Checkout anpassen?

    Am Shopify Checkout lassen sich vier Dinge anpassen: sichtbare Bausteine an festen Positionen, die Logik für Rabatte, Versand und Zahlarten, die Gestaltung über Farben, Schriften und Texte und die Seiten nach dem Kauf. Der Aufbau der Checkout-Seiten selbst ist vorgegeben. Wir verantworten die Zuordnung jeder Anforderung, die Entwicklung als App und die Abnahme mit echten Bestellfällen.

    NICCOS ist seit April 2022 Shopify Plus Partner und OpenAI-Partner. Im Shopify-Partnerverzeichnis stehen 19 Bewertungen mit der Note 5,0. Mit Best Price Indicator (PAngV) betreiben wir eine eigene App im Shopify App Store. Unsere Projekte sind in 13 veröffentlichten Case Studies beschrieben.

    Welche Logik gehört vor den Checkout?

    Vor den Checkout gehört alles, was der Kunde auswählen oder gestalten muss: Lieferdatum, Grußtext, Gravur, Zusatzartikel. Der Checkout nimmt diese Angaben auf und rechnet mit ihnen. Als Ort für einen Konfigurator ist er nicht gebaut.

    BlumeIdeal versendet Blumen zu einem Wunschtermin und lief auf Shopware 5, wo sich Datums- und Geschenke-Logik nur eingeschränkt abbilden ließ. Für den Shop auf Shopify Plus haben wir eine Datumslogik gebaut, die Kalender, Cut-off-Zeiten und die Verfügbarkeiten aus der JTL-Worker Cloud kombiniert. Wochenenden und festgelegte Feiertage sind gesperrt, und Kunden sehen nur Termine, die logistisch möglich sind. Strauß, Zusatzartikel und Grußkarte wählt der Kunde im Konfigurator auf der Produktseite.

    Die Case Study zu BlumeIdeal nennt den Go-live nach 50 Tagen, 29 % mehr Warenkorbwert durch die Upsells im Konfigurator und 33 % mehr Conversion Rate gegenüber Shopware. Alle offenen Bestellungen und die Bestellhistorie wurden übernommen. Wie der Bestand aus der Warenwirtschaft in den Shop kommt, beschreibt die Seite zur Systemintegration.

    Brauchst Du Shopify Plus, um den Checkout anzupassen?

    Für eigene Bausteine auf den Seiten für Information, Versand und Zahlung brauchst Du Shopify Plus. Dasselbe gilt für die weitergehende Branding-Konfiguration und für Functions, die als individuelle App nur für Deinen Shop entwickelt werden. Ohne Plus bleiben Erweiterungen auf der Danke- und der Bestellstatus-Seite und Functions, die eine App aus dem Shopify App Store mitbringt.

    Vor einem Tarifwechsel prüfen wir, welche Anforderungen den Checkout wirklich brauchen. Ein Hinweis zur Lieferzeit kann im Warenkorb stehen, eine Mengenstaffel auf der Produktseite. Bleibt danach eine Liste übrig, die nur im Checkout lösbar ist, rechnen wir den Wechsel mit Dir durch. Die Entscheidung über den Tarif beschreibt die Seite zur Shopify Plus Agentur.

    Wie laufen Rabatte, Zahlarten und Versandregeln im Checkout?

    Rabatte, Zahlarten und Versandregeln laufen über Shopify Functions. Eine Function ist ein kleines Programm, das Shopify selbst ausführt, während es den Warenkorb berechnet. Sie ersetzt die früheren Shopify Scripts und viele Ketten aus Rabattcodes und Apps.

    Gusti Leder kam von Shopware, wo Rabatte und Gutscheine von Hand und ohne zentrales System verwaltet wurden. Wir haben die Rabatt- und Gutscheinlogik in Shopify überführt, damit Promotions zentral gesteuert werden. Vor dem Launch lag eine vollständige Testphase für Checkout, Zahlungen, Konfigurator und die Abläufe im ERP. Laut Case Study zu Gusti Leder ging der Shop in unter 8 Wochen live, und die Conversion Rate stieg um 45 %.

    Im Geschäft mit Firmenkunden kommen Rechnungskauf, Umsatzsteuer-ID und Kostenstelle dazu. Zahlungsziele und Preislisten sind Funktionen von Shopify B2B. Der Checkout ergänzt sie um Pflichtfelder und Regeln für Zahlarten. Wer mit Streichpreisen wirbt, muss nach der Preisangabenverordnung den niedrigsten vorherigen Preis angeben. Das gehört auf die Produktseite und wird im Checkout nicht nachgeholt.

    Wie bildet der Checkout mehrere Länder und Währungen ab?

    Mehrere Länder bildet der Checkout über Shopify Markets ab. Währung, Steuer, Sprache und Zahlarten richten sich nach dem Markt des Kunden.

    Für den Betreiber der offiziellen CR7-Onlineshops haben wir mycr7.eu und mycr7.ch aufgebaut. Die Schweiz verlangt als Nicht-EU-Land eigene Steuer- und Zolllogik, eigene Preislisten und einen Checkout in CHF. Die Case Study zu MYCR7 nennt den Go-live nach 6 Wochen. Den Aufbau weiterer Märkte beschreibt die Seite zur Shopify Internationalisierung.

    Woran scheitern Checkout-Projekte?

    Checkout-Projekte scheitern an Anforderungen, die niemand gegen die Plattform geprüft hat, und an Sonderfällen, die erst nach dem Launch auffallen. Deshalb spielen wir vor dem Ausrollen mehrere Länder, Zahlarten, Rabatte, Geschenkkarten, ausverkaufte Positionen und Express-Zahlungen durch. Wir nehmen jeden Fall einzeln ab.

    Der zweite Grund ist das Tracking. Im Checkout läuft kein frei eingebundenes JavaScript. Ereignisse kommen über die Pixel-Umgebung und berücksichtigen die Einwilligung des Kunden. Wer das beim Umbau übersieht, verliert die Messung der Käufe. Den Aufbau beschreibt die Seite zu Tracking Setups.

    Steigen Deine Kunden schon auf der Produktseite oder im Warenkorb aus, ändert eine Erweiterung im letzten Schritt daran nichts. Dann ist die Shopify Conversion-Optimierung der bessere Anfang.

    Mit welchen Werkzeugen passen wir den Checkout an?

    • Checkout UI Extensions

      Eigene Bausteine an definierten Stellen: Hinweise zu Lieferzeiten, Geschenkoptionen, Feldabfragen, Upsell-Blöcke, Zustimmungen. Sie laufen in einer abgeschotteten Umgebung und werden über den Checkout-Editor platziert.

    • Shopify Functions

      Serverseitige Logik für Rabatte, Versandoptionen, Zahlarten, Warenkorb-Transformationen und Validierung. Sie greifen dort, wo früher Skripte liefen, sind versioniert und brauchen keine Laufzeit im Browser.

    • Branding und Sprache

      Farben, Schriften, Rundungen und Textbausteine über die Branding-Einstellungen und Übersetzungen. Das ersetzt kein freies Layout, deckt aber den größten Teil dessen ab, was Marken tatsächlich brauchen.

    Wo liegen die Grenzen mit und ohne Shopify Plus?

    • Plus: Erweiterungen im Checkout-Schritt

      Eigene UI-Bausteine auf den Seiten für Information, Versand und Zahlung sind an Shopify Plus gebunden. Auf Danke- und Bestellstatus-Seite lassen sich Erweiterungen auch ohne Plus einsetzen.

    • Plus: eigene Functions für Deinen Shop

      Functions, die wir als individuelle App nur für Deinen Shop entwickeln, setzen Shopify Plus voraus. Damit lassen sich Zahlarten und Versandoptionen umsortieren, umbenennen oder ausblenden und eigene Validierungen durchsetzen.

    • Plus: Branding-Einstellungen

      Die weitergehende gestalterische Anpassung des Checkouts über die Branding-Konfiguration ist ebenfalls ein Plus-Thema. Ohne Plus bleibt es bei Logo, Farben und Basisoptionen aus dem Admin.

    • Alle Pläne: Functions aus dem App Store

      Apps aus dem Shopify App Store dürfen Functions auf jedem Plan mitbringen. Damit lassen sich Staffelungen, Bundles und Aktionslogiken abbilden, für die früher Rabattcodes herhalten mussten.

    • Nicht: freies Checkout-Layout

      Der Aufbau der Checkout-Seiten ist vorgegeben. Erweiterungen sitzen an definierten Stellen. Wer einen komplett eigenen Checkout zeichnet, plant an der Plattform vorbei.

    • Nicht: beliebige Skripte

      Im Checkout läuft kein frei eingebundenes JavaScript. Tracking läuft über die Pixel-Umgebung, Logik über Functions. Das ist eine Sicherheits- und Stabilitätsentscheidung der Plattform, keine Einstellungssache.

    • Nicht: checkout.liquid

      Die alte Vorlagendatei ist abgelöst. Erst fielen die Checkout-Schritte weg, danach Danke- und Bestellstatus-Seite. Bestehende Anpassungen mussten auf Extensions und Functions überführt werden.

    • Nicht: Umgehung der Reihenfolge

      Zusätzliche Zwischenschritte oder ein eigener Bestätigungs-Flow vor dem Kauf lassen sich nicht einbauen. Wo das fachlich nötig ist, gehört die Logik vor den Checkout, in den Warenkorb oder auf die Produktseite.

    Wie gehen wir ein Checkout-Projekt an?

    1. Anforderungen sortieren

      Jede Anforderung wird zugeordnet: UI Extension, Function, Branding, Warenkorb oder gar nicht möglich. Diese Sortierung entscheidet über Aufwand und Machbarkeit, nicht das Wunschbild.

    2. Bestand prüfen

      Vorhandene Checkout-Anpassungen, Skripte, Apps und Pixel aufnehmen. Gerade bei älteren Plus-Shops liegen dort Reste, die nach der Ablösung von checkout.liquid nie aufgeräumt wurden.

    3. Entwurf im Editor

      Platzierung der Erweiterungen im Checkout-Editor durchspielen, bevor Code entsteht. So wird früh sichtbar, welche Position es wirklich gibt und wie viel Platz sie hergibt.

    4. Bauen und ausrollen

      Extensions und Functions als App entwickeln, versionieren und über die Shopify CLI ausrollen. Jede Änderung ist damit nachvollziehbar und rückholbar.

    5. Testen mit echten Fällen

      Mehrere Länder, Zahlarten, Rabatte, Geschenkkarten, ausverkaufte Positionen und Express-Zahlungen durchspielen. Der Checkout ist die Stelle, an der Sonderfälle Geld kosten.

    6. Messen

      Kaufabschlüsse, Abbrüche je Schritt und Fehlerraten beobachten. Eine Erweiterung, die den Abschluss verlangsamt, ist auch dann falsch, wenn sie fachlich richtig ist.

    • Drei Mahlzeiten-Bowls mit Hähnchen, Reis und Gemüse auf Holztisch, von obenPrepmymeal
    • Strauß orangefarbener Rosen vor hellem HintergrundBlumeIdeal
    • Drei Frauen in SMILODOX-Sportkleidung beim Selfie, ein Padel-Spieler und Läuferinnen unter PalmenSMILODOX

    Wofür lohnt sich eine Checkout-Erweiterung?

    • Lieferversprechen

      Konkretes Lieferdatum oder Hinweise zu Teillieferungen an der Stelle zeigen, an der die Versandart gewählt wird.

    • Pflichtangaben

      Zusätzliche Felder mit Validierung, etwa Umsatzsteuer-ID, Kostenstelle oder Altersbestätigung im B2B- und Regulierungsfall.

    • Zahlartensteuerung

      Rechnungskauf nur für freigegebene Firmenkunden, Nachnahme nur in bestimmten Ländern, Reihenfolge nach Marge statt nach Zufall.

    • Rabatte ohne Codes

      Mengenstaffeln, Bundle-Preise und Kundengruppen-Logik als Function statt als Kette aus Apps und Rabattcodes.

    Ist der Checkout bei Dir der richtige Hebel?

    Dann lohnt sich ein Checkout-Projekt

    • Plus ist da und liegt brach

      Die Erweiterbarkeit im Checkout-Schritt ist im Plan enthalten, genutzt wird sie nicht. Das ist Spielraum, den Du bereits bezahlst.

    • Der Support beantwortet immer dasselbe

      Fehlt eine Angabe im Kaufabschluss, kommt sie später als Mail oder Anruf zurück. Solche Rückfragen lassen sich an der Quelle abfangen.

    • Bestellungen kommen unvollständig an

      Unklare Lieferadressen, fehlende Referenznummern oder falsche Zahlarten kosten in der Nachbearbeitung mehr als jede Erweiterung.

    • Alte Anpassungen laufen ins Leere

      Nach der Ablösung von checkout.liquid liegen Reste aus Skripten und Apps ohne Wirkung im Shop. Was gebraucht wird, gehört neu zugeordnet.

    Dann setzt Du am falschen Schritt an

    • Ihr seid nicht auf Shopify Plus

      Ohne Plus lassen sich in den Checkout-Schritten keine eigenen Bausteine und keine individuell entwickelten Functions einsetzen. Dann steht zuerst die Planfrage an.

      Zur Shopify Beratung
    • Der Abbruch passiert vorher

      Wenn Nutzer schon auf der Produktseite oder im Warenkorb aussteigen, ändert eine Erweiterung im letzten Schritt daran nichts.

      Zur Shopify Conversion-Optimierung
    • Es fehlen Firmenkonten und Preislisten

      Zahlungsziele, Katalogfreigaben und Bestellfreigaben sind Funktionen der B2B-Plattform. Eine Checkout-Erweiterung kann sie nicht ersetzen.

      Zu Shopify B2B

    In welchem Rahmen arbeiten wir am Checkout?

    Beim Checkout entscheidet sich der Aufwand vor der ersten Zeile Code, an der Frage, was die Plattform zulässt.

    Ergebnisse aus Kundenprojekten

    Jede Zahl steht so in der Case Study und lässt sich dort nachlesen.

    Alle Projekte ansehen

    Marken, für die wir auf Shopify bauen.

    Groundies, MYCR7 und Gusti Leder sind drei von dreizehn Projekten, die wir mit Ausgangslage, Umsetzung und Ergebnis veröffentlicht haben.

    Häufige Fragen zum Anpassen des Shopify Checkouts

    Was ist Checkout Extensibility?

    Der Sammelbegriff für die Art, wie Shopify Anpassungen am Checkout zulässt: UI Extensions für sichtbare Bausteine, Functions für serverseitige Logik, Branding-Einstellungen für die Gestaltung und der Checkout-Editor für die Platzierung. Zusammen ersetzen sie die frühere Anpassung über die Vorlagendatei checkout.liquid.

    Brauchen wir Shopify Plus für Checkout-Anpassungen?

    Für eigene Bausteine auf den Seiten für Information, Versand und Zahlung, für die Branding-Konfiguration und für individuell entwickelte Functions: ja. Ohne Plus bleiben Erweiterungen auf Danke- und Bestellstatus-Seite, Functions aus Apps im Shopify App Store und die Basis-Gestaltung aus dem Admin. Wir prüfen vor jedem Konzept, welcher Teil Deiner Anforderungen ohne Plus umsetzbar ist.

    Wir haben noch alte Anpassungen aus checkout.liquid. Was jetzt?

    Wir nehmen auf, was die Anpassungen fachlich geleistet haben, und ordnen jede Anforderung neu zu: Extension, Function, Branding oder Verlagerung in den Warenkorb. Manches entfällt dabei ersatzlos, weil Shopify es heute selbst abdeckt.

    Was ersetzt Shopify Scripts?

    Shopify Functions. Rabatte, Versandregeln und Zahlartenlogik, die früher als Script liefen, werden als Function neu gebaut. Functions laufen innerhalb der Plattform, sind versioniert und werden als Teil einer App ausgerollt.

    Wie kommt Tracking in den Checkout?

    Über die Pixel-Umgebung von Shopify statt über eingebundene Skripte. Pixel laufen abgeschottet, erhalten definierte Ereignisse und berücksichtigen den Einwilligungsstatus des Kunden. Ereignisse werden einmal definiert und danach an alle Kanäle verteilt.

    Was ist der Unterschied zwischen Functions und Apps?

    Functions werden als Teil einer App ausgeliefert, laufen aber innerhalb der Plattform, wenn Shopify Rabatte, Versand oder Zahlarten berechnet. Sie brauchen keinen eigenen Server. Der App-Anteil dient vor allem der Konfiguration im Admin.

    Können wir den Checkout gestalterisch an unsere Marke anpassen?

    In definierten Grenzen. Farben, Schriften, Eckenradien, Abstände und Textbausteine lassen sich über die Branding-Konfiguration setzen, ergänzt um Logo und Hintergrundbilder. Ein freies Layout ist nicht vorgesehen. Wo eine Marke mehr braucht, liegt die Lösung im Warenkorb oder auf der Produktseite.

    Schick uns Deine Anforderungen an den Checkout.

    Wir ordnen jede einzelne zu: Extension, Function, Branding oder Warenkorb. Was die Plattform nicht zulässt, sagen wir Dir vor dem Konzept.

    NICCOS

    Die Seite konnte nicht geladen werden.

    Bitte lade die Seite neu. Falls gerade ein Update live gegangen ist, wird damit die aktuelle Version geladen.