Design Editor

Conceptos básicos #

Cuando trabajas con Content para agregar elementos de Clerk.io a tu sitio, el Design Editor 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 accedes a la página Designs para Search / Recommendations / Email, puedes ver una lista de todos tus diseños, incluyendo 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 parte superior derecha de la pantalla, puedes previsualizar tus diseños para diferentes tamaños de pantalla. Muchos de los componentes también admiten estilos individuales para cada uno de estos tamaños de pantalla, permitiendo que tus diseños sean completamente responsivos.

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

• Escritorio
• Tablet
• Móvil

Visión general de la estructura #

El propio Design Editor consiste en:

• Una ventana de vista previa que muestra el diseño como se verá en tu sitio.
• Una visión general de la estructura que lista todos los componentes que conforman el diseño.

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

Al pasar el mouse sobre cualquier componente en la visión general de la estructura, se resaltará en la ventana de vista previa, para que puedas ver con qué estás trabajando. Hacer clic en un elemento de la ventana de vista previa también abrirá la configuración del componente que lo muestra.

Puedes arrastrar componentes en la visión general de la estructura para cambiar su posición.

Componentes #

Cada diseño consiste en una serie de bloques de construcción, llamados componentes. Un diseño puede contener tantos como desees, en el orden que quieras.

Se agregan nuevos componentes haciendo clic en el botón '+' en el lado derecho tanto del componente Background como de cualquier otro.

Configuración general #

Además de su configuración especializada, la mayoría de los componentes comparten también las siguientes configuraciones 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 hace referencia a item como la 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 superior 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 realizar ajustes que no permiten otras configuraciones.

Las reglas CSS que agregues solo influirán en el componente al que las asignes.

Tipografías #

El Design Editor viene con una amplia variedad de fuentes que puedes usar. Además, puedes optar simplemente por heredar la fuente de tu tienda seleccionando Use webshop font.

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

Variables Liquid #

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

Esto incluye la creación de campos de texto dinámicos como {{ headline }} o el agregado 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.

Fondo (Background) #

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

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

Bucle de datos (Data Loop) #

Esto te permite recorrer un tipo de dato y mostrar una cantidad seleccionada 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 determinado elemento de la lista que no sea el primero, y también elegir la cantidad de elementos a mostrar.

Por defecto, este componente mostrará los elementos en una columna.

Cuadrícula de elementos #

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 al lado del otro.

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

Slider #

Muestra elementos en una fila horizontal con flechas deslizantes para desplazarse por ellos.

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 botón:

• Predeterminado
• Amarillo
• Con borde
• Sin fondo (si quieres personalizar las flechas con CSS)

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

Botón de “Cargar más” #

Principalmente utilizado 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 una buena práctica, ya que te permite reducir los tiempos de carga mostrando inicialmente una menor cantidad de elementos, y dejando que los usuarios vean 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. Pueden usarse para agrupar componentes, o para crear una estructura con varias columnas.

Pueden configurarse con un color de fondo y una estructura basada en el sistema de diseño CSS flexbox.

También puedes controlar las dimensiones del box, así como el margen y el padding.

Línea #

Una simple línea divisora 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 manera de agregar un estilo visual a tu diseño, y es especialmente útil para promocionar detalles sobre tus productos como descuentos, novedades y más.

Las Badges tienen una variedad 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 mostrarse ya sea como un recuadro redondeado o una banda diagonal.

Botón #

Un botón sencillo que puede funcionar como un llamado a la acción efectivo 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 un fragmento de Javascript que se ejecuta cuando se hace clic en el botón, y puede usarse para funciones de agregar al carrito, lista de deseos y otras funcionalidades de Javascript.

Imagen #

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

Puedes agregar un enlace único a la imagen si, por ejemplo, deseas enviar a los clientes a la página del producto cuando hagan clic, y también puedes elegir un efecto hover, como ampliar la imagen cuando los visitantes pasen el cursor sobre ella.

Enlace #

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

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

Precio #

Usado principalmente para mostrar el precio de un producto, este componente contiene una serie de configuraciones específicas sobre precios.

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

Texto #

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

El texto puede basarse en texto estático de tu elección o datos de atributos como nombres de productos o títulos de páginas. Puedes optar por limitar el texto a cierta cantidad de caracteres para mantener el diseño, y aplicar formatos clásicos como negrita, cursiva y más.

Variantes de color #

Este es un Data Loop especializado que te 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']

Reseñas #

Agrega estrellas de reseña a tu diseño, indicando cuánto ha gustado el producto a los compradores. Las reseñas se muestran como 5 estrellas, con la calificación promedio mostrada como 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 para el producto.

HTML personalizado #

Este es un componente especializado que te permite agregar cualquier código HTML a tu diseño. Puede usarse para agregar scripts personalizados, o para agregar cualquier bloque especializado que de otro modo sería difícil crear con otros componentes.

También admite el uso de 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 diferentes diseños. Esto funciona tanto entre distintos diseños en una sola Store, como al copiar componentes entre Stores de tu cuenta.

Simplemente pasa el cursor sobre un componente en tu diseño de origen y haz clic en el botón Copy. Ve a tu diseño de destino y haz clic en el botón Paste para agregarlo dentro del componente donde debe mostrarse.

Visualización de código #

En cualquier momento, puedes inspeccionar el código generado para tu diseño haciendo clic en el botón View code. Esto te mostrará el HTML y el CSS generados, respectivamente.

Puedes usar 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 agregando el HTML y CSS en él.

Deshacer / Rehacer #

Si cometes un error, siempre puedes deshacer tus acciones más recientes haciendo clic en el botón Undo o recuperarlas con el botón Redo. Ambos se encuentran justo debajo de la ventana de vista previa.

Publicar #

Cuando estés listo para utilizar tu diseño, debe ser publicado haciendo clic en el botón Publish. Después de realizar cambios, también debes volver a publicar tu diseño.

Luego puedes elegir salir del Design Editor o permanecer y hacer cambios adicionales.