Il Widget Editor è l'hub centrale per tutti i tuoi widget React. È pensato sia per i professionisti sia per i principianti, quindi non ti servono conoscenze pregresse di CSS.
Lo trovi in Configura shop > Integrazione sul sito > Widget Editor.
Panoramica
Quando apri il Widget Editor, vedrai due sezioni principali.
- I tuoi widget - Crea e configura i tuoi widget.
- Impostazioni design - Modifica l'aspetto dei tuoi widget.
1. Creare e personalizzare i tuoi widget
Nella sezione I tuoi widget puoi configurare e gestire tutti i widget che hai creato nel Widget Editor. Sono ordinati per tipo di widget.
1.1. Tipo di widget
Puoi scegliere tra quattro tipi di widget:
- Catalog Widget: Panoramica di più prodotti.
- Product Widget: Pagina di dettaglio di uno dei prodotti che hai selezionato.
- Booking Widget: Modulo di prenotazione con calendario.
- Button Widget: Pulsante con calendario. Per maggiori dettagli, consulta il seguente articolo: Come funziona l'integrazione del Button Widget?
1.2. Impostazioni del widget
Le impostazioni dipendono dal tipo di widget selezionato:
1.2.1. Catalog Widget
- Per il Catalog Widget puoi selezionare la lingua del prodotto, il filtro per categoria e il filtro di posizione, e creare un Sub-ID.
- Le categorie sono quelle che hai creato e organizzato tu stesso. Se vuoi maggiori informazioni su come organizzare le tue categorie, leggi questo articolo: Come creare una categoria?
- In aggiunta o in alternativa, puoi usare il filtro per località. La località viene determinata dalla Città che inserisci. Per aumentare o ridurre il numero di prodotti mostrati nel Catalog Widget, puoi inserire un Raggio entro il quale il prodotto deve trovarsi per essere visualizzato.
-
Qui puoi anche creare un Sub-ID: aggiungi il Sub-ID in Impostazioni > Sub ID: lettere minuscole e numeri.
Nota: Non puoi vedere il Sub-ID nel tuo codice, perché è nascosto.
1.2.2. Product / Booking Widget
- Per il Product Widget e il Booking Widget puoi selezionare la lingua del prodotto, selezionare il prodotto e creare un Sub-ID
1.2.3. Button Widget
- Per il Button Widget puoi selezionare la lingua, collegare il pulsante a uno dei tipi di widget, selezionare il prodotto, creare un Sub-ID, aggiungere il testo del pulsante e scegliere se preferisci un pulsante fluttuante.
1.3. Selezionare un design
In questo passaggio puoi selezionare il tema con cui il widget deve essere visualizzato. Per modificare i singoli colori, consulta la sezione Impostazioni design qui sotto.
Suggerimento:
La selezione del tema può tornarti utile se aggiorni regolarmente il tuo design.
Supponiamo che tu cambi l'aspetto del tuo sito web a ogni stagione. Puoi adattare facilmente il widget al nuovo design senza dover modificare nulla nel backend.
1.4. Definire il contenuto visibile
Anche qui dipende dal tipo di widget preselezionato.
Puoi personalizzare il box del prodotto, definire in base a quali attributi il cliente può filtrare e decidere anche quanto dettagliata deve essere la pagina del prodotto.
-
Catalog Widget: Box del prodotto, Pannello filtro, Dettagli del prodotto, Dettagli prenotazione, Elenco catalogo
-
Product Widget: Box prodotto, Dettagli prodotto, Dettagli prenotazione
-
Booking Widget e Button Widget: Dettagli prenotazione
1.5. Salvare e pubblicare
Nell'ultimo passaggio dai al tuo widget un nome e una descrizione. Entrambi saranno visibili nella panoramica.
Quando clicchi su Salva, viene generato un codice HTML. Puoi incorporare questo codice nel tuo sito web.
Suggerimento:
Devi integrare il codice nel tuo sito web una sola volta! Ogni modifica che apporti nel Widget Editor si rifletterà anche sul widget presente sul tuo sito web.
2. Creare un design
Impostazioni design ti permette di creare temi e quindi di modificare l'aspetto dei tuoi widget. I temi sono composti da colori e font.
2.1. Colori
Per quanto riguarda i colori, al momento hai accesso al colore di accento, che influisce sui pulsanti principali (Prenota qui e Aggiungi al carrello).
2.2. Font
Puoi scegliere tra 8 font diversi e 5 dimensioni del font.
2.3. Raggio degli angoli
Qui puoi regolare il raggio dei bordi per tutti i widget
2.4. Salvare e pubblicare
Dopo aver finito di modificare il tuo design globale, dagli un nome e una descrizione. Quando salvi, tutti i widget che usano quel design si aggiorneranno automaticamente.
Se hai dimenticato di salvare le ultime modifiche, i tuoi progressi non andranno persi e riceverai un avviso relativo alle modifiche non salvate nella panoramica del Widget Editor.