Shopify Functions (individuelle on-demand Produkte)

[muk91]

Ich nutze Shopify noch nicht, weil ich nicht sicher bin, ob für meinen geplanten Onlineshop die richtigen Funktionen vorhanden sind. Der Onlineshop würde individuelle On-Demand Produkte anbieten (z.B. 3D-Druck Dienst, CNC, Laser). Dazu müssten die Kunden in einem ersten Schritt Dateien hochladen (STL, ZIP, STEP, ...). Kann man diese Art von Onlineshop bei Shopify erstellen und gibt es eine Dokumentation dazu?

[Gabe]

Hey @muk91 

Danke für die Angaben und vorab wollte ich fragen ob du schon ein Shop mit uns gestartet hast um alle Features dieser Plattform ausfuehrlich testen zu können?

Um dir, und unsere andere Community Mitglieder, Shopify Functions so richtig vorzustellen und zeigen, wie spannend der neue Feature ist, werde ich den ganzen Sachverhalt hier in diesem Leitfaden posten. Siehe diesen unten und lass wissen, falls du etwas anderes unter Shopify Functions verstehst.

Shopify Functions - wie man jetzt tolle Dinge im Checkout programmieren kann, ohne in den checkout.liquid zu greifen und auf ALLE Plans!

Wie oft möchte man als Shopinhaber den eigenen Kunden eine bessere Checkout Experience anbieten, wie z. B. die Zahlungsmethoden und/oder die Versandtarife in einer bestimmten senkrechten Reihenfolge anzeigen je nach einer gewissen Logik, wie Herkunftsland des User?

Solche Epic Wants unserer Händler sind unter den meist gefragten Features, die bis jetzt nur den Besitzer von Plus Shops vorbehalten waren, wo man komplexe Programmierung und Logik im checkout.liquid implementieren konnte. Auch der Zugang zum checkout.liquid naht für Plus Shops dem Ende mit dem Beginn des neuen Shopify Functions und des Checkout UI Extensions. Siehe auch unsere Blog Artikel hier:

• Shopify Functions: The New Way to Extend and Customize ...
• Build Custom Commerce Experiences with Shopify Functions

Vorab ein paar wichtige Punkte über Shopify Functions:

• Manche Function APIs sind nur im Developer Preview erhältlich.
• Shopinhaber, die checkout.liquid Anpassungen haben, müssen zur checkout extensibility upgraden, um die neuen Function APIs zu nutzen.

Shopify Functions ermöglicht es Entwicklern, die Backend-Logik, die Teile von Shopify antreibt, anzupassen. In diesem Leitfaden werde ich die folgenden neuen Shopify-Funktionen und APIs vorstellen:

• Wie man die Shopify Backend Logik erweitern kann, wie z. B. die folgenden Use-Cases:
• Eine neue Function bauen, die einen automatischen Rabatt oder Staffelpreis (volume discount) im Checkout auslöst, wenn bestimmte Produkte in einer bestimmten Anzahl oder Kombination in den Checkout gelegt werden.
• Oder die Zahlungsmethoden neu anordnen, abhängig von bestimmten Faktoren wie dem Herkunftsland des Kunden. Hier eine typische Frage aus diesem Leitfaden von unserem Shopify Partner Henry Auffahrt das jetzt endlich gelöst werden kann:

• Oder bestimmte Versandmethoden bzw. Tarife anzeigen oder neu anordnen, je nach einer gewissen Logik, wie welche Produkte in den Warenkorb gelegt wurden, oder die Ship-to- Adresse oder Land. Use-case: Kunden wählen aus Versehen den ersten Tarif, da dieser vorausgewählt ist, da standardmäßig das System automatisch die günstigste verfügbare Versandoption an erster Stelle anzeigt:
  

Jetzt kann man endlich diese Default Logic des "unantastbaren" Shopify Backend modifizieren und mit einer angepassten Logik ersetzen, ohne das Shopify Backend System zu berühren mit der ständig wachsenden Anzahl an Shopify Functions APIs!

Unterschiede zum checkout.liquid und Shopify Scripts

Der Unterschied zu den älteren Checkout Features, wie Shopify Scripts und dem checkout.liquid (hauptsächlich für Plus Shops vorbehalten) ist das man traditionsgemäss den checkout.liquid anpassen musste um bestimmte Widgets im Checkout ergänzen können, wie Upsells oder Trust Badges, über die Shopify Scripts oder den Liquid Code.

Die Performance der neuen Functions (<5ms) stellt die bald sunsetted und deprecated Scripts (Sommer, 2024) ebenfalls in den Schatten, was z. B. wichtig für die notwendige Performance deines Checkouts während deinen Flash Sales ist und Scripts liefen auch nur auf Ruby, wobei die Functions auf alle Sprachen laufen die zu WebAssembly compilen (die compiled Modules dürfen den File-size Limit von 256Kb nicht überschreiten, könnte aber in der Zukunft erhöht werden). Wenn man Scripts ändern wollte, musste man auch wieder in den Code gehen, wobei bei Functions kann man das Behaviour direkt im Admin Dashboard UI ändern was eine viel verbesserte UX bietet.

Also sollte man jetzt darüber nachdenken, zu Functions zu migrieren, oder, wenn man Shopify Partner ist, die eigenen Klienten empfehlen, zu Functions zu migrieren.

Was sind die APIs, die bis heute im neuen Functions Feature erhältlich sind?

Anfangs war es der Order Discount und der Product Discount API erhältlich und mittlerweile sind es die folgenden Erweiterungen:

Delivery Customization API	Benenne, ordne und sortiere die Lieferoptionen um, die den Käufern während der Kaufabwicklung zur Verfügung stehen.
Order Discount API	Erstelle eine neue Art von Rabatt, der auf alle Waren im Warenkorb angewendet wird.
Product Discount API	Erstelle eine neue Art von Rabatt, der auf ein bestimmtes Produkt oder eine Produktvariante im Warenkorb angewendet wird.
Payment Customization API	Benenne, ordne und sortiere die Zahlungsmethoden um, die den Käufern während der Kasse zur Verfügung stehen.

APIs im Developer Preview:

Cart and Checkout Validation API	Biete deine eigene Validierung eines Warenkorbs und der Kasse an.
Fulfillment Constraints API	Gib deine eigene Logik an, wie Shopify eine Bestellung erfüllen und zuordnen soll.
Order Routing Location Rule API	Gib für jeden Artikel eine eigene Rangfolge der Standorte an, wenn du die Bestellung weiterleitest.
Shipping Discount API	Erstelle eine neue Art von Rabatt, der an der Kasse auf einen oder mehrere Versandtarife angewendet wird.

API noch im Beta:

Cart Transform API

Erweitere die Warenkorbpositionen und aktualisiere die Darstellung der Warenkorbpositionen.

Weitere Good News ist, dass die Functions jetzt auch komplett in JavaScript geschrieben werden können, wenn man vor allem in Node.js programmieren möchte. Um JavaScript zu WebAssembly zu compilen, einfach den neuen Javy Tool von Shopify verwenden der komplett in das CLI integriert ist. Hier ein super Blog Artikel zu dem Thema.

Der Delivery Customizations API - wie man die Versandmethoden oder Tarife im Checkout neu anordnen kann:

Vorab - die folgenden Anpassungen sind nicht mit Bestellentwürfe, Shop Pay, sowie local delivery oder local pickup kompatibel.

Es gibt mehrere Use-Cases die Lieferoptionen im Checkout neu anzuordnen oder zu ändern. Mit den Lieferanpassungen kannst du die Lieferoptionen ausblenden, neu ordnen und umbenennen, die den Käufern im Checkout angezeigt werden. Was muss man machen, um das mit dem neuen Functions Feature zu erreichen?

Um das zu erreichen muss man die folgenden Aufgaben erledigen:

1. Richte deine Testumgebung für die Verwendung der Shopify Functions ein.
2. Eine Function zur Anpassung der Lieferungsoptionen erstellen.
3. Konfiguration der Lieferanpassung mit Hilfe von Meta-Feldern.
4. Du erstellst eine Benutzeroberfläche für die Lieferanpassung mit App Bridge.

Voraussetzungen (die Technik ist mittlerweile sehr ausgereift und benutzerfreundlich geworden):

• Du bist unseren Partner Program beigetreten (geht relativ schnell).
• Du hast ein gratis Entwickler Shop erstellt (mehr dazu hier).
• Du hast eine App erstellt die das Shopify CLI 3.0 oder höher verwendet.
• Du hast deine App in deinem Development Store installiert.

Alle weitere Schritte findest du in unserer Anleitung ab diesen Punkt. und dann auch hier. 

Du kannst also diese Lieferanpassungen verwenden, um die Lieferoptionen auszublenden, neu anzuordnen und umzubenennen, die den Käufern an der Kasse zur Verfügung stehen. 

In diesem Tutorial verwendest du Shopify-Funktionen, um eine Lieferoption umzubenennen, die Kunden an der Kasse angeboten wird, basierend auf dem Versandziel. Das kann die Kundenerfahrung verbessern, wenn die Tarife mehr bedeutungsvolle Titel haben, bedingt darauf in welchem Ship-to Ziel oder Land der Kunden sich befindet. 

Du wirst auch lernen, wie du die folgenden Aufgaben erledigst:

• Wie du den Startcode für diese Shopify Functions erstellst.
• Wie du den GraphQL verwendest, um die Eingabe deiner Funktion zu definieren.
• Die Funktionen auf der Shopify-Plattform deployen/bereitstellen.
• GraphQL verwenden, um Function Owners in einem Shopify Store zu erstellen.
• Die Logs für deine Function überprüfen.

Schritt 1: Erstelle der Lieferanpassungsfunktion

Um deine Lieferanpassungsfunktion zu erstellen, kannst du den Shopify CLI verwenden, um eine Starterfunktion zu generieren, die Eingaben für deine Funktion mit einer Input Query festzulegen und deine Funktionslogik mit JavaScript oder Rust zu implementieren.

• Siehe die Schritte hier.

Schritt 2: Erstelle die Lieferanpassung mit GraphiQL

Um deine Funktion zu aktivieren, musst du eine Lieferanpassung in dem Store erstellen, in dem du deine App installiert hast. Das kannst du mit der GraphQL-Mutation deliveryCustomizationCreate tun.

In den folgenden Tutorials wirst du Metafelder in dieser Lieferanpassung verwenden, um deine Funktion zu konfigurieren und eine Benutzeroberfläche zu erstellen, damit Händler die Funktion selbst konfigurieren können. 

• Siehe die Schritte hier.

Schritt 3: die delivery customization testen

• Siehe die Schritte hier

Schritt 4: Füge Konfiguration zu deinen Lieferanpassungen hinzu

Du kannst Metafelder für die Konfiguration deiner Lieferanpassungsfunktion verwenden. Metafelder bieten mehr Flexibilität bei der Verwendung von Funktionen und sind eine Voraussetzung für die Erstellung einer Händler-Benutzeroberfläche zur Konfiguration von Funktionen. 

• Siehe die Schritte dafür hier.

Der Payments Customizations API - wie man die Bezahlmethoden im Checkout neu anordnen kann:

Mit Zahlungsanpassungen kannst du die Zahlungsoptionen, die den Käufern beim Checkout zur Verfügung stehen, ausblenden, neu anordnen und umbenennen. In dieser Tutorial-Reihe erstellst du mit Shopify-Funktionen eine Funktion, mit der Händler eine Zahlungsoption ausblenden können, die den Kunden beim Checkout angeboten wird, basierend auf dem Gesamtwert des Warenkorbs.

Im Großen und Ganzen sind es die selben Schritte wie oben, aber mit kleinen Unterschieden, wie in unserer Anleitung hier aufgelistet werden.

Starte jetzt mit den Payments Customizations in unserem Tutorial hier.

[muk91]

Guten Tag Gabe

Vielen Dank für die Antwort aber leider bezieht sich diese Antwort in keinsterweise auf meine Frage 😄 Meine Frage wäre: Gibt es eine Funktion/ Möglichkeit in Shopify, bei der der Kunde in einem ersten Schritt Dateien hochladen kann, wenn der Shop vorallem auf individualisierte, auf Anfrage erzeugte Produkte abzielt?

Um die Bezahlmethoden kümmere ich mich dann später 😉

[Gabe]

@muk91 

Oh, tut mir leid. Deine Headline war leider etwas unklar mit dem Titel "Shopify Functions". Deswegen meine Informationen oben. Aber du meinst ja etwas wie functions & features anstatt den oben genannten Sachverhalt.

Nun lass uns das mal hier anschauen denn du fragst folgendes: Gibt es eine Funktion/ Möglichkeit in Shopify, bei der der Kunde in einem ersten Schritt Dateien hochladen kann, wenn der Shop vor allem auf individualisierte, auf Anfrage erzeugte Produkte abzielt?

Eine Möglichkeit dem Kunden einen Dateiupload anzubieten wäre, eine Product Options App zu verwenden und die Datei Uploads werden in den unten aufgelisteten Demos gezeigt. Eine ganz schlicht und einfache Datei Upload App findest du hier. Aber unten zeige ich weitere App Demos die etwas mehr als nur das können.

In allen Fällen ist es wichtig, sicherzustellen, dass die Varianten und Produkte gut organisiert sind, damit der Kunde eine klare Vorstellung davon hat, was er/sie auswählt und was er/sie kauft. Die Apps können das ganz gut und können das Kundenerlebnis sowie die AOV, CLV, und wiederkehrende Conversions in deinem Shop so richtig boosten.

Das kannst du beispielsweise mit unseren Product Options Apps machen und hier wäre das beste mal durch ein paar Demos zu klicken und zu sagen ob da etwas in Frage für euch käme. 

Siehe ein paar Demos solcher Apps hier:

• Product Personalizer
• Shoppad
• Selbe mit etwas conditional logic
• Customily
• Globo App
• Globo App all options
• Themedev App
• Custom products app
• Advanced product options
• Dynamic product options
• Hulkapps App

Dann kann man auch einen sog. Produkt Router zeigen wo der Kunde seine Angaben zuerst einträgt bevor man einen Vorschlag bekommt. Solche Apps findest du auch unter der Suche "Product customizer" oder "Product builder" im App Store und zwei Apps die ich kenne die sehr beliebt sind, sind die Product Customizer App von Zakeke, Inkybay, und die Box Builder App von BoxUp. Mir scheint die Letztere die in deinem Beispiel zu sein, wie man auf deren Demo Seite sehen kann.

Dann gibt es auch eine "Product Quiz Builder" App wo man fragen stellen kann und die Produkte werden dann je nach Kunden Antworten angezeigt, ist das richtig? Vieles kommt darauf an was du für Produkte verkaufst (konnte ich deiner Frage nicht entnehmen) und was du für Fragen deinen Kunden stellen möchtest denn Beauty Produkte sind ja grundlegend anders als beispielsweise Sportbekleidung und somit auch die Quiz Fragen die man stellen muss. Ich habe hier ein paar Beispiele gefunden die dir gefallen könnten und vielleicht ist das was dabei:

• https://camillebeckman.com/pages/camille-beckman-quiz
• https://teelixir.com/pages/product-recommendations
• https://www.betterwayhealth.com/
• https://evolveskateboardsusa.com/pages/board-quiz
• https://demo.quizkitapp.com/pages/skincare-quiz-4
• https://siesta-pillows.myshopify.com/tools/perfect-product-finder/perfect-pillow-finder#/
• Siehe weitere solche App Demos hier: https://apps.shopify.com/search?q=quiz

Alles Apps bieten mehrere Vorlagen der Quizze an, je nachdem was man braucht.

Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.
Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

Wenn du es stattdessen lieber DIY programmieren möchtest dann können wir gerne hier darüber reden.

[muk91]

@Gabe 

Vielen Dank für die Rückmeldung und sorry für die verwirrende Headline!

Okey zum etwas spezifischer zu werden beschränke ich mich bei meinem Shop zuerst auf einen 3D Druck Dienst mit einem oder mehrer 3D Druckern. Das heisst meine Produkte stellen in erster Linie nur verschiedene Grund-Materialien dar (PLA, PETG, TPU, ABS, ...) aus denen der Kunde wählen kann. Dazu muss der Kunde erst eine 3D-Datei - vorzugsweise im STL Datenformat (odr auch STEP, zip) - hochladen mit seinem "Bauteil" (Deko Figur, Werkzeug, Prototyp, etc.). Im Idealfall wird seine Datei bereits auf der Website erkannt, viasualisiert und gewisse Daten werden ausgelesen wie Volumen, welche wiederum für das Berechnen des Preises benötigt werden.

Dann geht es weiter mit Farbauswahl, Skalierung der Grösse und und und. Speziell im 3D Druck ist, dass man mehrere Teile gleichzeitig drucken könnte sofern der maximale Druckbereich nicht überschritten wird .

Also so wie ich das verstehe, wird das bei Shopify über diese Apps gelöst bei der man erst mal die passende App finden müsste. Danke für die Demos. Muss ich mir bei Gelegenheit in Ruhe anschauen.

Wie wäre das mit DIY pragrammieren genau? In welchem Umfang wäre das möglich und in welcher Programmiersprache?

Gruss und danke

[Kai]

Hi @muk91,

für eine DIY-Lösung hast du folgende Optionen:

Um dynamische Inhalte zu erzeugen kannst du unsere Programmiersprache Liquid verwenden. Während die Shopify API Daten abrufen und ändern kann. 
JavaScript, HTML und CSS Frontend-Anpassungen können verwendet werden um die interaktiven Elemente einzubauen. Und um die Visualisierung von 3D-Dateien zu rendern und die Volumen sprich Preise korrekt zu berechnen.

Falls du Unterstützung hierbei haben möchtest, kann ich die Shopify Experten empfehlen, die du für eine solche Implementierung einstellen kannst.

Die Shopify Expert Seite kann auf zwei Arten genutzt werden. Entweder veröffentlichst du dort einen Job und erhältst darauf Kostenvoranschläge oder du suchst per Kriterien nach einem Experten und bittest auf diese Weise um einen Kostenvoranschlag:

Welche Route wäre dir lieber?