Tutorial Widget di Base

Segui questo tutorial per creare un widget di merchandising overlay di base. Prima di iniziare, assicurati di consultare i prerequisiti. Assicurati inoltre di avere un URL valido sul tuo sito.

1. Crea da Lista

Inizia navigando alla sezione "Merchandising" del portale e clicca su "Widget" nella barra laterale sinistra. Vedrai un elenco di widget (possibilmente vuoto). Da qui, clicca su "Aggiungi Widget" nell'angolo in alto a destra dello schermo.

Figura 1: Crea Widget

Nel popup che segue, scegli l'opzione "Raccomandazione" e clicca su "Avanti" per passare al passo successivo.

2. Definisci Impostazioni Generali

Figura 2: Impostazioni Generali

Inizia personalizzando le impostazioni generali del widget. In questo tutorial, devi modificare solo due elementi:

• URL di Visualizzazione: Impostalo su una pagina specifica del tuo sito web. Per questo tutorial, lo impostiamo su un sito web di test all'indirizzo https://fp-dev-1.myshopify.com
• Attivazione all'Intento di Uscita: Scorri verso il basso e disabilita questa impostazione.;

3. Seleziona Origine Prodotto

Procedi e clicca sul componente "Raccomandazione" nella barra laterale sinistra per visualizzare le impostazioni delle raccomandazioni di prodotto. Quindi, nella parte superiore della barra laterale delle impostazioni, clicca su "Modifica" all'impostazione "Origine Prodotto". Dovresti vedere il popup qui sotto.

Figura 3: Origine Prodotto

Nella prima impostazione "Modello", trova il modello "Raccomandato per Te (Fanplayr AI)" e selezionalo. Non è necessario modificare le altre impostazioni. Clicca su "Aggiorna" per confermare le modifiche.

4. Personalizza l'Aspetto

Ora diamo al widget un tocco unico. Di seguito è riportata la versione finale dopo alcune modifiche. Successivamente è un elenco di ogni modifica apportata rispetto all'impostazione predefinita per ottenere questo aspetto.

Figura 4: Anteprima Aggiornata

In "Impostazioni Generali"

• Imposta "Larghezza" a 600px
• Imposta "Raggio Angoli" a 20px
• Imposta "Carattere Base -> Colore" a bianco
• Imposta "Colore di Sfondo" a hex #031044;

Nel primo componente "Blocco di Testo":

• Modifica il testo "Contenuto" in "Pensiamo che adorerai questi". Assicurati che il colore del testo sia non impostato.
• Rimuovi "Padding Inferiore" o impostalo a 0

Nel componente "Raccomandazione":

• Imposta "Forma Immagine" a Quadrato
• Deseleziona "Prezzo Prodotto"
• Clicca su "Modifica Stile" su "Nome Prodotto";
  • Assicurati che la casella di controllo sia selezionata accanto a "Grassetto" nell'editor di stile del testo seguente
• Imposta "Spaziatura Elementi" a 30px

5. Pubblica

Sentiti libero di continuare a modificare per personalizzare ulteriormente il tuo widget. Una volta completato, clicca sull'icona di modifica nell'angolo in alto a sinistra per dare un nome al tuo widget. Questo nome viene semplicemente utilizzato per identificare il widget nel nostro sistema.;

Una volta impostato un nome, clicca su "Pubblica" nell'angolo in alto a destra per pubblicare finalmente il tuo widget sul tuo sito.

6. Visualizza

Naviga all'URL che hai definito nel passo 2 per vedere il tuo widget appena pubblicato! Dovrebbe apparire al centro dello schermo pochi secondi dopo il caricamento della pagina.

Figura 5: Widget Live

Risoluzione dei Problemi

Non vedo il widget sul mio sito

• Assicurati che lo script di Fanplayr sia in esecuzione sul tuo sito.;
• Ricontrolla il tuo URL di Visualizzazione
• È possibile che il modello selezionato non abbia restituito prodotti. Se nessun prodotto viene restituito, il widget non verrà mostrato. Allo stesso modo, se il modello selezionato si basa su un prodotto attualmente visualizzato, il widget verrà mostrato solo sulle pagine dei prodotti.

Il mio widget appare un po' diverso dal vivo rispetto all'editor

• I widget live ereditano parte del CSS dalla tua pagina, inclusa in particolare la font-family che controlla l'aspetto del tuo testo. Valuta di utilizzare la funzione Anteprima Live per vedere come apparirà il tuo widget sul tuo sito prima della pubblicazione.