Saltar al contenido principal

Constructor de Visualización: Diseña tu Widget de Fecha de Entrega

El Constructor de Visualización es donde decides exactamente cómo aparece la información de entrega a tus compradores. Desde un llamativo temporizador de cuenta regresiva hasta una línea de fecha limpia y minimalista — tú controlas el aspecto, la sensación y el contenido de cada widget que aparece en tus páginas de producto y carrito.

Lo que hace especialmente potente a esta sección es la Vista Previa en Vivo: a medida que cambias cualquier configuración, la vista previa en la parte superior de la página se actualiza en tiempo real. Ves el resultado de inmediato, sin guardar ni refrescar. Eso significa que puedes experimentar libremente hasta que el widget tenga exactamente el aspecto correcto para tu tienda.

Para abrir el Constructor de Visualización, ve a Back Office → Módulos → Estimated Delivery → Diseño.

La pestaña Diseño con la Vista Previa en Vivo y el selector de Estilo de Visualización

Primeros Pasos con la Vista Previa en Vivo​

La Vista Previa en Vivo se encuentra en la parte superior de la pestaña Diseño y actúa como tu lienzo. Muestra una simulación realista del widget tal como aparecerá en tu tienda, usando tu configuración actual.

Cada cambio que hagas en cualquier lugar de la barra lateral izquierda — estilo de visualización, colores, borde, icono, formato de texto — se refleja en la vista previa en el momento en que lo ajustas. No necesitas guardar para ver el resultado.

Esto hace que el Constructor de Visualización sea ideal para iterar rápidamente. Puedes comenzar con un preset que esté cerca de lo que quieres, luego ajustar el color del borde, modificar el espaciado y ver cómo la vista previa se convierte exactamente en el estilo que tu tienda necesita. Cuando estés satisfecho con lo que ves, haz clic en Guardar para aplicar la configuración.

Elegir un Estilo de Visualización​

El selector de Estilo de Visualización es la decisión más importante que tomarás en esta sección. Determina qué información se muestra en el widget y cómo se estructura esa información. Hay seis modos entre los que elegir.

Todos los Transportistas​

Este modo lista todos los transportistas disponibles para el producto actual, cada uno con su propia fecha de entrega estimada. Los compradores pueden ver de un vistazo qué transportistas son más rápidos y cuánto cuesta cada opción.

Esta es la opción correcta cuando ofreces múltiples métodos de envío y quieres dar a los compradores transparencia total. Funciona especialmente bien para tiendas donde la velocidad de envío es un factor decisivo — electrónica, regalos, pedidos de última hora.

Cuenta Regresiva​

El modo Cuenta Regresiva muestra un temporizador en marcha que cuenta hacia atrás hasta la hora límite del pedido — el punto después del cual los pedidos realizados hoy se enviarán mañana en lugar de hoy.

Esto crea una sensación natural de urgencia sin recurrir a trucos. Cuando un comprador ve "Haz tu pedido en 2h 14m para recibirlo el jueves", entiende exactamente lo que está en juego. Usa este modo cuando tengas una hora límite diaria claramente definida y quieras fomentar decisiones más rápidas.

Límite de Preparación​

Similar a la Cuenta Regresiva, pero en lugar de mostrar el plazo de despacho, este modo indica a los compradores cuándo se recogerá y preparará su pedido en el almacén. Está más orientado internamente — útil si tu almacén tiene un horario de preparación que afecta los tiempos de entrega y quieres ser transparente al respecto.

Día de Envío​

Este modo muestra el día específico en que se espera que el pedido sea enviado, en lugar de la fecha de entrega. Es adecuado para tiendas donde a los clientes les importa más cuándo sale el paquete del almacén — por ejemplo, cuando necesitan coordinarlo con una obra o una dirección de entrega.

Doble Visualización​

La Doble Visualización muestra dos filas de información de entrega una al lado de la otra. Es útil cuando quieres destacar, por ejemplo, tanto la fecha de entrega esperada como el transportista de envío, o mostrar dos transportistas diferentes de forma prominente.

Personalizado​

El modo Personalizado te da control total sobre el mensaje del widget permitiéndote escribir tu propia plantilla usando marcadores de posición. Puedes componer cualquier mensaje que combine nombres de transportistas, fechas, precios y condiciones contextuales.

Esta es la opción más flexible y a la que debes recurrir cuando los modos integrados no dicen exactamente lo que necesitas. Por ejemplo: "Entrega gratuita con DHL — llega antes del {date}", o un mensaje que cambia según la disponibilidad del stock.

Para una explicación completa de cómo escribir plantillas personalizadas, consulta la guía de Plantillas de Mensaje.

Inicio Rápido: Presets de Diseño​

Si no estás seguro por dónde empezar visualmente, la sección Apariencia ofrece 22 presets de diseño con un solo clic. Cada preset aplica una configuración visual completa — borde, estilo de esquinas, sombra, espaciado, color de fondo — con un solo clic.

Presets de diseño en la sección Apariencia

Los presets disponibles son:

Modern Card · Classic · Bold Green · Minimal · Subtle · Airy · Floating · Elegant · Fresh · Compact Pro · Pill Badge · Dashed · Warm · Left Accent · Top Bar · Urgent · Highlight · Statement · Double Line · Outlined · Dark Mode · Navy Accent

La Vista Previa en Vivo se actualiza en el momento en que haces clic en un preset, por lo que puedes desplazarte por ellos rápidamente y ver cuál se acerca más al estilo de tu tienda. Una vez que encuentres un buen punto de partida, puedes modificar configuraciones individuales — colores, esquinas, espaciado — sin tocar el resto.

Una nota sobre presets y colores personalizados: seleccionar un preset sobrescribe todas las configuraciones de apariencia, incluidos los colores personalizados que hayas introducido. Si quieres usar un preset como base pero mantener los colores de tu marca, aplica el preset primero y luego introduce tus valores de color personalizados después.

Personalizar la Apariencia​

Una vez que hayas elegido un preset (o si prefieres construir desde cero), la sección Apariencia te permite ajustar cada detalle visual.

Borde​

El borde le da al widget un contorno definido que ayuda a destacarlo del resto de la página de producto. Puedes elegir el estilo del borde (Ninguno, Simple, Discontinuo o Doble), su grosor (Fino, Normal o Grueso) y en qué lados aparece (Todos los lados, Solo izquierdo, Solo superior o Superior e inferior).

Un borde solo en el lado izquierdo es una opción popular — le da al widget un sutil destacado que se siente moderno y no domina la página. Un borde discontinuo puede añadir una sensación más suave e informal.

Esquinas​

El redondeo de esquinas controla qué tan afiladas o suaves lucen los bordes del widget. Las esquinas afiladas se sienten estructuradas y precisas. Las esquinas suaves son más amigables. Las esquinas redondeadas dan una apariencia de tarjeta. Las esquinas en píldora hacen que el widget parezca una insignia — llamativo y compacto.

Haz que esto coincida con la estética general de tu tema. Si tus botones y tarjetas de producto tienen esquinas redondeadas, hacer coincidir el widget con ellos crea cohesión visual.

Sombra​

Una sombra eleva ligeramente el widget de la página, dándole una profundidad similar a una tarjeta. Ninguna lo mantiene plano. Ligera añade la más leve sugerencia de profundidad. Elevada da un efecto claramente levantado. Flotante crea una fuerte sombra paralela que hace destacar el widget.

Usa las sombras con moderación — funcionan mejor cuando el resto de tu página de producto es relativamente plana.

Espaciado y Tamaño de Texto​

El espaciado controla el relleno interno del widget. Compacto (4px / 8px) es bueno para diseños de página ajustados. Cómodo (8px / 14px) se adapta a la mayoría de las tiendas. Espacioso (14px / 20px) le da al widget espacio para respirar y lo hace sentir premium.

El tamaño de texto es independiente: Pequeño (12px) para diseños minimalistas, Mediano (14px) como predeterminado, Grande (16px) cuando quieres que la fecha de entrega sea el elemento más prominente de la página de producto.

Margen​

El margen controla el espacio entre el widget y los elementos que lo rodean — típicamente el botón Añadir al Carrito y la descripción del producto. Normal (10px arriba y abajo) es un valor predeterminado fiable. Amplio (20px) le da al widget más protagonismo. Ajustado (0) elimina el espacio por completo, útil cuando tu tema ya gestiona el espaciado.

Colores y Formato de Texto​

La sección Colores y Formato te permite establecer un color personalizado y un estilo de texto para cada uno de los cuatro elementos que pueden aparecer en el widget.

Sección Colores y Formato

Los cuatro elementos son:

  • Fechas de entrega — la fecha de llegada estimada o el rango de fechas
  • Temporizador de cuenta regresiva — la cuenta regresiva en marcha que se muestra en el modo Cuenta Regresiva
  • Nombre del transportista — el nombre del transportista de envío
  • Precio del transportista — el coste de envío asociado al transportista

Para cada elemento, puedes establecer:

Color — un valor de color hexadecimal. Esto anula el color de texto predeterminado del widget solo para ese elemento. Es útil para llamar la atención sobre la fecha de entrega (tu mensaje principal) mientras mantienes el nombre del transportista y el precio en un tono más neutro.

Formato de texto — Negrita, Cursiva y Subrayado, en cualquier combinación. Estas opciones utilizan una máscara de bits internamente: Negrita = 1, Cursiva = 2, Subrayado = 4. En la práctica, las configuras mediante casillas de verificación en la interfaz — los números son solo cómo el módulo almacena tus elecciones entre bastidores. Puedes combinarlos libremente: Negrita + Cursiva le da a la fecha un fuerte énfasis, por ejemplo.

Un enfoque común es poner el texto de la fecha de entrega en Negrita y darle el color de acento de tu marca, mientras dejas el nombre del transportista en el estilo predeterminado. Esto lleva la vista del comprador a la información más importante primero.

Posicionamiento​

La sección Posicionamiento controla dónde aparece el widget en la página de producto. Las opciones suelen incluir encima del botón Añadir al Carrito, debajo de él, o en una posición de hook específica definida por tu tema.

Elige el posicionamiento basándote en el flujo de lectura natural de tus compradores. La mayoría de las tiendas encuentran que colocar el widget directamente encima o debajo del botón Añadir al Carrito funciona mejor — aparece en el momento en que el comprador está decidiendo si comprar, que es exactamente cuando la información de entrega es más persuasiva.

CSS Personalizado​

El campo CSS Personalizado en la parte inferior de la barra lateral es para usuarios avanzados que necesitan un control más allá de lo que ofrecen las configuraciones visuales. Todo lo que introduzcas aquí se inyecta en la página junto al widget, con alcance al contenedor del widget.

Puedes usar esto para aplicar estilos que coincidan con temas muy personalizados, ajustar el widget para puntos de interrupción específicos, o anular un detalle de preset que no tiene una configuración dedicada.

Si te manejas bien con CSS, este campo te da libertad total. Si no, las configuraciones visuales por sí solas cubrirán las necesidades de la gran mayoría de las tiendas.

Consejos para un Aspecto Profesional​

Conseguir un widget que se sienta nativo a tu tienda — en lugar de añadido a la fuerza — se reduce a unas pocas elecciones coherentes.

Haz coincidir el estilo de esquinas de tu tema. Si tus botones tienen esquinas redondeadas, dale al widget esquinas redondeadas también. La coherencia en la forma crea un lenguaje de diseño cohesivo en toda la página.

Usa el color de acento de tu marca para la fecha. La fecha de entrega es la información más importante del widget. Configurarla con el color primario o de acento de tu tienda la hace sentir intencional en lugar de genérica.

Mantén el espaciado generoso. Un widget apretado parece algo añadido como segunda opción. El espaciado Cómodo o Espacioso, combinado con un margen Normal o Amplio, le da al widget espacio para respirar y lo hace sentir como una parte adecuada de la página.

Comienza con un preset y luego ajusta. Aunque ninguno de los presets sea perfecto, todos proporcionan una base visual sólida. Es más rápido comenzar desde Minimal o Subtle y cambiar una o dos cosas que construir desde cero.

Previsualiza en un producto real. La Vista Previa en Vivo muestra el widget de forma aislada. Una vez que estés satisfecho, comprueba una página de producto real en tu tienda para ver cómo queda junto a las imágenes del producto, la descripción y los botones.

Preguntas Frecuentes​

La Vista Previa en Vivo no se actualiza cuando cambio la configuración. ¿Qué debo hacer?

Intenta refrescar la página de la pestaña Diseño. Si la vista previa sigue sin actualizarse, comprueba que JavaScript esté habilitado en tu navegador y que ninguna extensión del navegador esté bloqueando scripts en las páginas del Back Office. La Vista Previa en Vivo depende de un pequeño listener de JavaScript que detecta los cambios de configuración.

Apliqué un preset y ahora mis colores personalizados han desaparecido. ¿Puedo recuperarlos?

Los presets sobrescriben todas las configuraciones de apariencia, incluidos los colores personalizados. Si aplicaste un preset por accidente, puedes volver a introducir tus valores de color en la sección Colores y Formato sin necesidad de revertir todo el preset. De ahora en adelante, aplica siempre el preset primero y luego establece tus colores personalizados.

¿Puedo mostrar un estilo de widget diferente en la página del carrito que en la página del producto?

El Constructor de Visualización aplica una configuración global que cubre todos los posicionamientos — página de producto, página del carrito y cualquier otro lugar donde aparezca el widget. Si necesitas contenido significativamente diferente por tipo de página, el estilo de visualización Personalizado con plantillas de mensaje te ofrece la mayor flexibilidad a través de bloques condicionales.

¿Qué significa el número de máscara de bits en la sección Colores y Formato?

La máscara de bits es solo cómo el módulo almacena tus elecciones de formato de texto entre bastidores. No necesitas escribir números — la interfaz muestra casillas de verificación para Negrita, Cursiva y Subrayado. Cuando marcas varias casillas, el módulo suma sus valores (Negrita = 1, Cursiva = 2, Subrayado = 4). Por ejemplo, Negrita + Cursiva se almacena como 3. Esto solo es relevante si estás leyendo archivos de exportación de configuración o estableciendo valores a través de la API.

¿El Constructor de Visualización afecta cómo se ven las fechas de entrega en los correos de confirmación de pedido?

No. El Constructor de Visualización solo controla el widget del front office en las páginas de producto y carrito. El formato de las fechas de entrega en los correos se configura por separado a través de las configuraciones de Variables de Email.

¿Puedo establecer estilos de widget diferentes por transportista?

El Constructor de Visualización aplica un único estilo global a todos los transportistas mostrados en el widget. Para diferenciar transportistas visual o textualmente, usa el estilo de visualización Personalizado con plantillas de mensaje, donde puedes escribir contenido condicional basado en el nombre del transportista u otras variables.

Relacionado​