Design Editor

Conceptos básicos #

Cuando trabajas con Content para agregar elementos de Clerk.io a tu sitio, el Editor de Diseño se puede usar para controlar la apariencia de los elementos.

Puedes crear cualquier cantidad de diseños que desees, y cualquier cantidad de bloques de Content pueden usar el mismo diseño.

Cuando vas a la página Designs para Search / Recommendations / Email, puedes ver una lista de todos tus diseños, incluidos sus IDs.

Cuando creas un nuevo diseño, puedes seleccionar una plantilla inicial de nuestra Design Library para comenzar o simplemente empezar desde cero.

Tamaños de pantalla #

En la esquina superior derecha de la pantalla, puedes previsualizar tus diseños para diferentes tamaños de pantalla. Muchos de los componentes también admiten la personalización individual de estilos para cada uno de estos tamaños de pantalla, haciendo tus diseños completamente responsivos.

Puedes agregar estilos para los siguientes tamaños de pantalla:

• Desktop
• Tablet
• Mobile

Visión general de la estructura #

El propio Editor de Diseño consta de:

• Una ventana de vista previa que muestra cómo se verá el diseño en tu sitio.
• El árbol de componentes que enumera todos los componentes que integran el diseño.

Por lo general, los componentes se enumeran en el orden en que se muestran. La única excepción es cuando usas componentes flotantes como Badges, que pueden colocarse sobre otros componentes.

Al pasar el cursor sobre cualquier componente en el árbol de componentes, este se resaltará en la ventana de vista previa, para que veas con qué estás trabajando. Al hacer clic en un elemento en la ventana de vista previa, se selecciona el componente correspondiente y se abren sus ajustes.

Puedes arrastrar y soltar componentes en el árbol de componentes para reordenarlos o moverlos a diferentes componentes padres. Los indicadores visuales muestran exactamente dónde se colocará un componente cuando lo sueltes.

El árbol de componentes también admite navegación por teclado. Usa las teclas de flecha para moverte entre componentes y usa atajos de teclado para acciones comunes como copiar, pegar y eliminar componentes.

Componentes #

Cada diseño consta de varios bloques de construcción llamados componentes. Un diseño puede tener tantos como quieras, en el orden que desees.

Se añaden nuevos componentes haciendo clic en el botón '+' que se encuentra en el lado derecho, ya sea del componente Background o de cualquier otro. Se abrirá un selector de componentes donde puedes buscar un tipo específico de componente por nombre.

Configuración general #

Además de su configuración especializada, la mayoría de los componentes comparten las siguientes opciones estándar.

Visualización condicional #

Esto te permite mostrar u ocultar el componente según si se cumple una condición. Usa la sintaxis de nuestro sistema de Filters y siempre hace referencia a item como fuente de datos.

Por ejemplo, podrías mostrar un componente solo si un producto está en oferta: item.on_sale == true.

O, solo mostrarlo si el precio es mayor a 100 y el producto está en stock: item.price > 100 and item.in_stock == true.

CSS personalizado #

Esto te permite aplicar reglas CSS específicas al componente, si necesitas hacer ajustes que no permiten los demás ajustes. El CSS se edita en un editor de código dedicado con resaltado de sintaxis.

Las reglas CSS que agregues solo influirán en el componente al que las añadas.

Fuentes #

El Editor de Diseño viene con una amplia gama de fuentes que puedes usar. Además, puedes elegir simplemente heredar la fuente de tu webshop seleccionando Use webshop font.

La única limitación es para Embedded Email Recommendations, donde debes seleccionar una fuente, ya que no tienen acceso a las fuentes de tu webshop.

Variables Liquid #

En cualquier campo de texto, tienes la opción de agregar datos mediante el lenguaje de plantillas Liquid.

Esto incluye crear campos de texto dinámicos como {{ headline }} o agregar cálculos basados en atributos de producto como: {{ 100-((item.list_price*100)/item.price) | round }} %

El ejemplo anterior calcularía el porcentaje redondeado ahorrado cuando un producto está en oferta.

Background #

Este es un componente especial que es la base de cualquier diseño. El fondo es el contenedor general en el que se inserta el resto del diseño.

Por lo general, el fondo es transparente, pero puedes seleccionar un color de fondo si lo necesitas.

Data Loop #

Esto permite iterar sobre un tipo de datos y mostrar una cantidad elegida de ellos. Se puede usar para mostrar productos, categorías o páginas, o iterar sobre un atributo como variantes o colores.

Puedes establecer un index si deseas comenzar desde un elemento en la lista distinto al primero, y puedes elegir la cantidad de elementos a mostrar.

Este componente muestra los elementos en una columna de forma predeterminada.

Grid of items #

Funciona igual que el Data Loop, pero muestra los elementos en una cuadrícula en lugar de una sola columna. Esto es útil para crear un diseño de Search Page o Category Page con productos mostrados uno junto al otro.

Puedes configurar la cantidad de columnas según el tamaño de pantalla y el espacio entre los elementos, tanto horizontal como verticalmente.

Slider #

Muestra elementos en una fila horizontal con flechas de desplazamiento para recorrerlos.

Puedes configurar la cantidad de elementos a mostrar por slide según el tamaño de pantalla, y el estilo predeterminado para los botones. Actualmente hay 4 tipos de botones:

• Default
• Yellow
• Bordered
• No background (si quieres personalizar las flechas con CSS)

Usa Button position para elegir si los botones deben centrarse a cada lado del slider o mostrarse en cualquiera de sus 4 esquinas.

Load more button #

Usado principalmente en los diseños de Search Page y Category Page, este botón permite a los usuarios ver más elementos de los predeterminados que has configurado.

Esta es una buena práctica ya que te permite reducir los tiempos de carga mostrando una menor cantidad de elementos al principio y permitiendo a los usuarios ver más si lo desean.

El botón se puede configurar con un texto personalizado y la cantidad de elementos a cargar cada vez que se hace clic. Cargará tantos elementos como devuelva la Product Logic elegida hasta que no se encuentren más elementos.

Box #

Estos funcionan como contenedores para otros componentes. Se pueden usar para agrupar componentes o para crear un diseño con varias columnas.

Se pueden configurar con un color de fondo y un layout basado en el sistema CSS flexbox.

También puedes controlar las dimensiones de la caja, así como el margen y el relleno (padding).

Line #

Una simple línea divisoria usada para separar componentes visualmente.

Puedes controlar su color y estilo, como si debe ser sólida, punteada, discontinua o doble.

Badge #

Esta es una excelente manera de añadir estilo visual a tu diseño, y es especialmente útil para destacar detalles sobre tus productos como descuentos, novedades y más.

Las Badges tienen opciones para controlar el estilo, posición, texto a mostrar y más. Pueden mostrarse en cualquiera de las 4 esquinas de un elemento y presentarse como una caja redondeada o una banda diagonal.

Button #

Un botón simple que puede funcionar como un potente call-to-action para los visitantes. Permite configurar el texto a mostrar, un enlace personalizado o evento onclick para que se use cuando se haga clic, y el color de fondo para que combine con tu marca.

El evento onclick es un fragmento de Javascript que se ejecuta al hacer clic en el botón, lo cual puede usarse para funciones de agregar al carrito, características de wishlist y otras funcionalidades en Javascript.

Image #

Un componente visual que muestra una imagen en un tamaño especificado basado en un atributo (como una imagen de producto) o una URL específica.

Puedes añadir un enlace único a la imagen si, por ejemplo, deseas enviar a los clientes a la página del producto al hacer clic, y puedes elegir un efecto hover como hacer que la imagen aumente de tamaño cuando los usuarios pasen el ratón sobre ella.

Link #

Configura una URL a la que se enviarán los visitantes cuando se haga clic en cualquier componente dentro de él.

Puedes elegir usar el valor de un atributo (como una URL de producto), una URL específica o un evento onclick.

Price #

Mayormente usado para mostrar el precio de un producto, este componente contiene diferentes opciones de configuración específicas para el precio.

Estas incluyen la cantidad de decimales, los separadores de miles y decimales, y el símbolo de la moneda que se mostrará antes o después del precio.

Text #

Agrega bloques de texto a tu diseño. Se usan para diferentes propósitos, como mostrar los nombres de productos o páginas, marcas, descripciones y cualquier otro dato que quieras representar como texto.

El texto puede basarse en texto estático de tu elección o en datos de atributos como nombres de productos o títulos de páginas. También puedes darle formato al texto con las opciones clásicas como negrita, cursiva, y más.

Color variants #

Este es un Data Loop especializado que permite iterar sobre una lista de códigos de color y mostrarlos como opciones de color. Funcionan mejor si envías una lista de códigos de color para cada producto. Por ejemplo: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Agrega estrellas de valoración a tu diseño, indicando cuánto gustó el producto a los compradores. Las valoraciones se muestran como 5 estrellas, con la puntuación media mostrada en estrellas de color negro.

Además, se muestra la cantidad de valoraciones que ha recibido el producto junto a las estrellas.

Se requieren los siguientes dos atributos para que esté disponible para los productos:

• reviews_avg: La puntuación media del producto sobre 5 estrellas.
• reviews_amount: El número total de valoraciones para el producto.

Custom HTML #

Este es un componente especializado que permite agregar cualquier código HTML a tu diseño. Puede ser utilizado para agregar scripts personalizados o bloques especiales que serían difíciles de crear con otros componentes.

También permite el uso de variables Liquid para acceder y trabajar con objetos de datos como productos, categorías y páginas.

Copiar componentes #

Si quieres reutilizar componentes de otro diseño, puedes copiarlos entre diseños. Esto funciona tanto entre diferentes diseños en una sola Store, como también puedes copiar componentes entre Stores en tu cuenta.

Pasa el cursor sobre un componente en el árbol de componentes y haz clic en el botón Copy, o usa el atajo de teclado. Ve a tu diseño destino y haz clic en el botón Paste para añadirlo dentro del componente donde debe mostrarse. También puedes usar los atajos de teclado estándar para copiar y pegar.

Ver el código #

En cualquier momento, puedes inspeccionar el código generado de tu diseño haciendo clic en el botón View code. Esto abrirá un visor de código fuente con resaltado de sintaxis, mostrando el HTML y CSS generados para tu diseño.

Puedes utilizar esto para convertir tu diseño de Design Editor en un Code Design, copiando el HTML y CSS, creando un nuevo Code Design vacío y añadiendo dicho HTML y CSS.

Deshacer / Rehacer #

Si cometes un error, siempre puedes deshacer tus últimas acciones haciendo clic en el botón Undo o volverlas a agregar con el botón Redo.

El sistema de deshacer/rehacer incluye una línea de tiempo visual que muestra una lista de los cambios realizados. Puedes hacer clic en cualquier punto de la línea de tiempo para volver a ese estado específico, facilitando la revisión y navegación por tu historial de edición.

Modo oscuro #

El Editor de Diseño admite un tema en modo oscuro. Puedes alternarlo desde la barra de herramientas del editor para cambiar entre la apariencia clara y oscura.

Atajos de teclado #

El Editor de Diseño admite atajos de teclado para acciones comunes. Esto te permite trabajar más rápido sin usar el ratón.

Los atajos comunes incluyen:

• Copiar un componente
• Pegar un componente
• Eliminar un componente
• Deshacer / Rehacer cambios
• Flechas para navegar en el árbol de componentes

Publicar #

Cuando estés listo para usar tu diseño, debe publicarse haciendo clic en el botón Publish ubicado en la barra de herramientas del editor. Después de hacer cambios, también debes volver a publicar tu diseño.

Luego puedes elegir entre salir del Editor de Diseño o quedarte para hacer cambios adicionales.