Temas y personalización
El editor de identidad visual permite personalizar la apariencia de la tienda online directamente desde el Backoffice, sin necesidad de modificar código. Mediante un panel lateral interactivo y una vista previa en tiempo real, los administradores pueden ajustar colores, tipografías, tamaños, bordes, sombras y el logotipo de la tienda.
Los cambios se almacenan en un archivo CSS (identity.css) que se aplica como capa de personalización sobre el diseño base de la tienda.
Acceso
La funcionalidad se encuentra en el menú lateral del Backoffice:
Gestión > Temas y personalización
Permisos
| Perfil | Roles | Qué puede hacer |
|---|---|---|
| Gestión | advanced_config:read, :create, :write |
Abrir el editor, modificar tokens, importar CSS, publicar y restaurar versiones del historial. |
| Solo consulta | advanced_config:read |
Abrir el editor y previsualizar la tienda. No puede publicar cambios ni restaurar versiones. |
| Sin acceso | — | La entrada de menú no aparece. Si se accede por la dirección de la página, se muestra el aviso «No tiene permisos para acceder a esta sección» y se vuelve a la página de inicio. |
Publicar necesita advanced_config:create y restaurar una versión, advanced_config:write. El rol advanced_config:admin incluye todos los anteriores. Son los mismos roles que los de la pantalla Configuración avanzada Web.
Interfaz del editor
Al acceder a la pantalla, se muestra una vista general con un botón para entrar en el modo de edición. Al activar el modo de edición, la interfaz cambia a una vista a pantalla completa compuesta por:
- Panel lateral flotante (izquierda): contiene todas las secciones de personalización, organizadas en dos niveles. El panel es arrastrable y puede reposicionarse dentro de la pantalla.
- Vista previa (derecha): muestra la tienda real dentro de un iframe. Los cambios se reflejan en tiempo real a medida que se editan los valores.
- Barra de herramientas (superior): ofrece acciones globales como cambiar dispositivo, zoom, importar/exportar CSS, historial de versiones, restablecer y publicar.
Barra de herramientas
La barra superior del editor proporciona las siguientes acciones:
| Acción | Descripción |
|---|---|
| Refrescar | Recarga la vista previa del iframe |
| Dispositivo | Alterna entre modo desktop y dispositivos móviles/tablets |
| Zoom | Controla el nivel de zoom de la vista previa (30% - 100%). Se desactiva en modo dispositivo |
| Debug de estáticos | Activa una rejilla visual sobre la vista previa para comprobar alineación y espaciados |
| Importar CSS | Permite cargar un archivo .css con variables personalizadas previamente exportadas |
| Descargar CSS | Exporta el CSS actual a un archivo identity.css descargable |
| Historial | Muestra todas las versiones anteriores publicadas, con opción de restaurar |
| Restablecer | Deshace todos los cambios pendientes y devuelve los tokens a sus valores por defecto |
| Publicar | Genera el archivo identity.css final y lo sube al CDN de la tienda |
Simulación de dispositivos
El editor permite previsualizar la tienda en distintos dispositivos:
Escritorio
| Dispositivo | Resolución |
|---|---|
| Laptop | 1366 x 768 px |
| Desktop HD | 1920 x 1080 px |
Móvil y tablet
| Dispositivo | Resolución |
|---|---|
| iPad Mini | 768 x 1024 px |
| iPad Pro 12.9" | 1024 x 1366 px |
| iPhone SE | 375 x 667 px |
| iPhone 14 | 390 x 844 px |
| iPhone 15 Pro Max | 430 x 932 px |
En modo móvil/tablet, el zoom se desactiva y se habilita un botón de rotación para alternar entre orientación vertical y horizontal.
Organización de secciones
Las opciones de personalización se organizan en dos niveles:
- Nivel 1 — Esencial: agrupa las opciones más habituales y de mayor impacto visual (logo, color primario, tipografía, tarjeta de producto).
- Nivel 2 — Avanzado: contiene opciones de ajuste fino sobre colores semánticos, grises, fondos, bordes y elementos especializados.
Cada sección puede expandirse o contraerse. Si una sección tiene campos modificados, se muestra un contador con el número de cambios pendientes.
Nivel 1 — Secciones esenciales
A continuación se muestran las secciones principales del Nivel 1 con sus campos expandidos:
Logo
Permite gestionar el logotipo de la tienda que se muestra en la cabecera.
| Opción | Descripción |
|---|---|
| Altura del logo | Controla la altura del logotipo en la cabecera (desktop). Unidades: px, rem, em, etc. |
| Altura del logo (móvil) | Altura del logo en pantallas menores de 768 px |
| Subir logo | Abre el diálogo para cargar un archivo PNG como logotipo |
| Ver recursos | Abre la biblioteca de recursos gráficos (assets) |
| Copiar URL | Copia la URL del logotipo actual al portapapeles |
La sección muestra una vista previa del logotipo actual junto con un slider para ajustar la altura de forma visual.
Color primario
Define el color principal de la marca. Este color se aplica a botones primarios, enlaces, iconos activos, spinner de carga y elementos destacados de la tienda.
| Variable CSS | Descripción |
|---|---|
--tol-color-primary |
Color principal de la marca |
Sincronización automática
Esta sección incluye un interruptor de sincronización que, al activarse, propaga automáticamente el color primario a múltiples elementos derivados:
Copia directa — el color primario se aplica tal cual a:
- Botones (
--tol-color-btn) - Checkboxes (
--tol-color-checkbox) - Enlaces (
--tol-color-link) - Iconos (
--tol-color-icon) - Badges (
--tol-color-badge)
Derivados oscurecidos — se genera una variante más oscura para estados hover:
- Hover de botones: oscurecido un 10%
- Hover de enlaces: oscurecido un 10%
- Hover de iconos: oscurecido un 10%
- Hover primario: oscurecido un 10%
- Hover general: oscurecido un 25%
Derivados con transparencia — se generan variantes con canal alpha:
- Fondo primario translúcido (18% de opacidad)
- Primario transparente (30% de opacidad)
Cuándo usar la sincronización
Se recomienda mantener la sincronización activada cuando se desea que toda la identidad visual mantenga coherencia con un único color de marca. Desactivarla permite personalizar cada elemento de forma independiente.
Colores de interacción
Controlan el aspecto de los elementos interactivos de la tienda.
| Variable CSS | Descripción | Sincronizable |
|---|---|---|
--tol-color-btn |
Color de fondo de los botones primarios (CTA) | Sí |
--tol-color-btn-hover |
Color de botones en estado hover | Sí |
--tol-color-checkbox |
Color de checkboxes marcados | Sí |
--tol-color-link |
Color del texto de enlaces | Sí |
--tol-color-link-hover |
Color de enlaces en estado hover | Sí |
--tol-color-badge |
Color de fondo de badges numéricos (ej. carrito) | Sí |
Los campos marcados como "Sincronizable" se calculan automáticamente cuando el interruptor de sincronización está activo. Si la sincronización está desactivada, cada campo se edita de forma independiente.
Iconos
Define los colores de los iconos de la tienda (carrito, usuario, búsqueda, favoritos).
| Variable CSS | Descripción | Sincronizable |
|---|---|---|
--tol-color-icon |
Color principal de los iconos | Sí |
--tol-color-icon-secondary |
Color secundario (estrellas, iconos decorativos) | No |
--tol-color-icon-hover |
Color de iconos principales al pasar el ratón | Sí |
--tol-color-icon-hover-secondary |
Color de iconos secundarios en hover | No |
Barras del header
Permite configurar cada barra de la cabecera de la tienda. La cabecera está compuesta por hasta 4 barras horizontales más una barra de categorías.
Cada barra se muestra como una subsección plegable e independiente dentro del panel ("Barra superior 1", "Barra superior 2", …, "Barra de categorías"). Todas las subsecciones arrancan plegadas para reducir el scroll: basta con desplegar la que se quiera editar. Un pequeño contador junto al título indica el número de campos modificados dentro de esa barra.
Cada barra expone los siguientes campos:
| Campo | Tipo | Variable CSS (Barra N) |
|---|---|---|
| Altura | Medida (admite auto) |
--tol-header-bar-N-height |
| Ocultar al scroll | Comportamiento (No / Sí / Mostrar al Inicio) | --tol-header-bar-N-hide-on-scroll + --tol-header-bar-N-show-only-at-default-position |
| Color de fondo | Color | --tol-header-bar-N-bg-color |
| Color de texto | Color | --tol-header-bar-N-text-color |
| Borde | Borde (ancho por lado + estilo + color) | --tol-header-bar-N-border-width + --tol-header-bar-N-border-style + --tol-header-bar-N-border-color |
Todos los campos disponen además de una variante móvil independiente (pantallas < 768 px) con sufijo -mobile en la variable CSS, que sobrescribe el valor desktop.
Altura
El modo auto permite que la altura la determine el contenido de la barra automáticamente en lugar de fijar un valor numérico. Si se introduce un valor manual, se puede elegir la unidad (px, rem, em, %, vw, vh).
Ocultar al scroll
Selector con tres opciones que controlan cómo se comporta la barra al hacer scroll por la tienda:
| Opción | Comportamiento |
|---|---|
| No | La barra permanece visible siempre |
| Sí | La barra se oculta cuando el usuario hace scroll hacia abajo |
| Mostrar al Inicio | La barra solo se muestra cuando el usuario está cerca del inicio de la página (por encima del umbral configurado). Al desplazarse más allá del umbral, la barra se oculta |
Internamente el selector escribe dos variables en paralelo:
--tol-header-bar-N-hide-on-scroll—0(No) /1(Sí)--tol-header-bar-N-show-only-at-default-position—0/1
La combinación hide-on-scroll=1 + show-only-at-default-position=1 corresponde al modo "Mostrar al Inicio". El editor gestiona ambas variables a la vez, por lo que no es necesario editarlas de forma independiente.
Color de fondo y color de texto
Selectores de color estándar para el fondo y el texto de la barra. Aceptan cualquier valor de color CSS, incluidos transparent, inherit y currentColor (para estos valores especiales el selector muestra un patrón de damero o un gris neutro, ya que no son colores renderizables directamente).
Borde
Control avanzado para definir el borde de la barra con tres dimensiones:
- Estilo (
border-style):none,solid,dashed,dotted,double— se aplica a los cuatro lados. - Color (
border-color): selector de color — se aplica a los cuatro lados. - Ancho por lado (
border-width): cuatro campos numéricos independientes (superior, derecho, inferior, izquierdo) con una única unidad CSS común. Un botón de enlace permite sincronizar los cuatro valores para modificarlos a la vez.
Al estar el ancho separado por lado, la variable --tol-header-bar-N-border-width almacena la notación CSS de cuatro valores (ej. 1px 0 2px 0).
Umbral para "Mostrar al Inicio"
Dentro de la sección, una subsección adicional "Ajustes globales" contiene el umbral que utiliza el modo "Mostrar al Inicio" para todas las barras:
| Variable CSS | Unidad | Descripción |
|---|---|---|
--tol-header-default-position-threshold |
px |
Distancia de scroll desde el inicio por debajo de la cual se considera que el usuario está "al principio" de la página. Las barras configuradas como "Mostrar al Inicio" permanecen visibles mientras el scroll vertical sea inferior a este valor |
Widget de producto
Personaliza la apariencia de la tarjeta de producto que se muestra en grids de categoría, home, resultados de búsqueda y carruseles.
| Variable CSS | Tipo | Descripción |
|---|---|---|
--tol-widget-product-bg |
Color | Fondo de la tarjeta |
--tol-widget-product-border-color |
Color | Color del borde |
--tol-widget-product-highlight-color |
Color | Color de textos destacados (precio rebajado, "Oferta") |
--tol-widget-product-name-font-size |
Medida | Tamaño de fuente del nombre del producto |
--tol-widget-product-name-line-clamp |
Medida | Líneas máximas del nombre antes de truncar con "..." |
--tol-widget-product-image-size |
Medida | Dimensión de la imagen del producto |
--tol-widget-product-border-radius |
Radio | Redondeo de las esquinas de la tarjeta (+ variante móvil) |
--tol-widget-product-shadow-hover |
Sombra | Sombra al pasar el ratón sobre la tarjeta |
--tol-unit-selector-border-radius |
Radio | Redondeo del selector de unidades (+/-) |
Tipografía
Permite seleccionar las familias tipográficas de la tienda. El editor ofrece un catálogo de fuentes que incluye fuentes preinstaladas en el CDN y fuentes de Google Fonts.
| Variable CSS | Descripción |
|---|---|
--tol-font-primary |
Fuente principal (regular) — textos de párrafo, etiquetas, UI general |
--tol-font-bold |
Fuente negrita — títulos, nombres de producto, precios |
--tol-font-semibold |
Fuente seminegrita — subtítulos, labels, textos de botón |
Catálogo de fuentes disponibles
Fuentes CDN (preinstaladas, sin descarga adicional):
- Source Sans Pro
- Source Sans 3
Fuentes Google Fonts (se descargan automáticamente al publicar):
Roboto, Open Sans, Montserrat, Lato, Poppins, Inter, Noto Sans, Raleway, Nunito, Nunito Sans, Ubuntu, Oswald, Rubik, PT Sans, Work Sans, Fira Sans, Barlow, Manrope, Merriweather, Playfair Display, Lora, Kanit, Mukta.
Descarga automática de Google Fonts
Al seleccionar una fuente de Google Fonts, el sistema la descarga automáticamente en formato WOFF2, la sube al CDN de la tienda y genera las declaraciones @font-face necesarias. Esto garantiza que las fuentes se sirvan desde el dominio propio y no dependan de servidores externos.
Tamaños de fuente
Controlan la escala tipográfica de la tienda. Todos los tamaños se definen relativamente al tamaño base.
| Variable CSS | Valor por defecto | Uso típico |
|---|---|---|
--tol-font-size-base |
1rem (16px) | Texto de párrafo general, descripciones |
--tol-font-size-sm |
0.875rem (14px) | Textos secundarios, fechas, "IVA incluido" |
--tol-font-size-xs |
0.75rem (12px) | Disclaimers, legal, textos auxiliares |
--tol-font-size-md |
1.125rem (18px) | Subtítulos ligeros, precios |
--tol-font-size-lg |
1.25rem (20px) | Títulos de sección secundarios |
--tol-font-size-xl |
1.5rem (24px) | Encabezados h3-h4 |
--tol-font-size-2xl |
1.75rem (28px) | Títulos h2 |
--tol-font-size-3xl |
2rem (32px) | Títulos h1 |
--tol-font-size-display |
2.5rem (40px) | Títulos hero, banners de campaña |
Nivel 1 — Resto de secciones
Las secciones de Widget de producto, Tipografía y Tamaños de fuente se muestran a continuación:
Nivel 2 — Secciones avanzadas
Promociones
Colores asociados a las etiquetas y tabs de promociones.
| Variable CSS | Descripción |
|---|---|
--tol-color-promotions |
Color principal de etiquetas de promoción y ofertas |
--tol-color-promotions-tab-immediate |
Color del tab de descuentos inmediatos |
--tol-color-promotions-tab-deferred |
Color del tab de descuentos diferidos (acumulables) |
Grises y fondos
Colores grises utilizados como textos secundarios, bordes, separadores y fondos de página.
| Variable CSS | Descripción |
|---|---|
--tol-color-gray1 |
Gris claro — bordes sutiles, líneas divisoras |
--tol-color-gray2 |
Gris textos secundarios — breadcrumbs, labels |
--tol-color-gray3 |
Gris bordes principales — inputs, selects, paneles |
--tol-color-gray5 |
Gris medio — bordes hover, bordes de pestañas |
--tol-color-gray6 |
Gris muy oscuro — nombre de producto, cabeceras |
--tol-color-disabled |
Color de elementos deshabilitados |
--tol-color-light-gray |
Fondo gris muy claro para separaciones |
--tol-color-background |
Fondo general de componentes y áreas de contenido |
--tol-color-body-bg |
Color de fondo de la página completa (body) |
Paleta secundaria
Colores complementarios de la marca.
| Variable CSS | Descripción |
|---|---|
--tol-color-secondary |
Color secundario (dorado/amarillo) — acentos, estrellas |
--tol-color-secondary-alternative |
Color alternativo secundario (púrpura) |
--tol-color-hover |
Color de hover oscuro (azul profundo) |
--tol-color-dark-gray |
Gris oscuro — color de texto principal del body |
Colores semánticos
Colores que transmiten significado (éxito, error, aviso, información).
| Variable CSS | Color por defecto | Descripción |
|---|---|---|
--tol-color-success |
Verde (#008a32) | Confirmaciones, "Disponible", pedido correcto |
--tol-color-danger |
Rojo (#d10036) | Errores, validaciones fallidas, alertas |
--tol-color-warning |
Naranja (#fd9c00) | Advertencias, estados pendientes |
--tol-color-info |
Cian (#08a4bd) | Mensajes informativos, tips |
--tol-color-green |
Verde | Indicadores de disponibilidad |
--tol-color-orange |
Naranja | Acentos secundarios, estados intermedios |
--tol-color-red |
Rojo | Atención crítica, precios tachados |
--tol-color-booking |
Rosa/Magenta | Franjas horarias y slots seleccionados |
Escala de grises
Escala de grises completa para usar en fondos, bordes y textos.
| Variable CSS | Descripción |
|---|---|
--tol-color-gray1 |
Gris claro |
--tol-color-gray3 |
Gris medio-claro |
--tol-color-gray4 |
Gris fondos alternativo (filas alternas) |
--tol-color-gray5 |
Gris medio |
--tol-color-white |
Blanco puro |
--tol-color-black |
Negro puro |
Fondos semánticos
Colores de fondo translúcidos que acompañan a los colores semánticos.
| Variable CSS | Descripción |
|---|---|
--tol-color-bg-primary |
Fondo primario translúcido — banners informativos, resumen de pedido |
--tol-color-bg-success |
Fondo de éxito — confirmaciones, validaciones OK |
--tol-color-bg-danger |
Fondo de error — alertas de formulario |
--tol-color-bg-warning |
Fondo de advertencia — disponibilidad limitada |
--tol-color-bg-info |
Fondo informativo — notas, tips |
--tol-color-bg-cart-gift |
Fondo de producto regalo en el carrito |
--tol-color-bg-cart-gift-description |
Fondo de la descripción del regalo |
--tol-color-tmc-background |
Fondo del bloque de términos y condiciones |
Tabs de promociones
Colores de los indicadores de tipo de promoción en paneles de detalle.
| Variable CSS | Descripción |
|---|---|
--tol-color-pannel-check-immediate |
Indicador de promociones inmediatas |
--tol-color-pannel-check-deferred |
Indicador de promociones diferidas |
Selectores de interfaz
Colores de elementos interactivos generales (dropdowns, overlays, estados de selección).
| Variable CSS | Descripción |
|---|---|
--tol-color-disabled |
Elementos deshabilitados (botones inactivos, opciones no disponibles) |
--tol-color-available |
Franjas de entrega disponibles (verde claro) |
--tol-color-selector-hover |
Fondo de opciones al pasar el ratón en selects/dropdowns |
--tol-color-selector-selected |
Fondo de la opción seleccionada |
--tol-color-overlay |
Fondo del overlay detrás de modales y paneles |
--tol-color-tertiary |
Color terciario — bordes suaves, separadores decorativos |
--tol-color-form-steps-bg-title |
Fondo del título en formularios multi-paso (checkout) |
Medidas y layout
Controles de dimensiones globales, radios de borde y tamaños de elementos.
| Variable CSS | Valor por defecto | Descripción |
|---|---|---|
--tol-max-width |
1582px | Ancho máximo del contenedor principal |
--tol-border-radius-none |
0 | Esquinas completamente rectas |
--tol-border-radius-sm |
4px | Botones, inputs, dropdowns |
--tol-border-radius-md |
8px | Modales, paneles, tarjetas |
--tol-border-radius-lg |
16px | Bloques con redondeo pronunciado |
--tol-border-radius-xl |
20px | Barra de búsqueda, elementos destacados |
--tol-border-radius-primary |
20px | Token semántico principal (+ variante móvil) |
--tol-border-radius-pill |
999px | Elementos en forma de píldora (tags, selectores +/-) |
--tol-border-radius-circle |
50% | Avatares, badges circulares |
--tol-logo-size-small |
— | Altura del logo en versión pequeña (footer, paneles) |
--tol-button-size-large |
— | Ancho de botones grandes (CTA, botón de pago) |
Badges especiales
Colores de badges diferenciadores (ej. "Más vendido").
| Variable CSS | Descripción |
|---|---|
--tol-color-badge-most-buyed-text |
Color del texto del badge "Más comprado" |
--tol-color-badge-most-buyed-bg |
Color de fondo del badge "Más comprado" |
--tol-color-show-password-mode-text |
Color del icono "Mostrar contraseña" en campos password |
Tipos de campo del editor
El editor utiliza distintos tipos de controles según la naturaleza del token:
Color
Selector de color con campo de texto para introducir el valor hexadecimal (ej. #1765f6). Al hacer clic se abre un diálogo con el selector de color visual.
Medida
Campo numérico con botones de incremento/decremento y un selector de unidad CSS:
- Unidades disponibles:
px,rem,em,%,vw,vh - Si el campo lo permite, se muestra un botón Auto para que el contenido determine la dimensión automáticamente
- Al cambiar de unidad, el sistema recalcula el valor equivalente (ej.
16px→1rem)
Radio de esquinas (border-radius)
Control avanzado con 4 campos independientes correspondientes a cada esquina de la caja (superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda), cada uno rotulado con su posición. Un botón de enlace permite sincronizar los 4 valores para que un único control los modifique todos a la vez.
Borde (border)
Control compuesto para editar los tres atributos que forman un borde CSS:
- Estilo (
border-style): desplegable con los valoresnone,solid,dashed,dotted,double. - Color (
border-color): selector de color. - Ancho por lado (
border-width): rejilla 2×2 con los cuatro lados de la caja (superior, derecho, inferior, izquierdo) rotulados y un selector de unidad CSS compartido. Un botón de enlace permite sincronizar los cuatro anchos.
El ancho se almacena en la variable CSS como notación de cuatro valores (ej. 1px 0 2px 0), mientras que estilo y color se guardan en variables independientes sufijadas con -style y -color.
Sombra (box-shadow)
Editor visual de sombra CSS con los siguientes parámetros:
- Desplazamiento X — distancia horizontal de la sombra
- Desplazamiento Y — distancia vertical de la sombra
- Desenfoque (blur) — radio de desenfoque
- Extensión (spread) — tamaño de expansión
- Color — color de la sombra (selector de color)
- Posición — alterna entre sombra exterior (outline) e interior (inset)
Selector (select)
Desplegable con búsqueda integrada. Se utiliza para la selección de familias tipográficas.
Comportamiento al scroll
Botón segmentado con tres opciones (No / Sí / Mostrar al Inicio) específico para el comportamiento de ocultación de las barras del header al hacer scroll. Escribe en paralelo dos variables binarias (hide-on-scroll y show-only-at-default-position) que se combinan para representar los tres modos posibles.
Flujo de publicación
El proceso para aplicar los cambios de personalización a la tienda es el siguiente:
- Editar tokens: modificar los valores deseados en el panel lateral. Cada campo modificado se marca con un indicador azul.
- Previsualizar: los cambios se reflejan inmediatamente en la vista previa del iframe.
- Publicar: al pulsar el botón "Publicar", se muestra un diálogo de confirmación con el número de tokens modificados.
- Generación del CSS: el sistema genera el archivo
identity.csscon todas las variables personalizadas dentro de una capa CSS (@layer identity) con!importantpara asegurar la sobreescritura. - Subida de fuentes: si se han seleccionado fuentes de Google Fonts, se descargan en formato WOFF2 y se suben al CDN de la tienda.
- Aplicación: el archivo CSS se almacena en la ruta
tol/shop-front/css/identity.cssdel CDN y queda disponible inmediatamente en la tienda.
Aviso de brand.css
Si la tienda tiene un archivo brand.css con contenido, se muestra un aviso informativo. El archivo brand.css contiene personalizaciones previas que pueden entrar en conflicto con los cambios del editor de identidad.
Importar y exportar CSS
Exportar (Descargar)
Genera un archivo identity.css con todas las variables CSS actuales y lo descarga en el navegador. Útil para:
- Guardar una copia de seguridad antes de realizar cambios
- Compartir la configuración de personalización entre entornos
- Editar el CSS manualmente fuera del editor
Importar
Permite cargar un archivo .css previamente exportado. El sistema:
- Lee el contenido del archivo
- Extrae las variables CSS (formato
--tol-*: valor) - Las aplica sobre los tokens del editor
- Informa del número de variables encontradas y aplicadas
El formato soportado incluye tanto variables envueltas en :root { } como variables sueltas.
Historial de versiones
El editor mantiene un historial completo de todas las versiones publicadas del archivo identity.css. Al acceder al historial se muestra una tabla con:
| Columna | Descripción |
|---|---|
| Fecha | Fecha y hora de la publicación (formato DD/MM/YYYY HH:MM) |
| Usuario | Nombre del usuario que realizó la publicación |
| Acción | Botón para restaurar esa versión |
Al restaurar una versión anterior, se muestra un diálogo de confirmación. Una vez confirmado, el archivo se restaura en el CDN y la interfaz se recarga con los valores de la versión seleccionada.
Restablecer valores
El botón "Restablecer" devuelve todos los tokens a sus valores por defecto (los definidos en el diseño base de la tienda). Esta acción:
- Requiere confirmación mediante un diálogo
- Afecta a todos los campos del editor, no solo a los modificados
- No publica automáticamente — los cambios quedan pendientes de publicación
Para restablecer un campo individual, cada campo cuenta con un icono de papelera que devuelve únicamente ese token a su valor por defecto.
Información contextual de tokens
Cada campo del editor dispone de un botón de información (icono i) que abre un diálogo con:
- Uso: descripción de dónde y cómo se aplica la variable CSS en la tienda
- Dónde comprobarlo: ubicación concreta de la tienda donde se puede verificar el cambio visualmente
Esta información ayuda al administrador a entender el impacto de cada modificación antes de realizarla.
Variantes móvil
Algunos tokens disponen de un valor independiente para dispositivos móviles (pantallas menores de 768 px). Estos campos se identifican en el editor con un indicador de variante móvil y permiten definir un valor diferente al de escritorio.
Los tokens con variante móvil incluyen:
- Altura del logotipo
- Barras del header (barras 1-4 + categorías): altura, comportamiento al scroll, color de fondo, color de texto y borde (ancho, estilo y color)
- Radio de esquinas de la tarjeta de producto
- Radio de esquinas primario
Indicadores visuales del editor
El editor proporciona diversos indicadores para facilitar el seguimiento de los cambios:
| Indicador | Significado |
|---|---|
| Punto azul junto a un campo | El valor ha sido modificado respecto al valor por defecto |
| Contador en sección | Número de campos modificados dentro de esa sección |
| Badge en botón Publicar | Número total de tokens pendientes de publicar |
| Icono de candado | Campo sincronizado desde el color primario (solo editable desactivando la sincronización) |
| Badge "brand.css" | La tienda tiene un archivo brand.css con contenido que puede generar conflictos |
Resumen de variables CSS disponibles
El editor gestiona más de 170 variables CSS organizadas en las siguientes categorías:
| Categoría | Tokens | Nivel |
|---|---|---|
| Logo | 2 | 1 |
| Color primario | 1 | 1 |
| Colores de interacción | 6 | 1 |
| Iconos | 4 | 1 |
| Barras del header | 81 | 1 |
| Widget de producto | 9 | 1 |
| Tipografía | 3 | 1 |
| Tamaños de fuente | 9 | 1 |
| Promociones | 3 | 2 |
| Grises y fondos | 9 | 2 |
| Paleta secundaria | 4 | 2 |
| Colores semánticos | 8 | 2 |
| Escala de grises | 6 | 2 |
| Fondos semánticos | 8 | 2 |
| Tabs de promociones | 2 | 2 |
| Selectores de interfaz | 7 | 2 |
| Medidas y layout | 11 | 2 |
| Badges especiales | 3 | 2 |