Design Editor

Basi #

Quando lavori con Content per aggiungere elementi di Clerk.io al tuo sito, il Design Editor può essere utilizzato per controllare l’aspetto visivo degli elementi.

Puoi creare un numero qualsiasi di design che desideri, e qualsiasi quantità di blocchi Content può utilizzare lo stesso design.

Quando vai alla pagina Designs per Search / Recommendations / Email, puoi vedere un elenco di tutti i tuoi design, inclusi i loro ID.

Quando crei un nuovo design, puoi selezionare un template iniziale dalla nostra Design Library per iniziare, oppure iniziare da zero.

Dimensioni dello schermo #

In alto a destra dello schermo, puoi vedere l’anteprima dei tuoi design per diverse dimensioni dello schermo. Molti componenti supportano anche la personalizzazione dello stile per ciascuna di queste dimensioni per rendere i tuoi design completamente responsivi.

Puoi aggiungere stili per le seguenti dimensioni dello schermo:

• Desktop
• Tablet
• Mobile

Panoramica del layout #

Il Design Editor è costituito da:

• Una finestra di anteprima che mostra il design come apparirà sul tuo sito.
• L’albero dei componenti che elenca tutti i componenti che costituiscono il design.

I componenti sono generalmente elencati nell’ordine in cui vengono visualizzati. L’unica eccezione è quando usi componenti fluttuanti come Badges, che possono essere posizionati sopra altri componenti.

Passando con il mouse su un componente nell’albero, questo verrà evidenziato nella finestra di anteprima, così puoi vedere su cosa stai lavorando. Cliccando su un elemento nella finestra di anteprima selezionerai il componente corrispondente e aprirai le sue impostazioni.

Puoi trascinare e rilasciare i componenti nell’albero per riordinarli o spostarli in diversi componenti padre. Indicatori visivi mostrano esattamente dove verrà posizionato un componente quando lo rilasci.

L’albero dei componenti supporta anche la navigazione da tastiera. Usa le frecce per spostarti tra i componenti e usa le scorciatoie da tastiera per azioni comuni come copia, incolla ed eliminazione dei componenti.

Componenti #

Ogni design è composto da una serie di blocchi di costruzione, chiamati componenti. Un design può contenerne quanti desideri, in qualsiasi ordine.

Nuovi componenti si aggiungono cliccando il pulsante '+' nella parte destra sia del componente Background che di qualsiasi altro. Si apre un selettore da cui puoi cercare un tipo di componente specifico per nome.

Impostazioni generali #

Oltre alle impostazioni specifiche, la maggior parte dei componenti condivide le seguenti impostazioni standard.

Visualizzazione condizionale #

Permette di mostrare o nascondere il componente in base al soddisfacimento di una condizione. Usa la sintassi del nostro sistema Filters, e fa sempre riferimento a item come fonte dei dati.

Un esempio potrebbe essere mostrare un componente solo se un prodotto è in saldo: item.on_sale == true.

Oppure, mostrarlo solo se il prezzo è superiore a 100 e il prodotto è disponibile: item.price > 100 and item.in_stock == true.

CSS personalizzato #

Permette di applicare regole CSS specifiche al componente, se hai bisogno di modifiche che le impostazioni non consentono. Il CSS viene modificato in un editor di codice dedicato con evidenziazione della sintassi.

Le regole CSS aggiunte influenzeranno solo il componente a cui sono state applicate.

Font #

Il Design Editor include una vasta gamma di font utilizzabili. Inoltre, puoi scegliere di ereditare semplicemente il font dal tuo webshop selezionando Use webshop font.

L’unica limitazione è per Embedded Email Recommendations, dove dovrai selezionare un font, poiché non hanno accesso ai font del tuo webshop.

Variabili Liquid #

In qualsiasi campo di testo, hai la possibilità di inserire dati tramite il linguaggio di template Liquid.

Questo include la creazione di campi di testo dinamici come {{ headline }} o l’aggiunta di calcoli basati su attributi di prodotto, ad esempio: {{ 100-((item.list_price*100)/item.price) | round }} %

L’esempio qui sopra calcolerebbe la percentuale arrotondata risparmiata quando un prodotto è in saldo.

Background #

Questo è un componente speciale che rappresenta la base di ogni design. Il background è il contenitore generale in cui viene inserito il resto del design.

Di solito il background è trasparente, ma puoi selezionare un colore di sfondo se necessario.

Data Loop #

Questo permette di iterare su un tipo di dati e mostrarne una quantità scelta. Può essere usato per mostrare prodotti, categorie o pagine, o scorrere un attributo come varianti o colori.

Puoi impostare un index se vuoi cominciare da un elemento specifico diverso dal primo, e puoi scegliere quanti elementi mostrare.

Di default, questo componente mostra gli elementi in una colonna.

Griglia di elementi #

Funziona come il Data Loop, ma mostra gli elementi in una griglia anziché una singola colonna. È utile per creare un design di Search Page o Category Page con prodotti affiancati.

Puoi configurare il numero di colonne in base alla dimensione dello schermo e lo spazio tra gli elementi sia orizzontalmente che verticalmente.

Slider #

Mostra elementi in una fila orizzontale con frecce slider per scorrere.

Puoi configurare la quantità di elementi da mostrare per ogni slide in base alla dimensione dello schermo, e lo stile predefinito dei pulsanti. Attualmente ci sono 4 tipi di pulsanti:

• Default
• Yellow
• Bordered
• No background (se vuoi personalizzare le frecce con CSS)

Usa Button position per scegliere se i pulsanti debbano essere centrati su ciascun lato dello slider, o posizionati in uno qualsiasi dei suoi 4 angoli.

Pulsante “Load more” #

Usato principalmente per Search Page e Category Page, questo pulsante permette agli utenti di vedere più elementi rispetto alla quantità predefinita configurata.

È buona pratica poiché consente di ridurre i tempi di caricamento mostrando inizialmente un minor numero di elementi, lasciando agli utenti la possibilità di vederne altri.

Il pulsante può essere configurato con un testo personalizzato e la quantità di elementi da caricare ogni volta che viene cliccato. Caricherà tanti elementi quanti ne restituisce il Product Logic scelto, finché non ne vengono trovati altri.

Box #

Funzionano come contenitori per altri componenti. Possono essere usati per raggruppare componenti o per creare un layout a più colonne.

Possono essere configurati con un colore di sfondo e un layout basato sul sistema CSS flexbox.

Puoi anche controllare le dimensioni del box, nonché margini e padding.

Linea #

Una semplice linea divisoria utilizzata per separare visivamente i componenti.

Puoi controllare colore e stile (solida, punteggiata, tratteggiata o doppia).

Badge #

È un ottimo modo per aggiungere stile visivo ai tuoi design, ed è particolarmente utile per evidenziare dettagli sui tuoi prodotti come sconti, novità e altro.

I Badge hanno una gamma di impostazioni per controllare stile, posizione, testo da visualizzare e altro. Possono essere mostrati in uno qualsiasi dei 4 angoli di un elemento e possono avere la forma di un box arrotondato o uno striscione diagonale.

Button #

Un semplice pulsante che può essere usato come efficace call-to-action per i visitatori. Permette di configurare il testo da mostrare, un link personalizzato o un evento onclick da usare al click, e il colore di sfondo che si abbina al tuo brand.

L’evento onclick è un pezzo di Javascript che viene eseguito al click, utilizzabile per funzioni come aggiunta al carrello, lista dei desideri e altre funzioni Javascript.

Image #

Un componente visivo che mostra un’immagine in una dimensione specifica, basandosi su un attributo (come un’immagine di prodotto) o su una URL specifica.

Puoi aggiungere un link unico all’immagine se, ad esempio, vuoi mandare i clienti sulla pagina prodotto al click, e puoi scegliere un effetto hover come l’ingrandimento dell’immagine al passaggio del mouse.

Link #

Configura una URL a cui inviare i visitatori quando qualsiasi componente al suo interno viene cliccato.

Puoi scegliere il valore di un attributo (ad esempio la URL del prodotto), una URL specifica o un evento onclick.

Price #

Usato principalmente per visualizzare il prezzo di un prodotto, questo componente contiene una serie di impostazioni specifiche per il prezzo.

Queste comprendono il numero di decimali, i separatori di migliaia e decimali e il simbolo di valuta da mostrare prima o dopo il prezzo.

Text #

Aggiunge blocchi di testo a tuo design. Sono utilizzati per molteplici scopi, come mostrare nomi di prodotti o pagine, brand, descrizioni e qualsiasi altro dato tu voglia rappresentare come testo.

Il testo può essere basato su testo statico a scelta o su dati attributo come i nomi dei prodotti o titoli delle pagine. Puoi inoltre stilizzare il testo con classiche opzioni di formattazione come grassetto, corsivo e altro.

Varianti colore #

È un Data Loop specializzato che permette di iterare su una lista di codici colore e mostrarli come opzioni colore. Funzionano meglio se invii una lista di codici colore per ogni prodotto. Ad esempio: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Aggiunge stelle di valutazione al tuo design, indicando quanto i clienti hanno apprezzato il prodotto. Le valutazioni sono espresse con 5 stelle, con la media delle valutazioni mostrata come stelle nere.

Inoltre, viene mostrato il numero di recensioni ricevute dal prodotto accanto alle stelle.

Richiedono la presenza dei seguenti due attributi per i prodotti:

• reviews_avg: La valutazione media del prodotto su 5 stelle.
• reviews_amount: Il numero totale di recensioni per il prodotto.

Custom HTML #

È un componente specializzato che consente di aggiungere qualsiasi codice HTML al tuo design. Può essere usato per aggiungere script personalizzati o per inserire blocchi particolari difficilmente realizzabili con altri componenti.

Supporta anche le variabili Liquid, per accedere e lavorare con oggetti dati come prodotti, categorie e pagine.

Copiare componenti #

Se vuoi riutilizzare componenti da un altro design, puoi copiarli tra design diversi. Questo funziona sia tra design nello stesso Store, sia tra Store diversi nel tuo account.

Passa con il mouse su un componente nell’albero e clicca il pulsante Copy, o usa la scorciatoia da tastiera. Vai al design di destinazione e clicca il pulsante Paste per inserirlo dove deve essere visualizzato. Puoi anche usare le classiche scorciatoie da tastiera per copia e incolla.

Visualizzare il codice #

In qualsiasi momento, puoi ispezionare il codice generato del tuo design cliccando il pulsante View code. Si aprirà un visualizzatore di codice sorgente con evidenziazione della sintassi, mostrando l’HTML e CSS generato per il tuo design.

Puoi usare questa funzionalità per convertire il tuo design del Design Editor in un Code Design, copiando l’HTML e il CSS, creando un nuovo Code Design vuoto e incollandovi il codice copiato.

Annulla / Ripeti #

Se commetti un errore, puoi sempre annullare le ultime azioni cliccando il pulsante Undo o ripristinarle con il pulsante Redo.

Il sistema di annulla/ripeti include una timeline visiva che mostra l’elenco delle modifiche effettuate. Puoi cliccare su qualsiasi punto della timeline per tornare a quello stato specifico, rendendo semplice la revisione e la navigazione nella cronologia delle modifiche.

Dark Mode #

Il Design Editor supporta il tema dark mode. Puoi attivarlo dalla barra degli strumenti dell’editor per passare dalla visualizzazione chiara a quella scura.

Scorciatoie da tastiera #

Il Design Editor supporta scorciatoie da tastiera per azioni comuni. Consentono di lavorare più rapidamente senza usare il mouse.

Scorciatoie comuni includono:

• Copiare un componente
• Incollare un componente
• Eliminare un componente
• Annullare / Ripetere modifiche
• Frecce direzionali per navigare nell’albero dei componenti

Pubblicazione #

Quando sei pronto a utilizzare il tuo design, deve essere pubblicato cliccando il pulsante Publish situato nella barra degli strumenti dell’editor. Dopo aver apportato modifiche, dovresti anche pubblicare nuovamente il tuo design.

Puoi quindi scegliere se uscire dal Design Editor, o rimanere per apportare ulteriori modifiche.