Design Editor

Nozioni di base #

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

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

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

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

Dimensioni schermo #

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

Puoi aggiungere stili alle seguenti dimensioni di schermo:

• Desktop
• Tablet
• Mobile

Panoramica del Layout #

Il Design Editor consiste di:

• Una finestra di anteprima che mostra il design come apparirà sul tuo sito.
• La panoramica del layout che elenca tutti i componenti che compongono il design.

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

Passando il mouse su un qualsiasi componente nella panoramica del layout, esso verrà evidenziato nella finestra di anteprima, così potrai vedere su cosa stai lavorando. Cliccando su un elemento nella finestra di anteprima, verranno invece aperte le impostazioni del componente corrispondente.

Puoi trascinare i componenti nella panoramica del layout per cambiarne la posizione.

Componenti #

Ogni design è composto da una serie di blocchi costitutivi, chiamati componenti. Un design può contenerne quanti vuoi, nell’ordine che preferisci.

I nuovi componenti vengono aggiunti cliccando il pulsante '+' sul lato destro sia del componente Background che di qualsiasi altro.

Impostazioni generali #

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

Visualizzazione condizionale #

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

Ad esempio, potresti mostrare un componente solo se un prodotto è in saldo: item.on_sale == true.

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

CSS personalizzato #

Questa opzione ti consente di applicare regole CSS specifiche al componente, se devi fare aggiustamenti che le impostazioni non consentono altrimenti.

Le regole CSS che aggiungi influenzeranno solo il componente a cui le applichi.

Font #

Il Design Editor include una vasta gamma di font tra cui puoi scegliere. In aggiunta, puoi semplicemente ereditare il font dal tuo webshop selezionando Use webshop font.

L’unica limitazione a questo riguarda le Embedded Email Recommendations, dove è necessario selezionare un font, in quanto queste non hanno accesso ai font del tuo webshop.

Variabili Liquid #

In ogni campo di testo, hai la possibilità di aggiungere 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 come: {{ 100-((item.list_price*100)/item.price) | round }} %

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

Background #

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

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

Data Loop #

Questo ti permette di scorrere un tipo di dato e mostrarne una quantità scelta. Può essere utilizzato per visualizzare prodotti, categorie o pagine, oppure per scorrere un attributo come varianti o colori.

Puoi impostare un index se vuoi iniziare da un elemento specifico della lista diverso dal primo, e puoi scegliere la quantità di elementi da mostrare.

Questo componente di default mostra gli oggetti in una colonna.

Griglia di elementi #

Funziona come il Data Loop, ma mostra gli elementi in una griglia invece che in una singola colonna. Ciò è utile per creare un design Search Page o Category Page con i prodotti affiancati.

Puoi configurare il numero di colonne in base alla dimensione dello schermo e la spaziatura tra gli elementi sia in orizzontale che in verticale.

Slider #

Mostra elementi in una riga 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 di default dei pulsanti. Attualmente ci sono 4 tipi di pulsanti:

• Default
• Giallo
• Bordi
• Senza sfondo (se vuoi personalizzare le frecce con CSS)

Usa Button position per scegliere se i pulsanti devono essere centrati su entrambi i lati dello slider o visualizzati in uno dei suoi 4 angoli.

Pulsante “Carica altri” #

Principalmente usato per i design Search Page e Category Page, questo pulsante consente agli utenti di vedere più elementi rispetto alla quantità di default che hai configurato.

Questa è una buona pratica in quanto ti permette di ridurre i tempi di caricamento mostrando inizialmente meno elementi, dando poi la possibilità agli utenti di vederne altri se lo desiderano.

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 la Product Logic scelta, fino a che non ce ne saranno più disponibili.

Box #

Funzionano come contenitori per altri componenti. Possono essere utilizzati per raggruppare componenti insieme, oppure per creare un layout a colonne multiple.

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

Puoi anche controllare le dimensioni del box, oltre a margini e padding.

Line #

Una semplice linea divisoria usata per separare visivamente i componenti.

Puoi controllarne il colore e lo stile, ad esempio se deve essere solida, tratteggiata, punteggiata o doppia.

Badge #

Questo è un ottimo modo per aggiungere uno stile visivo al tuo design ed è particolarmente utile per promuovere dettagli sui tuoi prodotti come sconti, novità e altro.

I Badge hanno una serie di impostazioni per controllare lo stile, la posizione, il testo da visualizzare e altro. Possono essere mostrati in uno qualsiasi dei 4 angoli di un elemento e visualizzati sia come box arrotondato che come banner diagonale.

Button #

Un semplice pulsante che può funzionare come call-to-action efficace per i visitatori. Permette di configurare il testo da visualizzare, un link personalizzato o un evento onclick da utilizzare al clic, e il colore di sfondo in modo che si adatti al tuo brand.

L’evento onclick è uno snippet Javascript che viene eseguito quando il pulsante viene cliccato, e può essere utilizzato per funzioni come aggiungi al carrello, wishlist e altre funzionalità Javascript.

Image #

Un componente visivo che mostra un’immagine di dimensione specificata in base a un attributo (come l’immagine di un prodotto) o a un URL specifico.

Puoi aggiungere un link univoco all’immagine, ad esempio per mandare il visitatore alla pagina prodotto con un click, e puoi scegliere un effetto hover come l’ingrandimento dell’immagine quando il mouse ci passa sopra.

Link #

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

Puoi scegliere il valore di un attributo (come un product URL), un URL specifico o un evento onclick.

Price #

Utilizzato per lo più per mostrare il prezzo di un prodotto, questo componente include un certo numero di impostazioni specifiche sui prezzi.

Sono incluse la quantità di decimali, i separatori delle migliaia e decimali ed il simbolo della valuta da visualizzare prima o dopo il prezzo.

Text #

Aggiunge blocchi di testo al tuo design. Vengono usati per molti scopi diversi, come mostrare i nomi dei prodotti o delle pagine, brand, descrizioni e ogni altro dato che vuoi rappresentare come testo.

Il testo può essere basato su un testo statico a tua scelta oppure sui dati degli attributi come i nomi dei prodotti o titoli delle pagine. Puoi scegliere di limitare il testo a una determinata quantità di caratteri per mantenere il layout ordinato e personalizzare il testo con formattazioni come grassetto, corsivo e altro.

Varianti colore #

Questa è una Data Loop specializzata che ti permette di scorrere un elenco di codici colore e mostrarli come opzioni di colore. Funziona meglio se invii una lista di codici colore per ogni prodotto. Es.: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Aggiunge stelle di valutazione al tuo design, indicando quanto il prodotto sia stato apprezzato dagli acquirenti. Le recensioni vengono mostrate con 5 stelle, con la valutazione media rappresentata dalle stelle colorate in nero.

Inoltre, viene mostrato il numero di recensioni che ogni prodotto ha ricevuto accanto alle stelle.

Sono necessari i seguenti due attributi disponibili per i prodotti:

• reviews_avg: Il voto medio del prodotto (su 5 stelle).
• reviews_amount: Il numero totale di recensioni ricevute dal prodotto.

Custom HTML #

Questo è un componente specializzato che consente di aggiungere qualsiasi codice HTML al tuo design. Può essere usato per aggiungere script personalizzati o blocchi particolari che sarebbero difficili da realizzare con gli altri componenti.

Supporta anche l’uso delle variabili Liquid, per accedere e lavorare con oggetti dati come prodotti, categorie e pagine.

Copiare componenti #

Se vuoi riutilizzare dei componenti da un altro design, puoi copiarli tra diversi design. Questo funziona sia tra design diversi in un singolo Store, sia tra Store diversi all’interno del tuo account.

Basta passare il mouse su un componente nel design di origine e cliccare sul pulsante Copy. Vai poi nel design di destinazione e clicca sul pulsante Paste per inserirlo all’interno del componente desiderato.

Visualizzazione del codice #

In qualsiasi momento, puoi ispezionare il codice generato per il tuo design cliccando sul pulsante View code. Questo ti mostrerà l’HTML e il CSS generato rispettivamente.

Puoi utilizzare ciò per convertire il tuo design creato nel Design Editor in un Code Design, copiando l’HTML e il CSS, creando un nuovo Code Design vuoto e incollandoci quanto copiato.

Annulla / Ripeti #

Se commetti un errore, puoi sempre annullare le azioni più recenti cliccando sul pulsante Undo o ripristinarle con il pulsante Redo. Entrambi si trovano sotto la finestra di anteprima.

Pubblicazione #

Quando sei pronto per utilizzare il tuo design, devi pubblicarlo cliccando il pulsante Publish. Dopo le modifiche, dovresti anche pubblicare di nuovo il design.

Puoi poi scegliere se uscire dal Design Editor o rimanere e apportare ulteriori modifiche.