Overview

Cos’è un Design? #

Un design è la rappresentazione visiva di un elemento Clerk come Search, Recommendations o Email. Definisce l’HTML e il CSS che rendono visibile l’elemento sul tuo sito.

• Un design può essere creato con il Design Editor visuale oppure come un Code Design basato su HTML & CSS.
• Ogni design ha un ID univoco e un’anteprima integrata così puoi testarlo prima di usarlo in produzione.
• Gli elementi sul tuo sito utilizzano i design tramite Elements. Più Elements possono usare lo stesso design.

Designs e Componenti #

I designs sono composti da un blocco principale e/o parti più piccole chiamate componenti.

• Design: Un elemento di livello superiore che può essere selezionato in un Element e mostrato sul tuo sito.
• Componente: Un design creato o aggiunto all’interno di un altro design. I componenti sono elementi costitutivi e non possono essere selezionati direttamente negli Elements.
• Sub‑designs: Qualsiasi design può essere utilizzato come componente all’interno di un altro design, permettendoti di riutilizzare intere parti (ad esempio una scheda prodotto condivisa) in più designs.

Nella pagina Designs trovi due schede:

• Designs: Elementi che possono essere usati negli Elements.
• Components: Elementi creati all’interno di altri design per il riutilizzo. Questi non possono essere usati direttamente negli Elements.

Quando un design è utilizzato all’interno di altri design, vedrai un indicatore come “Usato in altri designs”. Quando è collegato agli Elements, vedrai “Usato in element”.

Creazione di un Design #

Dalla pagina Designs, scegli Nuovo design. Accedi direttamente all’editor e puoi rinominare il design in qualsiasi momento. I design HTML & CSS si aprono nell’editor di codice; quelli visuali nel Design Editor.

Durante la modifica:

• Modifica il nome del design sopra l’editor di codice.
• Nei Search code designs, usa le schede HTML, CSS, HTML - Mobile e CSS - Mobile sopra l’editor. Scorri sotto l’editor per Available Designs and Components.
• Nei Recommendation code designs, usa le schede HTML e CSS. Questo editor non mostra Available Designs and Components.
• Apri Preview dall’intestazione della pagina o dal suo menu azioni.
• Trova Design ID nel menu azioni. L’intestazione dà anche accesso alle informazioni sugli Elements che utilizzano il design.

Collegare un Design a un Element #

Per mostrare un design sul tuo sito:

1. Crea o apri un Element nella sezione rilevante.
2. Seleziona il design.
3. Configura eventuali variabili esposte dal design (ad esempio un headline) e pubblica.

Poiché più Elements possono puntare allo stesso design, le modifiche a un design condiviso influenzeranno tutti gli Elements che lo usano una volta pubblicato.

Opzioni di hosting #

I designs possono essere ospitati in due modi:

• In Clerk: La configurazione consigliata per la maggior parte degli store. I designs sono archiviati e gestiti su my.clerk.io e inseriti al caricamento della pagina tramite l’Element selezionato.
• Nel tuo codice sorgente: Utile se gestisci template condivisi tra diversi siti. Vedi Code Designs per dettagli ed esempi.

Best practice per la composizione #

• Crea componenti piccoli e riutilizzabili come una scheda prodotto o un badge. I Search code designs mostrano i componenti sotto l’editor. I Recommendation code designs non forniscono quella sezione.
• Mantieni gli stili circoscritti al design o componente per evitare effetti collaterali.
• Usa variabili per i testi (ad esempio headlines) così lo stesso design può essere riutilizzato con testi diversi in vari Elements.

Prossimi passi:

• Costruisci in modo visuale con il Design Editor.
• Costruisci con HTML & CSS e Liquid usando i Code Designs.

Trova design #

Utilizza il campo di ricerca nella pagina Designs per trovare rapidamente un design.

• Nome: Digita una parte del nome del design
• ID: Incolla o digita l’ID del design
• Element: Cerca testo o codice all’interno di un design (HTML, CSS, Liquid)

Passaggi:

1. Vai su Designs per Search / Recommendations / Email.
2. Digita un nome, un ID o una porzione di testo/codice nel campo di ricerca.
3. L’elenco si filtra istantaneamente mostrando solo i design corrispondenti.