Este es el manual detallado de Sinsunhan (sinsunhan), el tema oficial de Zittme para tiendas en línea de alimentos frescos. Está diseñado para funcionar junto con el módulo de comercio, y su característica principal es que el propio layout dibuja la portada (página principal): sin crear una página de widgets aparte, obtienes una portada de tienda completa con slider, oferta del día, campañas, secciones de productos, ranking y publicaciones recientes de los tableros. Incluye modo oscuro y diseño responsivo de serie, y la fuente predeterminada es Pretendard.

Las pantallas de este documento son capturas directas de un sitio de demostración real. Puedes ver la demo en shopdemo.zitt.me.

Componentes

Todos los componentes comparten los mismos tokens de diseño (verde de marca · fuente · redondeo · espaciado). Si cambias el color de acento en un solo lugar, la configuración del layout, se aplica en todas las pantallas.

Instalación y aplicación

1. Coloca los archivos del tema en themes/sinsunhan. (Instalación desde la tienda o descomprimiendo el archivo)
2. En Administración > Configuración de diseño, elige el tema Sinsunhan y aplícalo. El layout y los skins de los módulos se aplican de una sola vez.
3. En Zittme 1.0.1 o superior, al aplicar el tema también cambian los skins de mensajes privados, mensajes del sistema y centro de notificaciones. En 1.0.0, elige 신선한 en la configuración de los módulos de comunicación, mensajes y centro de notificaciones, uno por uno.
4. Si el módulo de comercio está instalado, el menú de la tienda, la búsqueda del encabezado y las secciones de productos de la portada se conectan automáticamente. Si hay varios módulos de tienda, escribe el mid que quieras usar en Configuración del layout > Composición principal, campo "Dirección del módulo de tienda (mid)".

Entorno recomendado: Zittme 1.0.1 o superior, comercio 0.2.15 o superior. También funciona en 1.0.0, pero tendrás que asignar algunos skins a mano, como en el punto 3.

Configuración del sitio recomendada

• Cambio a diseño responsivo: como este tema es responsivo, se recomienda desactivar la vista exclusiva para móviles. Desactiva la vista móvil en Configuración del sistema > Avanzado, o bien, sin usar config/config.user.inc.php, desactiva mobile.enabled. Si está activada, en móviles se mostrará en su lugar un layout móvil aparte.
• Desactivar los estilos de botón compatibles con XE: el estilo .btn de la época de XE en el CSS común del núcleo (height 24px !important) puede sobrescribir los botones del skin. Agrega la siguiente línea en config/config.user.inc.php y vacía los archivos de files/cache/assets para eliminarlo por completo.

define('DISABLE_XE_BTN_STYLES', true);

Encabezado

El encabezado tiene 3 niveles, de arriba abajo: barra de utilidades (inicio de sesión · enlaces de administración · idioma) → logo · búsqueda · Mi página · carrito · notificaciones → menú de categorías.

• Accesos directos de administración: cuando inicias sesión como administrador, en la barra de utilidades aparecen, además de Administración, los enlaces Gestión de la tienda (consola de comercio) y Configuración de pagos (configuración de zittme Pay). La barra de herramientas del cajón de menú móvil tiene los mismos enlaces. Los miembros normales no los ven.
• Megamenú de todas las categorías: muestra las categorías de primer nivel como encabezados de columna y las de segundo nivel como listas verticales. El número de columnas aumenta automáticamente según la cantidad de categorías de primer nivel (hasta 6: 3 columnas; hasta 8: 4 columnas; más: 5 columnas).
• Campana de notificaciones: aparece solo si el centro de notificaciones está instalado, hay al menos un tipo de notificación en uso y el dispositivo coincide con el destino de visualización (PC · móvil) de la configuración del centro de notificaciones. Al pulsar la campana se despliegan las notificaciones recientes y, si "Mostrar en el menú de miembro" está activado en el centro de notificaciones, se añade debajo el enlace Ver todas las notificaciones. El enlace lleva a la dirección del mid asignado en el módulo de miembros, si lo hay; si no, a la dirección de la acción de la lista de notificaciones.

Página principal integrada en el tema (Composición principal)

Es el área que dibuja directamente el layout cuando la portada del sitio tiene forma de página principal. Armas las secciones en orden con el campo repetible "Secciones de la página principal" de la pestaña Composición principal en Configuración del layout. Si no registras ninguna, se usa la composición predeterminada (categorías → oferta del día → campañas → recomendados → banner → ranking → novedades → banner → descuentos → publicaciones recientes).

Tipo de sección	Contenido	Origen (source)	Cantidad (count)
Mosaicos de categorías de la tienda	Mosaicos de acceso directo a las categorías de primer nivel	-	Número de mosaicos que se muestran
Oferta del día	Los productos con mayor porcentaje de descuento rotan uno por día, con cuenta regresiva hasta la medianoche	-	-
Tarjetas de campañas en curso	Campañas de comercio como tarjetas con imagen	-	Número de tarjetas
Productos recomendados / novedades / descuentos / populares	Cuadrícula de tarjetas de producto (con barra para agregar al carrito)	-	Número de productos
Ranking de popularidad en tiempo real	Posiciones 1 a N por compras → vistas	-	Número de posiciones
Franja de banner	Reutiliza una imagen del slider visual como banner intermedio	Número de la diapositiva (si lo dejas vacío, en orden)	-
Publicaciones recientes del tablero	Lista de publicaciones del tablero. Si escribes varios mid separados por comas, se colocan en varias columnas	mid del tablero (p. ej., notice,board)	Número de publicaciones

Si dejas vacío el título de una sección, se usa el título predeterminado de cada tipo.

Íconos de los mosaicos de categorías

Por defecto, los mosaicos de categorías muestran en grande la primera sílaba del nombre de la categoría. En idiomas donde la primera letra no basta para distinguir, como el inglés o el español, o si quieres usar íconos con imagen, usa el campo repetible Íconos de categoría en Configuración del layout > Composición principal.

Elemento	Descripción
Nombre de la categoría	Debe coincidir exactamente con el nombre de la categoría de la tienda (si el nombre es multilingüe, el que se muestra en el idioma actual)
Imagen del ícono	Si subes una imagen, la imagen tiene prioridad. Se recomienda PNG o SVG cuadrado
Emoji o texto	Emoji o una o dos letras que se muestran cuando no hay imagen

Las categorías no registradas siguen mostrando su primera sílaba.

Slider visual

Registra las diapositivas en la pestaña Primera pantalla de Configuración del layout (imagen de fondo · título · descripción · botón · alineación). Los controles (flechas + puntos) están agrupados en un solo bloque en la esquina inferior derecha, así que no tapan el texto ni siquiera en móviles.

Si no registras ninguna diapositiva, hereda automáticamente los banners del inicio de la tienda de comercio: con solo gestionar los banners de la tienda, el slider de la portada se llena también.

Pantallas de la tienda (skin de comercio)



El inicio de la tienda se compone de slider de banners · mosaicos de categorías · campañas · secciones de recomendados/novedades/descuentos. Los banners se registran en Consola de comercio > Configuración del frente.



En la parte superior de la pantalla de lista se colocan los chips de categorías de primer nivel, los chips de segundo nivel de la categoría actual, la búsqueda y el orden. En móviles, la fila de chips no se divide en varias líneas, sino que se muestra en una sola línea con deslizamiento horizontal.



El detalle del producto admite opciones normales, opciones adicionales y opciones combinadas (eje × eje). La pantalla de arriba es un ejemplo de opciones combinadas de 2 ejes: molienda × capacidad. Debajo del precio siguen, en un solo bloque, los beneficios de puntos, el costo de envío y la información de envío/frescura/cambios. Esos textos se gestionan en Configuración de comercio > Información de envío · cambios y devoluciones.

Campañas



Cuando creas una campaña en la consola de comercio, aparece automáticamente en las tarjetas de campañas del inicio de la tienda y de la página principal. Para el banner puedes elegir entre imagen, color sólido o degradado.

Si introduces directamente el periodo de visualización de la campaña (start_date / end_date) en la base de datos o con un script, debes guardarlo con 14 dígitos (YmdHis). Si lo guardas con 8 dígitos, la comparación de fechas siempre lo tratará como vencido y no se mostrará.

Skins de tablero

En Forma de lista de la configuración del skin de tablero puedes elegir un aspecto distinto para cada tablero.

Forma	Uso	Ejemplo
Lista	Tableros generales como avisos. Marco de tarjeta + filas con separadores	Pantalla de avisos abajo
Webzine	Comunidades con miniatura + resumen	Pantalla de tablero libre abajo
Tarjetas	Galería centrada en miniaturas	-
FAQ	Acordeón que despliega la respuesta al hacer clic en la pregunta	Pantalla de preguntas y respuestas abajo







Configuración obligatoria para webzine · tarjetas · FAQ

Para que aparezcan las miniaturas y los resúmenes se necesitan dos ajustes.

1. Incluir la columna 'Resumen' en la configuración de lista del tablero: si la configuración de lista no tiene summary, la consulta de la lista no trae el contenido y los resúmenes y respuestas de FAQ salen vacíos.
2. Poner el destino de miniaturas de la configuración de documentos en 'Incluir contenido' (content): con el valor predeterminado (solo archivos adjuntos) no se crean miniaturas a partir de las imágenes del contenido. Después de cambiar el ajuste, vacía los archivos de files/thumbnails para borrar la caché de fallos anterior (archivos de 0 bytes); así se vuelven a generar.

Miembros · mensajes privados · centro de notificaciones

El skin de miembros pone el inicio de sesión, el registro y Mi página en una sola tarjeta, y unifica en 46px la altura de campos, selectores y botones. Las pantallas de mensajes privados (comunicación) y del centro de notificaciones heredan tal cual el marco de Mi página del skin de miembros (perfil a la izquierda + contenido a la derecha) y se abren en el mismo lugar que el menú de miembro. La pantalla de mensajes del sistema (errores · avisos) está hecha para ser completa por sí misma, incluso fuera del layout.

Móvil



• En la parte inferior queda fija una barra de 5 pestañas: Inicio · Categorías · Búsqueda · Carrito · Mi página.
• La pestaña de categorías abre desde abajo una hoja inferior de categorías de la tienda (encabezados de primer nivel + chips de segundo nivel), y la de búsqueda, una hoja inferior de búsqueda en la tienda. En sitios sin tienda se abre en su lugar el cajón de menú.
• El cajón de menú se compone de botones de cuenta · chips de categorías · lista de menús · herramientas de modo oscuro/idioma. Para los administradores, se añaden en la barra de herramientas los enlaces de gestión de la tienda y configuración de pagos.

Pie de página

Se configura en la pestaña Pie de página de Configuración del layout. Si dejas vacío un elemento, ese bloque no se muestra.

Elemento	Descripción
Texto de presentación del sitio	Presentación de una línea debajo del logo
Teléfono / horario de atención al cliente	Bloque de atención al cliente a la izquierda. Si dejas vacío el teléfono, se oculta todo el bloque
Correo de contacto	Enlace de consulta por correo electrónico
Datos de la empresa y de contacto	Cada línea separada por un salto se muestra como un elemento
Direcciones de Instagram · Facebook · YouTube · blog	Solo las que escribas se muestran como íconos de redes sociales
Texto de aviso inferior	Pequeño texto de exención de responsabilidad o aviso encima del aviso de derechos de autor
Aviso de derechos de autor	Aviso al final de la página

Tipos de página y LNB

Para indicar el tipo de página, escribe m (principal) / sl (subpágina) / sf (ancho completo) en la clase del menú del mapa del sitio. La portada del sitio se trata como principal aunque no indiques una clase, y las pantallas de miembros, mensajes privados y pago pasan automáticamente a ancho completo. Las subpáginas de este tema funcionan sin LNB, con el contenido a todo el ancho.

Todos los elementos de la configuración del layout

Básico

Elemento	Valor predeterminado	Descripción
Imagen del logo / logo para modo oscuro	Ninguno	Referencia de 40px de alto. Si lo dejas vacío, se usa el texto del logo
Texto del logo	Ninguno	Si lo dejas vacío, el título del sitio
Color de acento	Verde de marca	Define a la vez botones · enlaces · indicadores de activo · color de énfasis de los skins
Ancho máximo del contenido	1180px	1060 / 1180 / 1320
Ancho · color de la barra de menú	Ancho del contenido · oscuro	Puedes elegir llenar todo el ancho, color de acento · claro
Posición de los botones de modo oscuro · idioma en móvil	Dentro del cajón de menú	Se pueden mover al encabezado · pie de página
Modo de color	Según el dispositivo	Automático / siempre claro / siempre oscuro

Primera pantalla

Condición para mostrar el slider visual · intervalo de avance automático · lista de diapositivas (campo repetible).

Composición principal

Dirección del módulo de tienda (mid) · íconos de categoría (campo repetible) · secciones de la página principal (campo repetible). Consulta "Página principal integrada en el tema" más arriba.

Contenido·barra lateral

Uso de la búsqueda integrada · (compatibilidad antigua) cuadro de inicio de sesión lateral.

Pie de página

Consulta la tabla de "Pie de página" más arriba.