Tema Streetlab (tienda de moda)

Este es el manual de Streetlab (streetlab), el tema oficial de Zittme para tiendas en línea de moda y marcas de streetwear. Tiene un tono monocromo resuelto con un solo negro tinta sobre fondo blanco puro, y en su portada, con pestañas de ranking y franja de marcas, las fotos de los productos son las protagonistas. Usa la misma estructura que el tema Sinsunhan (página principal integrada en el tema, secciones armadas con campos repetibles), así que para lo que no esté aquí consulta también el documento del Tema Sinsunhan (tienda en línea).

Demo: fashiondemo.zitt.me

Componentes

El color de acento se cambia en Configuración del layout > Básico y se aplica en todas las pantallas. El valor predeterminado es negro tinta.

Instalación y aplicación

1. Instálalo desde la tienda o descomprímelo en themes/streetlab.
2. En Administración > Configuración de diseño, elige Streetlab y aplícalo. El layout y los skins de los módulos cambian de una sola vez.
3. Si tienes el módulo de comercio, 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.16 o superior. Como es un tema responsivo, se recomienda desactivar la vista exclusiva para móviles.

Convención para nombres de producto: la línea de marca

Este tema no guarda la marca de cada producto por separado. En su lugar, si escribes el nombre del producto con la forma Marca / Nombre del producto, separa lo que va antes de la barra como marca y lo muestra pequeño en la línea superior, y lo que va después lo muestra en grande como nombre del producto.

• Ejemplo: si registras el producto con el nombre BLACKLINE / Lambswool Crewneck, en las tarjetas de lista · el detalle · el carrito · las líneas de pedido aparece BLACKLINE como línea de marca y Lambswool Crewneck como nombre del producto.
• El separador es una sola barra con espacios a ambos lados ( / ). Si no hay barra, solo aparece el nombre del producto, sin línea de marca.
• La "Información adicional" de la gestión de productos no tiene relación con esta línea de marca. La información adicional es un elemento aparte que aparece como tabla debajo del resumen en la página de detalle.
• En la búsqueda · el orden · el formulario de pedido se usa el nombre completo del producto (Marca / Nombre del producto) tal cual.

Encabezado

Se compone de logo · menú superior · búsqueda · Mi página · carrito · campana de notificaciones. El color (oscuro · acento · claro) y el ancho (ancho del contenido · 100%) de la barra de menú se eligen en la configuración del layout. En móviles se pliega en un menú de cajón, y puedes definir por separado la posición del botón de modo oscuro y del selector de idioma (dentro del cajón · encabezado · pie de página).

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

El layout la dibuja directamente cuando la portada del sitio tiene forma de página principal. Se arma en orden con el campo repetible "Secciones de la página principal" de la pestaña Composición principal en Configuración del layout y, si no hay ninguna, se usa la composición predeterminada (categorías → ranking → novedades → franja de marcas → banner → campañas → recomendados → oferta del día → banner → descuentos → publicaciones recientes).

Tipo de sección	Contenido	Origen (source)	Cantidad (count)
Mosaicos de categorías de la tienda	Accesos directos a las categorías de primer nivel. Los íconos, en el campo repetible "Íconos de categoría"	-	Número de mosaicos
Productos recomendados / novedades / descuentos / populares	Cuadrícula de tarjetas de producto. Las tarjetas muestran línea de marca · porcentaje de descuento · precio original	-	Número de productos
Oferta del día	Los productos con mayor porcentaje de descuento rotan uno por día	-	-
Tarjetas de campañas en curso	Campañas de comercio como tarjetas con imagen	-	Número de tarjetas
Ranking de popularidad en tiempo real (pestañas de categoría)	Lista de posiciones que cambia al pulsar las pestañas de categoría	-	Número de posiciones
Franja de marcas	Las marcas registradas en el campo repetible "Marcas", en una sola línea. Si hay imagen de logo, el logo; si no, el nombre	-	Número de marcas
Franja de banner	Reutiliza una imagen del slider visual como banner intermedio	Número de la diapositiva	-
Publicaciones recientes del tablero	Lista de publicaciones del tablero. Si escribes varios mid separados por comas, en varias columnas	mid del tablero (p. ej., notice,board)	Número de publicaciones

Franja de marcas

Registra el nombre de la marca · la imagen del logo · la dirección del enlace en el campo repetible Marcas de Configuración del layout > Composición principal. La sección de franja de marcas de la portada lee esta lista. Como no está conectada con la línea de marca del nombre del producto, conviene escribir directamente en la dirección del enlace la lista de productos de esa marca (resultados de búsqueda, etc.).

El bloque "About the platform" de la portada de la demo

El bloque negro de presentación de la parte inferior de la portada del sitio de demostración (título grande + 4 cifras) no es una sección del tema, sino un widget HTML puesto a mano en la página de portada del sitio de demostración. Las cifras también se escribieron a mano. Para usar el mismo bloque, pon el siguiente marcado como widget HTML en la portada (página de widgets) y los estilos en el script de encabezado de la configuración del layout (o en el HTML de encabezado adicional de la configuración del dominio).

<section class="sl-editorial">
  <div class="sl-editorial-copy">
    <span class="sl-eyebrow">About the platform</span>
    <h2>Built for<br />brands that<br />move fast</h2>
    <p>소개 문장</p>
  </div>
  <div class="sl-editorial-list">
    <div><strong>12</strong><span>Brands</span></div>
    <div><strong>24</strong><span>Products</span></div>
    <div><strong>6</strong><span>Categories</span></div>
    <div><strong>3</strong><span>Campaigns</span></div>
  </div>
</section>

<style>
.sl-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin: 0; background: #000; color: #fff; }
.sl-editorial-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(36px, 5vw, 76px); }
.sl-editorial-copy .sl-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.sl-editorial-copy h2 { margin: 0; font-family: var(--hr-display, inherit); font-size: clamp(32px, 4.4vw, 68px); font-weight: 400; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.sl-editorial-copy p { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.6); }
.sl-editorial-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.sl-editorial-list div { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 190px; padding: 24px; background: #000; }
.sl-editorial-list strong { font-family: var(--hr-display, inherit); font-size: 34px; font-weight: 400; line-height: 1; color: #fff; }
.sl-editorial-list span { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .sl-editorial { grid-template-columns: minmax(0,1fr); } .sl-editorial-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); } }
</style>

Pantallas de la tienda (skin de comercio)

• Lista: pestañas de categoría · búsqueda · orden (orden de exhibición · más recientes · populares · precio). Las tarjetas muestran insignias de recomendado · NEW, línea de marca, porcentaje de descuento y precio original.
• Detalle: línea de marca · nombre del producto · resumen · precio · beneficios de puntos · costo de envío · selección de opciones · comprar ahora · agregar al carrito. La "Información adicional" de la gestión de productos aparece como tabla debajo del resumen.
• Campañas: dibuja las campañas de comercio (?v=promo&p=slug) con banner · texto de presentación · cuadrícula de productos.
• Carrito · pedido · pago · Mis compras: el mismo flujo que el tema Sinsunhan; el pago continúa con el skin de zittme Pay.

Pie de página

En Configuración del layout > Pie de página completas el texto de presentación del sitio, teléfono · horario · correo de atención al cliente, direcciones de redes sociales (Instagram · Facebook · YouTube · blog), el texto de aviso inferior, los datos de la empresa · de contacto y el aviso de derechos de autor. Los datos legales, como el número de registro de ventas por comunicación, se escriben en "Datos de la empresa · de contacto".

Todos los elementos de la configuración del layout

Básico

Imagen del logo · logo para modo oscuro · texto del logo · color de acento · ancho máximo del contenido (1060 · 1180 · 1320) · ancho de la barra de menú · color de la barra de menú · posición del botón de modo oscuro en móvil · posición del selector de idioma en móvil · modo de color (según el dispositivo · siempre claro · siempre oscuro)

Primera pantalla

Mostrar el slider visual (solo en la principal · también en subpáginas · no usar) · intervalo de avance automático · diapositivas visuales (imagen de fondo · título · descripción · nombre del botón · enlace del botón)

Composición principal

Íconos de categoría · marcas · dirección del módulo de tienda (mid) · secciones de la página principal (tipo · título · origen · cantidad)

Contenido · barra lateral

Usar la búsqueda integrada · mostrar el cuadro de inicio de sesión en la barra lateral

Pie de página

Texto de presentación del sitio · teléfono de atención al cliente · horario · correo de contacto · 4 direcciones de redes sociales · texto de aviso inferior · datos de la empresa · de contacto · aviso de derechos de autor