Tutorial Widget di Base

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

1. Crea dall'Elenco

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

Figura 1: Creare Widget

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

2. Definisci le Impostazioni Generali

Figura 2: Impostazioni Generali

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

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

3. Seleziona l'Origine Prodotto

Vai avanti 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 e seleziona il modello "Consigliato per Te (Fanplayr AI)". 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 è la versione finale dopo alcune modifiche. Dopo è 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 Sfondo" a hex #031044;

Nel primo componente "Blocco di Testo":

• Modifica il testo "Contenuto" in "Crediamo ti piaceranno questi prodotti". Assicurati che il colore del testo non sia impostato.
• Rimuovi "Spaziatura Inferiore" o imposta 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 successivo
• Imposta "Spaziatura Articoli" 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 non vengono restituiti prodotti, 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 leggermente diverso dal vivo rispetto all'editor

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