Shopify Loyalty Hub

Der JeriCommerce Loyalty Hub ist das empfohlene Shopify-Erlebnis für neue Loyalty-Implementierungen. Er umfasst zwei Bereiche, die zusammenarbeiten:

• Storefront-Hub — Eine an die Marke anpassbare Online-Store-Seite, die Gästen das Programm erklärt und angemeldeten Kunden ein vollständiges Loyalty-Erlebnis bietet.
• Kundenkonto-Hub — Ein integriertes Ziel für Shopify New Customer Accounts, über das angemeldete Kunden den Loyalty Hub direkt in ihrem Konto öffnen.

Welchen Hub-Bereich verwenden? ¶

Die meisten Shops sollten beide verwenden: Der Storefront-Hub ist das zentrale Ziel für Loyalty-Aktionen, und der Kundenkonto-Hub stellt diese Funktionen auch im Kontoprofil bereit.

Empfohlener Aufbau ¶

Richte ein neues Shopify-Loyalty-Erlebnis folgendermaßen ein:

1. Öffentliche Storefront-Hub-Seite erstellen.
2. Zur Shopnavigation hinzufügen, zum Beispiel unter „Rewards“, „Loyalty“ oder dem Namen des Programms.
3. Als zentrales Loyalty-Ziel verwenden für Gäste und angemeldete Kunden.
4. Den Link zum Loyalty Hub in die Navigation des Shopify-Kundenkontos aufnehmen, wenn der Shop New Customer Accounts verwendet.
5. Kleinere Shopify-Erweiterungen nur bei Bedarf hinzufügen, etwa für Produktseiten, Warenkorb, Checkout oder Schaltflächen zum Wallet-Download.

Die übersichtlichste Customer Journey beginnt mit dem Storefront-Hub, über den Kunden das Programm entdecken und alle Loyalty-Aktionen ausführen. Danach ergänzt der Kundenkonto-Hub den Zugriff über das Kontoprofil.

Storefront-Hub ¶

Der Storefront-Hub eignet sich am besten, um das Loyalty-Programm im individuellen Markenstil des Händlers zu präsentieren. Er gehört unter Online Store > Pages und wird wie jeder Theme-Abschnitt oder App-Block im Shopify Theme Editor angepasst.

Verwende ihn für:

• Einführung ins Programm und Markengeschichte für Gäste.
• Erklärung von Sammelmöglichkeiten und verfügbaren Belohnungen für nicht angemeldete Besucher.
• Status angemeldeter Kunden, einschließlich echter Punkte, Stufenpunkte und Stufenstatus.
• Belohnungen ansehen und einlösen.
• Sammelaktionen, die Kunden direkt im Storefront ausführen können.
• Wallet-Pass-, Empfehlungs- und andere Loyalty-Aktionen des Hubs.

Einrichtung ¶

Was Kunden sehen ¶

Der Storefront-Hub passt sich daran an, ob Besucher angemeldet sind:

Der Storefront-Hub dient also sowohl als öffentliche Programmseite als auch als Loyalty-Dashboard für angemeldete Kunden.

Neuere Verbesserungen machen den Hub in aktiven Themes übersichtlicher. Stufenkarten können Bilder enthalten, Belohnungs- und Stufenbereiche verwenden flüssigere Karussells, Sammelregeln werden bei vielen Aktionen schrittweise eingeblendet und Rabatt-Schaltflächen zeigen beim Einlösen oder Kopieren eines Codes klarere Texte. Lange Beschreibungen von Sammelaktionen passen sich an die Kartenbreite an, Belohnungstexte erscheinen gut lesbar und Bannerbilder des Loyalty Hub behalten ihre natürlichen Proportionen statt fest zugeschnitten zu werden.

Bei einer aktiven Boost-Kampagne zeigt der Storefront-Hub die Aktion, ihr Enddatum und Faktoren für betroffene Sammelaktionen an. Kunden sehen erhöhte Punkte und Stufenpunkte, sofern die aktive Kampagne dafür gilt.

Punkte als Geldwert einlösen ¶

Der Storefront-Hub und der Kundenkonto-Hub unterstützen Belohnungen „Points as cash“. Im Storefront-Hub sehen angemeldete Kunden ihren Punktestand unter Your points. Wenn eine entsprechende Belohnung verfügbar ist, zeigt diese Karte außerdem den einlösbaren Rabattbetrag und eine Schaltfläche Redeem an.

Kunden klicken auf Redeem, um einen Betrag auszuwählen und die einzulösenden Punkte zu bestätigen. Danach werden der Rabattwert und der Code angezeigt. Kunden können den Code kopieren oder auf Apply discount klicken.

Kundenkonto-Hub ¶

Der Kundenkonto-Hub befindet sich in Shopify New Customer Accounts. Er ist ein einzelnes JeriCommerce-Ziel, das das Loyalty-Erlebnis im Kontobereich des Kunden bereitstellt.

Aktive Boost-Kampagnen erscheinen auch im Kundenkonto-Hub. Der Titelbereich zeigt die Aktion und ihr Enddatum. Bei betroffenen Sammelaktionen und Stufenpunkten werden die aktiven Faktoren angezeigt.

Der Kundenkonto-Hub platziert Titelgrafiken in einem passenden Rahmen, sodass Banner ohne übermäßig große Leerräume sichtbar bleiben. Auf großen Bildschirmen befindet sich der Titelbereich neben den Punkte- und Stufenkarten. Auf kleineren Bildschirmen werden die Karten untereinander angeordnet.

Zur Kontonavigation hinzufügen ¶

Storefront-Hub anpassen ¶

Der standardmäßige Storefront-Hub lässt sich im Shopify Theme Editor anpassen. Dieser Abschnitt gilt nur für den Storefront-Hub, nicht für den Kundenkonto-Hub.

Verwende die Blockeinstellungen des Storefront-Hubs für die häufigsten Anpassungen:

Passende Anpassung finden ¶

Wähle den visuellen Bereich, in dem du etwas ändern möchtest. Jede Zeile verweist auf die öffentlichen Tokens, die den jeweiligen Teil des Storefront-Hubs steuern.

CSS-Referenz für den Storefront-Hub herunterladen, in das Feld Custom CSS des Storefront-Hubs kopieren und nur die gewünschten Werte ändern. Die Datei enthält ausschließlich öffentliche --hub-*-Tokens.

Das folgende Beispiel ändert den Seitenhintergrund, die Schrift für Überschriften und die Breite des Haupttitels:

.jeri-loyalty-hub {
    --hub-color-page-bg: #faf7f2;
    --hub-font-heading-family: "Your Font", sans-serif;
    --hub-hero-title-max-width: 18ch;
}

Die Referenzdatei enthält keine internen Aliase wie --ink, --font-display oder --type-display-size. Diese Variablen erscheinen im kompilierten Stylesheet zur Kompatibilität von Komponenten und sind keine empfohlene Anpassungs-API. Namen wie --hub-color-page und --hub-font-heading sind keine aktuellen Tokens. Verwende stattdessen --hub-color-page-bg und --hub-font-heading-family.

Für vollständig benutzerdefiniertes Storefront-HTML, CSS, eine eigene Abschnittsreihenfolge sowie eigene Sammel- oder Stufenkarten verwende anstelle der Standardkonfiguration die Anleitung zu benutzerdefinierten CDN-Vorlagen.

Verwandte Anleitungen ¶

• Storefront-Widget
• Benutzerdefinierte CDN-Vorlagen