Cosa è il builder
Il builder dello storefront è un editor visuale che ti permette di progettare ogni pagina del tuo store senza scrivere codice. Le modifiche vengono visualizzate in anteprima al centro dello schermo. Nulla sarà visibile ai clienti finché non clicchi su Pubblica.
La struttura del builder
Il builder è composto da tre aree:
- Barra laterale sinistra: cinque schede impilate come icone lungo il bordo sinistro. Dall'alto verso il basso sono Mercati (bandiera), Pagine, Sezioni, Impostazioni (ingranaggio) e l'assistente AI (Amed) fissato in basso.
- Pannello di controllo: si apre quando selezioni una sezione o un blocco e mostra tutte le impostazioni relative.
- Area di anteprima: una vista dal vivo del tuo store esattamente come la vedranno i clienti.
Cambiare pagina e mercato
Apri la scheda Pagine per passare tra le pagine che puoi modificare: Home, Prodotto, Landing, Collezione, Carrello, Checkout, Grazie, Ricerca, Policy, Contatti e 404. Per una descrizione di ogni pagina vedi Pagine che puoi modificare. Apri la scheda Mercati (la prima, icona bandiera) per cambiare mercato. Ogni mercato mantiene il proprio template e la propria cronologia di annullamento per ogni pagina, quindi le modifiche in un mercato non influenzano gli altri.
Anteprima, viewport e Inspector
Un selettore di viewport ti permette di vedere l'anteprima a diverse larghezze con i pulsanti Schermo intero, Desktop e Mobile. Il selettore mostra solo le opzioni che si adattano alla finestra corrente, quindi su schermi stretti alcuni pulsanti scompaiono. La barra superiore ha anche un pulsante Anteprima (icona occhio) che apre il tuo store live in una nuova scheda del browser e un pulsante Esci dal builder.
La modalità Inspector è attiva di default (l'icona del cursore nella barra superiore è evidenziata). Quando è attiva, cliccando su qualsiasi elemento nell'anteprima selezioni immediatamente quella sezione o blocco e si apre nel pannello di controllo: è il modo più veloce per saltare direttamente a qualcosa senza scorrere la barra laterale. Clicca il pulsante Inspector per disattivarla.
Aggiungere una sezione
- Apri la scheda Sezioni per la pagina corrente.
- Clicca il pulsante Aggiungi sezione (icona più) nell'elenco, oppure apri il menu di una sezione e scegli Aggiungi sezione prima o Aggiungi sezione dopo.
- Si apre un selettore che mostra tutti i tipi di sezione che puoi ancora aggiungere su questa pagina. Clicca su uno per aggiungerlo.
Ogni tipo di sezione ha un massimo per pagina. Quando un tipo raggiunge il limite, scompare dal selettore e quando uno slot è pieno il pulsante Aggiungi sezione viene disabilitato con un messaggio che indica che è stato raggiunto il massimo. I tipi di sezione sono anche specifici per pagina (ad esempio, hero o newsletter sono solo per Home). Il catalogo completo dei tipi e dei limiti è in Sezioni e blocchi.
Aggiungere un blocco dentro una sezione
Seleziona una sezione, poi nel suo pannello di controllo clicca su Aggiungi blocco. I blocchi sono gli elementi all'interno di una sezione: testo, immagini, pulsanti, gruppi di layout, divisori e altro. I tipi di blocco disponibili e il numero massimo variano in base alla sezione.
Il menu della sezione (copia, duplica e altro)
Per accedere a tutte le azioni di una sezione, selezionala e clicca sull'icona menu in alto nel pannello di controllo, oppure fai clic destro sulla sezione nella barra laterale. Il menu contiene:
- Copia: copia l'intera sezione (contenuto e stile).
- Copia solo stile: copia solo lo stile visivo.
- Incolla: incolla una sezione copiata. L'indicazione mostra dove verrà inserita (Dopo, Dentro o Sovrascrivi). È disabilitato con una motivazione se non c'è nulla copiato, se è stato raggiunto il limite o se il tipo non è consentito in quel punto.
- Incolla solo stile: applica lo stile copiato alla sezione selezionata. Disabilitato in caso di tipo non corrispondente o se non c'è nulla copiato.
- Duplica: crea una copia subito sotto l'originale, solo nella pagina corrente. Disabilitato se è stato raggiunto il limite per pagina.
- Nascondi / Mostra: alterna la visibilità. Le sezioni nascoste restano nel template ma non sono visibili ai clienti.
- Elimina: rimuove la sezione. Puoi annullare per ripristinarla.
Le righe della barra laterale hanno anche un'icona occhio (Nascondi/Mostra) e un'icona cestino (Elimina) direttamente. Le sezioni obbligatorie non possono essere nascoste o eliminate, quindi le informazioni prodotto nella pagina Prodotto e le informazioni landing nella pagina Landing non hanno l'icona cestino.
Riordinare sezioni e blocchi
Nell'elenco Sezioni, trascina una riga verso l'alto o il basso per cambiare la posizione sulla pagina. L'anteprima si aggiorna subito. I blocchi si riordinano allo stesso modo trascinandoli nel pannello di controllo.
Applicare una sezione a tutte le pagine
Header, Footer, Barra annunci e Codice personalizzato compaiono su ogni pagina. Per applicare una copia modificata ovunque, apri il menu di quella sezione e scegli Applica a tutte le pagine. Questo sovrascrive la sezione corrispondente su ogni pagina del mercato corrente che la include già (le pagine senza vengono saltate). Viene scritto direttamente sullo store live, quindi è irreversibile. Il builder ti chiederà conferma prima. Anche l'assistente AI può eseguire questa operazione, come spiegato in Azioni del builder AI.
Annulla, ripeti e salvataggio
La barra superiore ha i pulsanti Annulla e Ripeti. La cronologia è separata per mercato e per pagina, quindi annullare su Home non influisce sulla pagina Prodotto. Scorciatoie da tastiera: Cmd/Ctrl + Z per annullare, Cmd/Ctrl + Shift + Z o Cmd/Ctrl + Y per ripetere, e Cmd/Ctrl + S per pubblicare.
Clicca su Pubblica (in alto a destra) per rendere effettive le modifiche. Il pulsante è disabilitato se non ci sono modifiche da salvare. La pubblicazione è per mercato e per pagina, quindi pubblicare Home non pubblica la pagina Prodotto.
Cosa controllare prima di pubblicare
- Passa alla vista Mobile e scorri tutta la pagina, dato che la maggior parte dei clienti usa il cellulare.
- Controlla il contrasto del testo rispetto al colore di sfondo di ogni sezione.
- Assicurati che ogni blocco immagine abbia un file selezionato, perché i segnaposto vuoti appaiono come spazi bianchi nello store live.
- Verifica che pulsanti e voci di menu portino alle destinazioni corrette.
Per lasciare che l'assistente AI costruisca e modifichi le sezioni per te, vedi Costruire con l'assistente AI.