Overview

Che 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 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 unico e un’anteprima integrata così puoi testarlo prima di utilizzarlo in produzione.
• Gli elementi del tuo sito utilizzano i design attraverso Elements. Più Elements possono usare lo stesso design.

Design e Componenti #

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

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

Nella pagina Designs troverai due schede:

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

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

Creare 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; i design visuali si aprono nel Design Editor.

Durante la modifica:

• Usa la barra laterale destra per aggiungere design esistenti come componenti per comporre layout più grandi.
• Gestisci HTML e CSS per i code design in pannelli separati.
• Visualizza l’anteprima del risultato e annota l’ID del design per l’utilizzo in Elements.

Collegare un Design a un Element #

Per mostrare un design sul tuo sito:

1. Crea o apri un Element sotto la sezione pertinente.
2. Seleziona il design.
3. Configura tutte le variabili esposte dal design (ad esempio un titolo) e pubblica.

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

Opzioni di hosting #

I design possono essere ospitati in due modi:

• In Clerk: La configurazione consigliata per la maggior parte dei negozi. I design sono archiviati e gestiti su my.clerk.io e iniettati al caricamento della pagina tramite l’Element selezionato.
• Nel tuo codice sorgente: Utile se gestisci template condivisi su più siti. Consulta Code Designs per dettagli ed esempi.

Best practice per la composizione #

• Crea componenti piccoli e riutilizzabili come una scheda prodotto o una badge ed includili come sub‑designs in Search e Recommendations.
• Tieni gli stili limitati al design o componente per evitare effetti indesiderati.
• Usa variabili per i testi (es. titoli) così lo stesso design può essere riutilizzato con testo diverso su più Elements.

Prossimi passi:

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

Trova design #

Utilizza il campo di ricerca nella pagina Designs per individuare 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)

Fasi:

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 che corrispondono.