Overview

¿Qué es un diseño? #

Un diseño es la representación visual de un elemento Clerk, como Search, Recommendations o Email. Define el HTML y CSS que renderizan el elemento en tu sitio.

• Un diseño puede crearse con el Editor de diseños visual o como un diseño por código basado en HTML y CSS.
• Cada diseño tiene un ID único y una vista previa integrada, para que puedas probarlo antes de usarlo en producción.
• Los elementos de tu sitio usan diseños a través de Elements. Varios Elements pueden usar el mismo diseño.

Diseños y componentes #

Los diseños se componen de un bloque principal de diseño y/o partes más pequeñas llamadas componentes.

• Diseño: Un elemento de nivel superior que se puede seleccionar en un Element y mostrar en tu sitio.
• Componente: Un diseño que se crea o añade dentro de otro diseño. Los componentes son bloques de construcción y no pueden ser seleccionados directamente en Elements.
• Sub-diseños: Cualquier diseño puede usarse como componente dentro de otro diseño, permitiéndote reutilizar piezas completas (por ejemplo, una tarjeta de producto compartida) en varios diseños.

En la página de Diseños encontrarás dos pestañas:

• Diseños: Elementos que pueden usarse en Elements.
• Componentes: Elementos creados dentro de otros diseños para reutilización. Estos no pueden usarse directamente en Elements.

Cuando un diseño se utiliza dentro de otros diseños, verás un indicador como “Usado en otros diseños”. Cuando está conectado a Elements, verás “Usado en element”.

Crear un diseño #

Desde la página de Diseños, elige Nuevo diseño. Entrarás directamente al editor y podrás renombrar el diseño en cualquier momento. Los diseños de HTML y CSS se abren en el editor de código; los diseños visuales se abren en el Editor de diseños.

Mientras editas:

• Edita el nombre del diseño sobre el editor de código.
• En los diseños de código de Search, usa las pestañas HTML, CSS, HTML - Mobile y CSS - Mobile encima del editor. Desplázate debajo del editor para ver Available Designs and Components.
• En los diseños de código de Recommendations, usa las pestañas HTML y CSS. Este editor no muestra Available Designs and Components.
• Abre Preview desde el encabezado de la página o su menú de acciones.
• Encuentra Design ID en el menú de acciones. El encabezado también da acceso a información sobre los Elements que usan el diseño.

Conectar un diseño a un Element #

Para mostrar un diseño en tu sitio:

1. Crea o abre un Element bajo la sección correspondiente.
2. Selecciona el diseño.
3. Configura cualquier variable que el diseño exponga (por ejemplo, un encabezado) y publica.

Debido a que varios Elements pueden apuntar al mismo diseño, las ediciones a un diseño compartido afectarán a todos los Elements que lo usen una vez que el diseño se publique.

Opciones de alojamiento #

Los diseños pueden alojarse de dos formas:

• En Clerk: La configuración recomendada para la mayoría de las tiendas. Los diseños se almacenan y gestionan en my.clerk.io y se inyectan al cargar la página a través del Element seleccionado.
• En tu código fuente: Útil si mantienes plantillas compartidas en varios sitios. Consulta Code Designs para detalles y ejemplos.

Prácticas recomendadas para la composición #

• Crea componentes pequeños y reutilizables como una tarjeta de producto o un distintivo. Los diseños de código de Search exponen componentes debajo del editor. Los diseños de código de Recommendations no proporcionan esa sección de componentes.
• Mantén los estilos restringidos al diseño o componente para evitar efectos secundarios.
• Usa variables para el texto (por ejemplo, encabezados) para que el mismo diseño pueda reutilizarse con textos diferentes en Elements.

Siguientes pasos:

• Construye visualmente con el Editor de diseños.
• Construye con HTML y CSS y Liquid usando Code Designs.

Buscar diseños #

Utiliza el campo de búsqueda en la página de Designs para encontrar rápidamente un diseño.

• Nombre: Escribe cualquier parte del nombre del diseño
• ID: Pega o escribe el ID del diseño
• Element: Busca texto o código dentro de un diseño (HTML, CSS, Liquid)

Pasos:

1. Ve a Designs para Search / Recommendations / Email.
2. Escribe un nombre, un ID o un fragmento de texto/código en el campo de búsqueda.
3. La lista se filtra al instante a los diseños coincidentes.