Design Editor

Conceptos básicos #

Cuando trabajes con Content para añadir elementos de Clerk.io a tu sitio, el Editor de Diseño puede usarse para controlar el aspecto y la sensación de los elementos.

Puedes crear la cantidad de diseños que desees, y cualquier bloque de Content puede usar el mismo diseño.

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

Cuando crees un nuevo diseño, puedes seleccionar una plantilla inicial de nuestra Biblioteca de Diseños 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 permiten el estilo individual para cada uno de estos tamaños de pantalla para que tus diseños sean totalmente responsivos.

Puedes añadir estilos para los siguientes tamaños de pantalla:

• Escritorio
• Tableta
• Móvil

Vista general del diseño #

El propio Editor de Diseño consta de:

• Una ventana de previsualización que muestra el diseño como se verá en tu sitio.
• El árbol de componentes que enumera todos los componentes que conforman el diseño.

Los componentes generalmente se listan en el orden en que se muestran. La única excepción es cuando utilizas componentes flotantes como Badges, que pueden colocarse sobre otros componentes.

Pasar el mouse sobre cualquier componente en el árbol de componentes lo resaltará en la ventana de previsualización, para que veas con qué estás trabajando. Al hacer clic en un elemento en la ventana de previsualización se seleccionará el componente correspondiente y se abrirán sus ajustes.

Puedes arrastrar y soltar componentes en el árbol de componentes para reordenarlos o moverlos a diferentes componentes padre. 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 consiste en una serie de bloques básicos, llamados componentes. Un diseño puede contener tantos como desees, en cualquier orden que quieras.

Los nuevos componentes se agregan haciendo clic en el botón '+' en el lado derecho de cualquier componente Background o cualquier otro. Se abre un selector de componentes donde puedes buscar un tipo de componente específico por nombre.

Ajustes generales #

Además de sus configuraciones especializadas, la mayoría de los componentes comparten también los siguientes ajustes estándar.

Visualización condicional #

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

Un ejemplo podría ser mostrar un componente solo si un producto está en oferta: item.on_sale == true.

O, mostrarlo solo 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 de otra manera los ajustes no permiten. El CSS se edita en un editor de código dedicado con resaltado de sintaxis.

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

Fuentes #

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

La única limitación de esto es para Embedded Email Recommendations, donde necesitarás seleccionar una fuente, ya que no tienen acceso a las fuentes de tu tienda online.

Variables Liquid #

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

Esto incluye la creación de campos de texto dinámicos como {{ headline }} o la adición de cálculos basados en atributos del 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 background es el contenedor general donde se inserta el resto del diseño.

Normalmente el background es transparente, pero puedes seleccionar un color de fondo si lo necesitas.

Data Loop #

Esto te permite iterar sobre un tipo de datos y mostrar la cantidad elegida de ellos. Puede usarse para mostrar productos, categorías o páginas, o recorrer un atributo como variantes o colores.

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

Este componente mostrará los elementos en una columna de manera predeterminada.

Grid of items #

Funciona igual que el Data Loop, pero muestra elementos en una cuadrícula en lugar de una sola columna. Esto es útil para crear un diseño de página de Search o de categoría 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 deslizantes para desplazarse entre ellos.

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

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

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

Load more button #

Usado principalmente para los diseños de Search Page y Category Page, este botón permite a los usuarios ver más elementos que la cantidad predeterminada que hayas configurado.

Esto es buena práctica ya que te permite reducir los tiempos de carga mostrando una menor cantidad de elementos inicialmente y permitiendo que los usuarios vean más si así lo desean.

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

Box #

Funcionan como contenedores para otros componentes. Pueden usarse para agrupar componentes o para crear una disposición con varias columnas.

Pueden configurarse con un color de fondo y un layout basado en el sistema de diseño CSS flexbox.

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

Line #

Una simple línea divisoria utilizada para separar visualmente los componentes.

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

Badge #

Esta es una excelente forma de agregar un 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 una gama de configuraciones para controlar el estilo, la posición, el texto a mostrar y más. Pueden mostrarse en cualquiera de las 4 esquinas de un elemento y aparecen como una caja redondeada o una banda diagonal.

Button #

Un botón simple que puede funcionar como un efectivo llamado a la acción para los visitantes. Permite configurar el texto a mostrar, un enlace personalizado o un evento onclick a usar cuando se haga clic, y el color de fondo para que combine con tu marca.

El evento onclick es una pieza de Javascript que debe ejecutarse cuando se haga clic en el botón, lo cual puede utilizarse para funciones de agregar al carrito, listas de deseos y otras funcionalidades de Javascript.

Image #

Un componente visual que muestra una imagen de un tamaño específico 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, quieres enviar al cliente a la página del producto cuando haga clic y puedes elegir un efecto al pasar el mouse, como agrandar la imagen cuando el visitante pase el cursor sobre ella.

Link #

Configura una URL a donde enviar a los visitantes cuando se haga clic en cualquier componente dentro de él.

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

Price #

Utilizado principalmente para mostrar el precio de un producto, este componente contiene varias configuraciones específicas de precio.

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

Text #

Agrega bloques de texto a tu diseño. Se utilizan para muchos propósitos distintos, como mostrar nombres de productos o páginas, marcas, descripciones y cualquier otro dato que desees mostrar 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 estilizar el texto con opciones clásicas de formato como negrita, cursiva y más.

Color variants #

Este es un Data Loop especializado que permite recorrer 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. Ejemplo: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Reviews #

Agrega estrellas de reseñas a tu diseño, indicando cuánto les ha gustado el producto a los compradores. Las reseñas se muestran como 5 estrellas, con la calificación promedio mostrada en estrellas de color negro.

Además, muestra la cantidad de reseñas que ha recibido el producto junto a las estrellas.

Requieren que los siguientes dos atributos estén disponibles para los productos:

• reviews_avg: La calificación promedio del producto sobre 5 estrellas.
• reviews_amount: El número total de reseñas sobre el producto.

Custom HTML #

Este es un componente especializado que te permite añadir cualquier código HTML a tu diseño. Esto puede usarse para añadir scripts personalizados, o para agregar bloques especializados que de otro modo serían difíciles de crear con los demás componentes.

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

Copiar componentes #

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

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

Ver el código #

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

Puedes usar esto para convertir tu diseño hecho en el Editor de Diseño a un Code Design, copiando el HTML y CSS, creando un nuevo Code Design vacío y añadiendo el HTML y CSS en él.

Deshacer / Rehacer #

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

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

Modo oscuro #

El Editor de Diseño admite un tema de 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 mover la mano al ratón.

Los atajos comunes incluyen:

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

Publicación #

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 realizar cambios, también debes volver a publicar tu diseño.

Luego puedes elegir salir del Editor de Diseño, o quedarte y hacer cambios adicionales.