Shopify Loyalty Hub

JeriCommerce Loyalty Hub è l'esperienza Shopify consigliata per le nuove implementazioni loyalty. Comprende due interfacce che lavorano insieme:

• Hub storefront - Una pagina Online Store personalizzabile che spiega il programma agli ospiti e diventa un'esperienza loyalty completa per i clienti connessi.
• Hub nell'account cliente - Una destinazione integrata nei Shopify New Customer Accounts che offre ai clienti connessi l'hub loyalty nella propria area account.

Quale interfaccia dell'hub scegliere ¶

La maggior parte dei negozi dovrebbe usare entrambi: l'hub storefront è la destinazione loyalty principale, mentre quello nell'account mantiene le azioni loyalty disponibili nel profilo account cliente.

Struttura consigliata ¶

Segui questa struttura per configurare una nuova esperienza loyalty Shopify:

1. Crea una pagina pubblica per l'hub storefront.
2. Aggiungila alla navigazione del negozio con un'etichetta come "Rewards", "Loyalty" o il nome del programma.
3. Usala come destinazione loyalty principale per ospiti e clienti connessi.
4. Aggiungi il link al Loyalty Hub alla navigazione dell'account cliente Shopify, se il negozio usa New Customer Accounts.
5. Aggiungi estensioni Shopify più piccole solo quando servono per posizionamenti specifici, ad esempio pagine prodotto, carrello, checkout o pulsanti per scaricare il wallet.

Il percorso cliente più semplice parte dall'hub storefront per la scoperta e le azioni loyalty complete, poi aggiunge il link all'hub account per accedere dal profilo cliente.

Hub storefront ¶

L'hub storefront è il posto migliore per presentare il programma loyalty con lo stile del brand del merchant. Si trova in Online Store > Pages e si personalizza nell'editor del tema Shopify come qualsiasi altra sezione o blocco app.

Usalo per mostrare:

• Presentazione del programma e storia del brand agli ospiti.
• Metodi per accumulare punti e premi disponibili, per spiegare il programma ai visitatori non connessi.
• Stato dei clienti connessi, inclusi punti, punti livello e stato del livello reali.
• Consultazione e riscatto dei premi.
• Azioni dei flussi di accumulo che i clienti possono completare nello storefront.
• Wallet pass, referral e altre azioni loyalty offerte dall'hub.

Configurazione ¶

Cosa vedono i clienti ¶

L'hub storefront cambia in base allo stato di accesso del visitatore:

Così l'hub storefront funziona sia come pagina pubblica del programma sia come dashboard loyalty per i clienti connessi.

Le ultime migliorie rendono l'hub più facile da consultare nei temi live. Le schede dei livelli possono mostrare immagini opzionali; le sezioni premi e livelli usano caroselli più fluidi; le regole di accumulo compaiono progressivamente quando le azioni sono numerose; i pulsanti sconto hanno testi più chiari quando i clienti riscattano o copiano un codice. Le descrizioni lunghe dei flussi vanno a capo nelle schede, quelle dei premi appaiono come testo leggibile e le immagini banner dell'hub mantengono le proporzioni naturali invece di essere forzate in un ritaglio fisso.

Quando è attiva una campagna boost, l'hub storefront mostra la promozione, l'ora di fine e i moltiplicatori sulle azioni di accumulo interessate. I clienti vedono i punti maggiorati e i punti livello dove si applica la campagna attiva.

Riscatta Points as cash ¶

L'hub storefront e quello account supportano i premi Points as cash. Nell'hub storefront, i clienti connessi vedono il saldo in Your points. Quando è disponibile un premio Points as cash, questa scheda mostra anche lo sconto riscattabile e un pulsante Redeem.

I clienti fanno clic su Redeem per scegliere l'importo e confermare quanti punti vogliono spendere. Dopo il riscatto, il premio mostra il valore dello sconto e il codice. I clienti possono copiare il codice o fare clic su Apply discount.

Hub nell'account cliente ¶

L'hub nell'account cliente si trova nei Shopify New Customer Accounts. È un'unica destinazione JeriCommerce che include l'esperienza loyalty nell'area account del cliente.

Anche le campagne boost attive appaiono nell'hub account. L'area hero mostra la promozione e l'ora di fine; le azioni di accumulo interessate e i punti livello mostrano i relativi moltiplicatori.

L'hub account mantiene la grafica hero in un riquadro con proporzioni definite, così i banner restano visibili senza grandi spazi vuoti. Sugli schermi più grandi, la hero appare accanto alle schede dei punti e dei livelli. Sugli schermi più piccoli, le schede si impilano.

Aggiungilo alla navigazione dell'account ¶

Personalizzazione dell'hub storefront ¶

L'hub storefront predefinito è progettato per essere personalizzato dall'editor del tema Shopify. Questa sezione riguarda solo l'hub storefront, non quello nell'account cliente.

Usa le impostazioni del blocco per le modifiche più comuni:

Trova la personalizzazione giusta ¶

Usa l'area visiva che corrisponde alla modifica desiderata. Ogni riga indica i token pubblici che controllano quella parte dell'hub storefront.

Scarica il riferimento CSS dell'hub storefront, copialo nel campo Custom CSS dell'hub storefront e modifica solo i valori necessari. Il file contiene solo i token pubblici --hub-*.

Ad esempio, questo codice modifica lo sfondo della pagina, il carattere del titolo e la larghezza del titolo hero:

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

Il file di riferimento non include alias interni come --ink, --font-display o --type-display-size. Queste variabili compaiono nel foglio di stile compilato per mantenere la compatibilità dei componenti, ma non sono l'API di personalizzazione consigliata. Nomi come --hub-color-page e --hub-font-heading non sono token attuali. Usa invece --hub-color-page-bg e --hub-font-heading-family.

Per personalizzare completamente HTML storefront, CSS, ordine delle sezioni, righe di accumulo o schede dei livelli, consulta la guida ai modelli CDN personalizzati invece della configurazione predefinita dell'hub.

Guide correlate ¶

• Storefront Widget
• Modelli CDN personalizzati