Design Editor

Conceptos Básicos #

Cuando trabajas con Contenido 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 número de diseños que desees, y cualquier cantidad de bloques de Contenido puede usar el mismo diseño.

Cuando vayas a la página Diseños para Búsqueda / Recomendaciones / Correo Electrónico, 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 Biblioteca de Diseño 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 para hacer que tus diseños sean completamente responsivos.

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

• Escritorio
• Tableta
• Móvil

Resumen del Diseño #

El Editor de Diseño en sí consiste en:

• Una ventana de vista previa que muestra el diseño tal como se verá en tu sitio.
• El resumen del diseño que enumera 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 Insignias, que pueden colocarse sobre otros componentes.

Pasar el cursor sobre cualquier componente en el resumen del diseño lo resaltará en la ventana de vista previa, para que puedas ver con qué estás trabajando. Hacer clic en un elemento en la ventana de vista previa abrirá igualmente la configuración para el componente que lo muestra.

Puedes arrastrar componentes en el resumen del diseño para cambiar su posición.

Componentes #

Cada diseño consta de un número de bloques de construcción, llamados componentes. Un diseño puede contener tantos como desees, en cualquier orden que desees.

Nuevos componentes se añaden haciendo clic en el botón '+' en el lado derecho de cualquiera de los componentes Fondo o cualquier otro.

Configuración General #

Además de sus configuraciones especializadas, la mayoría de los componentes comparten las siguientes configuraciones estándar.

Visualización Condicional #

Esto te permite mostrar u ocultar el componente en función de si se cumple una condición. Utiliza la sintaxis de nuestro sistema de Filtros 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 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 las configuraciones no permiten de otra manera.

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

Fuentes #

El Editor de Diseño viene empaquetado con una amplia gama de fuentes que puedes usar. Además, puedes optar por simplemente heredar la fuente de tu tienda en línea eligiendo Usar fuente de la tienda.

La única limitación de esto es para Recomendaciones de Correo Electrónico Embebidas, donde necesitas seleccionar una fuente, ya que no tienen acceso a las fuentes de tu tienda en línea.

Variables Líquidas #

En cualquier campo de texto, tienes la opción de agregar datos a través del lenguaje de plantillas Liquid.

Esto incluye crear campos de texto dinámicos como {{ headline }} o agregar cálculos basados en atributos de productos 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 #

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 es necesario.

Bucle de Datos #

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

Puedes establecer un índice si deseas comenzar desde un elemento específico en la lista que no sea el primero, y puedes elegir la cantidad de elementos a mostrar.

Este componente mostrará elementos en una columna por defecto.

Cuadrícula de elementos #

Funciona igual que el Bucle de Datos, pero muestra elementos en un diseño de cuadrícula en lugar de en una sola columna. Esto es útil para crear un diseño de Página de Búsqueda o Página de Categoría 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.

Control deslizante #

Muestra elementos en una fila horizontal con flechas deslizantes para desplazarse a través de ellos.

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

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

Usa Posición del botón para elegir si los botones deben estar centrados a cada lado del control deslizante, o mostrarse en cualquiera de sus 4 esquinas.

Botón de cargar más #

Utilizado principalmente para diseños de Página de Búsqueda y Página de Categoría, este botón permite a los usuarios ver más elementos que la cantidad predeterminada que has configurado.

Esto es una buena práctica ya que te permite reducir los tiempos de carga mostrando una menor cantidad de elementos inicialmente, 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 la Lógica de Producto elegida devuelva hasta que no se encuentren más elementos.

Caja #

Estos funcionan como contenedores para otros componentes. Pueden usarse para agrupar componentes juntos, o para crear un diseño con múltiples columnas.

Se pueden configurar con un color de fondo y un diseño 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.

Línea #

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.

Insignia #

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

Las insignias 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 una caja redondeada o como un banner diagonal.

Botón #

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

El evento onclick es un fragmento de Javascript que debe ejecutarse cuando se hace clic en el botón, que puede usarse para funciones de agregar al carrito, características de lista de deseos y otras funcionalidades de Javascript.

Imagen #

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 agregar un enlace único a la imagen si, por ejemplo, deseas enviar a los clientes a la página del producto cuando se hace clic y puedes elegir un efecto de hover como hacer que la imagen sea más grande cuando los visitantes pasan el mouse sobre ella.

Enlace #

Configura una URL para enviar a los visitantes cuando se haga clic en cualquier componente dentro de ella.

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

Precio #

Usado con mayor frecuencia para mostrar el precio de un producto, este componente contiene una serie de configuraciones específicas de 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.

Texto #

Agrega bloques de texto a tu diseño. Estos se utilizan para muchos propósitos diferentes, como mostrar los nombres de productos o páginas, marcas, descripciones y cualquier otro dato que desees 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. Puedes optar por limitar el texto a una cierta cantidad de caracteres para mantener los diseños intactos y estilizar tu texto con formato clásico como negrita, cursiva y más.

Variantes de Color #

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

Reseñas #

Agrega estrellas de reseña a tu diseño, indicando cuánto les gustó 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 para el producto de 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. Esto se puede usar para agregar scripts personalizados, o para agregar cualquier bloque especializado que de otro modo sería difícil de crear con los otros componentes.

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

Copiar Componentes #

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

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

Ver Código #

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

Puedes usar esto para convertir tu diseño del Editor de Diseño en un Diseño de Código, copiando el HTML y CSS, creando un nuevo Diseño de Código vacío y agregando el HTML y CSS a él.

Deshacer / Rehacer #

Si cometes un error, siempre puedes deshacer tus últimas acciones haciendo clic en el botón Deshacer o volver a agregarlo con el botón Rehacer. Ambos se encuentran justo debajo de la ventana de vista previa.

Publicar #

Cuando estés listo para usar tu diseño, debe ser publicado haciendo clic en el botón Publicar. Después de hacer cambios, también deberías publicar tu diseño nuevamente.

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