Tutorial Base per Shopper

Segui questo tutorial per imparare a creare un Personal Shopper.

Per i prerequisiti, consulta la documentazione Creazione di Personal Shopper. Devi disporre di un Catalogo prodotti valido e di almeno un modello di raccomandazione abilitato per il tuo Catalogo. Inoltre, per questo tutorial, devi avere un URL di incorporamento valido sul tuo sito e il selettore di incorporamento corrispondente.

1. Crea dall'elenco Shopper;

Figura 1: Elenco Shopper

Fai clic su "Create shopper for Default Catalog" (Crea shopper per catalogo predefinito) per avviare il processo di creazione del tuo primo Personal Shopper.

2. Definisci la Configurazione a Livello di Widget

Figura 2: Configurazione a Livello di Widget

Fai clic su "General Settings" (Impostazioni generali) a sinistra e inserisci il tuo Embed URL (URL di incorporamento) e Embed Selector (Selettore di incorporamento) nel gruppo di impostazioni "Widget Level Config" (Configurazione a livello di widget) nella barra laterale destra. Nella Figura 2 i valori inseriti sono:

• Embed URL: https://fp-dev-1.myshopify.com/pages/personal-shopper
• Embed Selector: #fp_personal_shopper - questo farà riferimento a un elemento HTML con id="fp_personal_shopper".

3. Seleziona la Fonte del Prodotto

Figura 3: Impostazione della Fonte del Prodotto

Il passo successivo è configurare l'impostazione "Product Source" (Fonte del Prodotto). Fai clic sul componente di raccomandazione e poi su "Change" (Modifica) sotto l'impostazione "Product Source" nella barra laterale destra.;

Nel popup, imposta l'impostazione "Model" (Modello) su "Recommended For You (Fanplayr AI)". Questo indica al sistema di utilizzare l'algoritmo interno di Fanplayr "raccomandato per te" per determinare i prodotti da mostrare in questa sezione di raccomandazione.;

Per rendere il Personal Shopper snello in questo esempio, imposta l'impostazione "Product Limit" (Limite Prodotti) su 5. Ciò significa che un massimo di cinque prodotti verranno mostrati in questo componente di raccomandazione.

Fai clic su "Update" (Aggiorna) per confermare le modifiche.

4. Personalizza le Schede Prodotto

Figura 4: Scheda Prodotto

Scorri verso il basso nelle impostazioni del componente fino alla sezione "Product Tile" (Scheda Prodotto). Qui faremo alcune piccole modifiche per migliorare l'aspetto delle schede prodotto.;

1. Imposta l' "Image Background Color" (Colore di sfondo dell'immagine) su un colore neutro come un grigio chiaro. Questa impostazione aggiungerà un colore di sfondo a qualsiasi immagine di prodotto che contenga aree trasparenti.
2. Imposta la forma dell'immagine su "Square" (Quadrato).
3. Imposta l' "Image Corner Radius" (Raggio d'angolo dell'immagine) a 16px per aggiungere dei bei bordi arrotondati alle tue immagini prodotto.
4. Fai clic su "Edit style" (Modifica stile) sotto "Product Price" (Prezzo prodotto). Questo aprirà un editor di impostazioni specifico per l'impostazione "Product Price" che sostituirà la barra laterale. Trova la casella di controllo "Italic" (Corsivo) e assicurati che sia abilitata. Questo conferisce ai prezzi dei prodotti un aspetto leggermente più elegante. Assicurati di fare clic sul pulsante Indietro nella parte superiore dell'editor per tornare al resto delle impostazioni del componente.

5. Pubblica Shopper

I tuoi prodotti dovrebbero apparire come mostrato nella Figura 5. Se i prodotti mancano, potrebbe essere a causa della mancanza di dati di addestramento necessari per mostrare i prodotti "Recommended for you". Prova a cambiare il modello con un algoritmo diverso come "Ranking by Views" (Classifica per visualizzazioni) se ciò accade.

Figura 5: Shopper con schede prodotto aggiornate

Sentiti libero di personalizzare altre impostazioni nel tuo Personal Shopper. Una volta soddisfatto, fai clic su "Publish" (Pubblica) e conferma quando richiesto. Il Personal Shopper verrà pubblicato immediatamente dopo la conferma.

6. Visualizza Shopper sul Sito

Naviga all'URL definito nella tua impostazione "Embed URL" e vedi il tuo personal shopper in diretta sul tuo sito!

Figura 6: Personal Shopper live sul sito

Risoluzione dei problemi

Non vedo il personal shopper sul mio sito

• Assicurati che lo script di Fanplayr sia in esecuzione sul tuo sito.
• Ricontrolla il tuo Embed URL e assicurati che l'Embed Selector esista su quella pagina.

Vedo l'intestazione ma nessun prodotto

• La causa più comune di ciò è che il modello selezionato non restituisce alcun prodotto. Questo potrebbe essere dovuto a una mancanza di dati di addestramento o a una mancanza di prodotti nel tuo Catalogo. Contatta il tuo rappresentante Fanplayr per assistenza.

Il mio shopper appare leggermente diverso in diretta rispetto all'editor

• I Personal Shopper ereditano alcuni CSS dalla tua pagina, inclusa in particolare la font-family che controlla l'aspetto del tuo testo. Considera l'utilizzo della funzione Live Preview per vedere come apparirà il tuo Personal Shopper sul tuo sito prima di pubblicare.