Personalización y ajustes del tema

Kingsbell separa los ajustes globales de las decisiones locales de cada sección. Usa ajustes globales para mantener coherencia y el editor de secciones para contenido y composición específicos.

Marca

Configura logo principal, logo inverso, ancho de 80px a 320px y favicon. Prueba ambos logos sobre los fondos reales de las plantillas.

Colores

La paleta predeterminada incluye Obsidian, Alabaster, Paper, Graphite, Outline, Champagne, White y Error. Se asigna a roles semánticos de fondo, superficie, texto, borde, acento, botón y error.

Después de cambiar colores, revisa contraste, foco, errores de formulario, estados deshabilitados, precios de oferta, badges y overlays.

Tipografía

Los ajustes controlan fuentes de título y cuerpo, escalas, interlineado, tracking y mayúsculas en botones. Los valores iniciales son Playfair Display e Inter.

Prueba títulos largos y traducciones reales, especialmente en móvil.

Diseño y movimiento

Valores predeterminados importantes:

Mantén activado el respeto a prefers-reduced-motion.

Botones y formularios

Puedes cambiar altura, padding, borde, hover y mayúsculas de botones, además de inputs subrayados o en caja y ancho del anillo de foco.

No sacrifiques objetivos táctiles ni visibilidad de foco por estética.

Tarjetas de producto

Configura ratio vertical, cuadrado o adaptativo, alineación, hover, códigos de moneda y estilo de quick add. Los cambios afectan colecciones, búsqueda y recomendaciones.

Flexible content

La sección Flexible content admite bloques de título, texto, botón, imagen, estadística, recurso, espaciador, grupo y app blocks. Los grupos permiten un nivel anidado.

Es adecuada para landings, recursos, servicios, informes y páginas de miembros.

Secciones estructuradas

• Specification table para pares etiqueta-valor.
• Tabbed content con fallback secuencial sin JavaScript.
• Reusable card grid con bloques manuales o metaobjetos.

No ocultes información legal, de seguridad o envío únicamente dentro de pestañas.

Plantillas de página

page.flexible.json
page.specifications.json
page.content-library.json

Asigna la plantilla a una página y configura las secciones en el editor.

Fuentes dinámicas

Conecta ajustes a productos, colecciones, artículos, metafields o metaobjetos cuando Shopify lo permita. Define fallback, prueba datos ausentes y evita exponer metafields internos.

Orden seguro de personalización

1. Ajustes globales.
2. Ajustes de sección y bloque.
3. Composición JSON.
4. Snippets o bloques reutilizables.
5. Nuevas secciones.
6. CSS o JavaScript global solo cuando sea realmente global.

Después de cambios importantes, guarda, recarga, prueba recursos representativos, móvil, teclado, movimiento reducido, estados vacíos y todos los flujos comerciales.