Kingsbell es un tema Online Store 2.0 construido con Liquid, plantillas JSON, secciones, bloques, assets, ajustes, rutas y formularios nativos de Shopify. No depende de un framework frontend separado.
Directorios del runtime
assets/ CSS, JavaScript y assets del escaparate
blocks/ Bloques reutilizables
config/ Esquema y configuración global
layout/ Documentos base
locales/ Traducciones del escaparate y editor
sections/ Secciones configurables
snippets/ Unidades Liquid reutilizables
templates/ Plantillas JSON y LiquidLos prototipos de .design, documentos, scripts y contratos complementarios quedan fuera del runtime.
Capas de arquitectura
- Base — tokens, fuentes, estilos, metadatos, iconos y primitivas accesibles.
- Motor comercial — productos, variantes, formularios, carrito, filtros, búsqueda y precios.
- Sistema de plantillas — composiciones estándar y variantes editorial, archivo, comisión y privada.
- Sistema de contenido — blogs, artículos, galerías, citas, entrevistas, notas y tarjetas reutilizables.
- Límite complementario — presentación para miembros y especificación separada de autorización.
No dupliques lógica del carrito en secciones visuales ni trates una condición Liquid como autorización de servidor.
Dirección visual
La configuración predeterminada utiliza:
- Obsidian y Alabaster como base;
- acento champagne contenido;
- Playfair Display para titulares;
- Inter para interfaz y cuerpo;
- geometría nítida y bordes suaves;
- amplios espacios negativos;
- rejilla editorial de 12 columnas;
- fotografía de producto como elemento principal.
Roles de color
| Token | Valor predeterminado |
|---|---|
| Obsidian | #0A0A0A |
| Alabaster | #F9F8F6 |
| Paper | #FFFFFF |
| Graphite | #5F5E5E |
| Outline | #D8D5D2 |
| Champagne | #C5A059 |
| Error | #BA1A1A |
Los componentes deben usar roles semánticos de fondo, superficie, texto, borde, acento y error, no valores codificados.
Tipografía y diseño
Los ajustes globales controlan familias, escalas, interlineado, espaciado de letras, ancho de página, ancho de lectura, márgenes, gutter, espaciado de secciones y radio de esquinas.
El valor predeterminado es 1440px de ancho máximo, 780px de lectura, 32px de gutter y 120px entre secciones.
Mantén el orden semántico de títulos independientemente de su tamaño visual.
Bloques reutilizables
Kingsbell incluye bloques de título, texto, botón, imagen, estadística, tarjeta de recurso, espaciador y grupo. La sección Flexible content también admite bloques de aplicaciones.
Los grupos permiten un nivel anidado. Evita árboles más profundos porque dificultan el uso del editor.
Mejora progresiva
El contenido esencial debe seguir disponible sin JavaScript. Las pestañas se leen como paneles secuenciales, el progreso de lectura es opcional y los efectos respetan movimiento reducido.
Base de accesibilidad
La arquitectura incluye enlace de salto, foco visible, contenido principal enfocable, controles semánticos, soporte de movimiento reducido, manejo de alt y navegación por teclado.
Cada componente nuevo debe conservar orden de fuente, reflow, zoom, foco y estados comprensibles.
Ciclo del editor de temas
Shopify puede recargar secciones de forma independiente. El JavaScript debe admitir carga, descarga, selección de bloques y reinicialización sin listeners duplicados.
Límite de .design
.design es referencia visual, no código de producción. No enlaces assets desde allí, no importes su JavaScript y no antepongas un prototipo a los requisitos de Shopify, accesibilidad o configuración comercial.