Design Editor

Conceptos básicos #

Cuando trabajas con Content para añadir elementos de Clerk.io a tu sitio, el Design Editor se puede utilizar para controlar el aspecto y la sensación de los elementos.

Puedes crear cualquier número de diseños que desees, y cualquier cantidad de bloques de Content puede 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, incluyendo sus IDs.

Cuando creas un diseño nuevo, 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 permiten estilos individuales 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:

• Desktop
• Tablet
• Mobile

Resumen del diseño #

El Design Editor 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 listan 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 resumen del diseño se resaltará en la ventana de vista previa, para que puedas ver con qué estás trabajando. Al hacer clic en un elemento en la ventana de vista previa, también se abrirán las configuraciones del componente que lo muestra.

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

Componentes #

Cada diseño consiste en varios elementos, llamados components. Un diseño puede contener los que desees, en el orden que quieras.

Se agregan nuevos componentes haciendo clic en el botón '+' en el lado derecho de cualquiera de los componentes, incluido el de Background.

Configuración general #

Además de sus configuraciones especializadas, la mayoría de los componentes comparten también las configuraciones estándar que se indican a continuación.

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 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 aplicas.

Fuentes #

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

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

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 productos como: {{ 100-((item.list_price*100)/item.price) | round }} %

El ejemplo de arriba calcularía el porcentaje redondeado de ahorro 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.

Usualmente 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 escogida de ellos. Esto se puede utilizar 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 específico de la lista que no sea el primero, y puedes elegir la cantidad de elementos a mostrar.

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

Cuadrícula de elementos #

Funciona igual que el Data Loop, pero muestra los elementos en un diseño de cuadrícula en vez de en 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 pantalla, y el espaciado entre los elementos tanto horizontal como verticalmente.

Slider #

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

Puedes configurar la cantidad de elementos que mostrar en cada desplazamiento según el tamaño de pantalla, y el estilo predeterminado de los botones. Actualmente hay 4 tipos de botones:

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

Usa Button position para elegir si los botones deben estar centrados a cada lado del slider, o mostrarse 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 has configurado.

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

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

Box #

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

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

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

Línea #

Una simple línea divisoria que se usa 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.

Los Badges tienen varias configuraciones para controlar el estilo, posición, texto a mostrar y más. Se pueden mostrar en cualquiera de las 4 esquinas de un elemento y mostrarse como una caja redondeada o una banda diagonal.

Botón #

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

El evento onclick es un fragmento de Javascript que debe ejecutarse al hacer clic en el botón, que puede usarse para funciones de agregar al carrito, lista de deseos u 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 añadir un enlace único a la imagen, por ejemplo, si deseas enviar a los clientes a la página del producto cuando hagan clic, y puedes elegir un efecto hover, como agrandar la imagen cuando los visitantes pasen el mouse 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 la URL de un producto), una URL específica o un evento onclick.

Precio #

Usado la mayoría de las veces para mostrar el precio de un producto, este componente contiene varias configuraciones específicas de precios.

Estas incluyen la cantidad de decimales, los separadores de miles y de decimales, y el símbolo de la moneda que se muestra 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 otro dato que quieras representar como texto.

El texto puede basarse en un texto estático elegido por ti o en datos de atributos, como nombres de productos o títulos de página. También puedes darle formato al texto con opciones clásicas 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 colores 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ñ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 en estrellas de color negro.

Además, muestra la cantidad de reseñas que el producto ha recibido 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. Esto puede usarse para agregar scripts personalizados o para añadir bloques especializados que de otro modo serían difíciles de crear con otros componentes.

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

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

Ver 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 CSS generados respectivamente.

Puedes usar esto para convertir tu diseño del Design Editor en un Code Design, copiando el HTML y el CSS, creando un nuevo Code Design vacío, y agregando el HTML y el CSS ahí.

Deshacer / Rehacer #

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

Publicar #

Cuando estés listo para usar tu diseño, debe publicarse haciendo clic en el botón Publish. Después de realizar cambios, también debes publicar tu diseño nuevamente.

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