Overview

¿Qué es un diseño? #

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

• Se puede crear un diseño con el Editor de Diseño visual o como un Diseño de 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 utilizarlo en producción.
• Los elementos de tu sitio utilizan diseños a través de Elements. Múltiples Elements pueden usar el mismo diseño.

Diseños y componentes #

Los diseños se componen de un bloque de diseño principal 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 agrega dentro de otro diseño. Los componentes son bloques de construcción y no se pueden seleccionar directamente en Elements.
• Sub-diseños: Cualquier diseño se puede usar como componente dentro de otro diseño, lo que te permite reutilizar piezas completas (por ejemplo, una tarjeta de producto compartida) en múltiples diseños.

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

• Diseños: Elementos que se pueden usar en Elements.
• Componentes: Elementos creados desde otros diseños para su reutilización. Estos no se pueden usar directamente en Elements.

Cuando un diseño se usa 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. Entras directamente al editor y puedes cambiar el nombre del diseño en cualquier momento. Los diseños en HTML & CSS se abren en el editor de código; los diseños visuales se abren en el Editor de Diseño.

Mientras editas:

• Usa la barra lateral derecha para añadir diseños existentes como componentes y componer layouts más grandes.
• Administra HTML y CSS para los diseños de código en paneles separados.
• Vista previa del resultado y toma nota del ID del diseño para usarlo en Elements.

Conectar un diseño a un elemento #

Para mostrar un diseño en tu sitio:

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

Como 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 sea publicado.

Opciones de alojamiento #

Los diseños pueden alojarse de dos maneras:

• 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 mediante el Element seleccionado.
• En tu código fuente: Útil si mantienes plantillas compartidas entre varios sitios. Consulta Diseños de Código para detalles y ejemplos.

Buenas prácticas para la composición #

• Crea componentes pequeños y reutilizables, como una tarjeta de producto o insignia, e inclúyelos como sub-diseños en Search y Recommendations.
• Mantén los estilos limitados 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 diferente texto en Elements.

Próximos pasos:

• Crea visualmente con el Editor de Diseño.
• Crea con HTML & CSS y Liquid utilizando Diseños de Código.

Encontrar diseños #

Usa el campo de búsqueda en la página Designs para localizar 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 instantáneamente a los diseños coincidentes.