Meniscus — Documentación

Versión 1.0.0 · Autor: Lizardassets · Documentación: https://lizardassets.com/pages/meniscus-docs · Soporte: https://lizardassets.com/pages/soporte

Estado. La validación en una tienda Shopify real está en NOT_RUN. Las comprobaciones hechas hasta ahora se realizaron en una simulación local. Este texto no afirma que Shopify haya revisado o aprobado el tema.

1. Introducción

Meniscus es un tema de Shopify para tiendas de belleza y cuidado personal. Incluye cinco presets. Cada uno es un diseño completo, con su propia cabecera, menús, tarjeta de producto, página de colección, ficha de producto, vista rápida, carrito, búsqueda y pie; no son variaciones de color de una misma estructura.

En el editor el carrito se llama «carrito»; los compradores ven «tu bolsa» en la tienda. Este documento dice «carrito» para los ajustes del editor y «bolsa» para lo que ve el comprador.

Antes de editar el código del tema, duplícalo (Tienda online > Temas > … > Duplicar). Las personalizaciones de código no están cubiertas por el soporte.

2. Instalación y elección del preset

1. En tu administrador de Shopify, ve a Tienda online > Temas.
2. Añade Meniscus desde la Shopify Theme Store y elige un preset: Meniscus, Pigment, Strand, Lather o Bristle.
3. Haz clic en Personalizar.

El preset define las fuentes iniciales, seis esquemas de color, la página de inicio y la estructura. El modo oscuro empieza en «Seguir el dispositivo», con el interruptor visible en la cabecera. Puedes cambiar el diseño después en Ajustes del tema > Presentación > Presentación; eso cambia la estructura y el comportamiento de todas las páginas, pero no tus fuentes, colores ni secciones de inicio. Para el punto de partida completo de un preset, añade el tema de nuevo con ese preset.

Lista de comprobación tras instalar

• Menús: elige el menú principal en Cabecera (por defecto main-menu) y el del pie en Pie (por defecto footer). Se admiten hasta tres niveles. En Strand, crea el menú principal con un enlace por fase del día de lavado.
• Enlaces de colección: abre una colección en el editor, selecciona la sección Colección y elige una colección en cada bloque Enlace editorial de colección (hasta cuatro). Una instalación nueva trae tres bloques vacíos; la fila no se dibuja hasta que uno tenga colección.
• Inicio: Hero, Secuencia de productos, Producto destacado, Colección destacada, Editorial y Glosario llegan sin productos ni colecciones. Vídeo, Comparación, Testimonios y Preguntas frecuentes llegan sin medios ni citas. Rellénalos o elimínalos.
• Barra de anuncios: sustituye el ejemplo «Welcome to our store» o quita la barra.
• Elecciones por preset: Meniscus usa Colección de mañana y Colección de noche (Navegación) y Colección de la rutina (sección Producto). Strand usa Colección de lavado, de acondicionado y de peinado (Producto y carrito) y Orden del día de lavado. Pigment y Lather usan Producto del menú (Navegación).
• Datos de producto: las funciones propias leen metacampos de producto y muestras de opción (apartado 6).
• Página de contraseña: su mensaje sale de Tienda online > Preferencias > Página de contraseña.

3. Configuración global

Abre Personalizar > Ajustes del tema.

Presentación

• Presentación: el diseño (cinco presets).
• Mostrar animaciones: desactívalo para quitar todo movimiento. La preferencia de movimiento reducido del visitante siempre se respeta.
• Abrir el carrito al añadir.
• Columnas de colección: 1–4 en pantallas grandes.
• Favicon, Mostrar pies de imagen.
• Mostrar valoración del producto: muestra valoraciones en tarjetas, ficha, vista rápida y recomendaciones. Solo lee valoraciones guardadas por una app de reseñas y no muestra nada si no hay.

Colores y esquemas. Cada esquema tiene Fondo, Fondo de tarjeta o alterno, Texto, Texto secundario, Acento y enlaces, Botón, Etiqueta del botón, Borde del botón secundario, Bordes y divisores, Insignia, Etiqueta de insignia, Precio de oferta, Error, Éxito, Anillo de foco y Sombra. Cada preset incluye seis esquemas, que puedes editar y ampliar. Mantén al menos 4,5:1 de contraste en el texto. Se asigna un esquema a cada zona: Página, Cabecera y menús, Pie, Tarjetas de producto, Insignias de oferta, Botones principales, Carrito, Vista rápida y Sugerencias de búsqueda. La mayoría de secciones tienen además su propio esquema de color.

Modo oscuro

• Modo de color: Claro, Oscuro o Seguir el dispositivo.
• Mostrar el interruptor de modo oscuro en la cabecera: disponible con «Seguir el dispositivo»; activado en los cinco presets, desactivado por defecto en el tema.
• Página oscura, Cabecera y menús oscuros, Pie oscuro, Tarjetas de producto oscuras, Carrito oscuro, Diálogos oscuros: el esquema de cada zona en modo oscuro.
• La elección del visitante se guarda en el almacenamiento local con la clave ritual-theme, solo con «Seguir el dispositivo» y el interruptor activado. Las imágenes de producto nunca se invierten.

Tipografía: fuente de titulares, de texto y de especificaciones (usada sobre todo por Bristle).

Todos los presets empiezan con IBM Plex Mono como fuente de especificaciones. Las fuentes se muestran con una sustituta mientras cargan; con una familia distinta de las iniciales, los titulares pueden moverse un poco en una primera visita lenta.

Cabecera y menú: la cabecera incluye logotipo, menú, búsqueda, botón de cuenta (si hay cuentas de cliente), carrito y el interruptor de modo oscuro si está activado. Producto del menú (Navegación) destaca un producto dentro de los menús: Meniscus muestra su dosis, Pigment sus tonos y Lather su recambio. Los menús se cierran con Escape.

Pie: explicación, menú, Seguir en Shop (requiere Shop Pay), iconos de pago, un bloque de suscripción por email y selectores de país e idioma si vendes en varios mercados o idiomas.

Carrito (Producto y carrito):

• Mostrar botones de pago dinámico en la vista rápida.
• Objetivo de envío gratis: un importe en la moneda de tu tienda; 0 lo oculta. Es solo informativo: no crea una tarifa de envío, así que iguálalo a tu tarifa real en Configuración > Envíos y entrega.
• Mostrar combinaciones de producto en el carrito: activado por defecto; sugiere productos para el último añadido.
• Carriles de Strand: colecciones de Lavar, Acondicionar y Peinar.

Búsqueda: las sugerencias predictivas funcionan con teclado y muestran un mensaje si no hay coincidencias. La sección Búsqueda tiene Resultados por página (8–48) y Vista de resultados por defecto (Cuadrícula o Filas de especificaciones).

Almacenamiento del navegador. Meniscus no establece cookies propias. Guarda ritual-theme (almacenamiento local, ver arriba) y ritual:last-added (almacenamiento de sesión, el ID del último producto añadido, solo con las combinaciones activadas). Si usas un banner de cookies, comprueba cómo clasifican estos valores tus normas locales.

4. Secciones y bloques

• Barra de anuncios: hasta seis bloques de Texto y Enlace, esquema de color. Los mensajes nunca rotan solos.
• Cabecera: logotipo, menú.
• Pie: explicación, menú, Seguir en Shop, iconos de pago, bloque de suscripción.
• Hero: imagen con punto focal, sobretítulo, titular y nivel de encabezado, texto, dos botones, producto estrella, hasta seis enlaces rápidos, esquema de color.
• Secuencia de productos: titular, texto, enlace; hasta 12 bloques Producto (producto, grupo, nota breve); cada preset dibuja su propia disposición.
• Producto destacado: producto y bloques (título, marca, precio, selector de variante, cantidad, botones de compra, descripción, Liquid personalizado, bloques de app); admite imágenes, vídeo, YouTube o Vimeo y modelos 3D.
• Colección destacada: titular, colección, 2–12 productos.
• Editorial: titular, explicación, imagen, enlace; hasta 8 bloques Nota editorial (texto, nota desplegable o imagen y texto).
• Glosario: titular; hasta 12 bloques Entrada (término, explicación, enlace).
• Vídeo: imagen de portada, vídeo subido o URL de YouTube/Vimeo, reproducción (Reproducir al seleccionar, o Bucle silencioso mientras es visible), archivo de subtítulos .vtt, descripción del vídeo. Nunca reproduce sonido por sí solo.
• Comparación: deslizador de dos imágenes con control por teclado, posición inicial 10–90 %, pie de imagen, hasta 4 bloques Dato. Usa solo tus propias fotos sin retocar, tomadas con consentimiento, e indica cómo y cuándo se tomaron.
• Testimonios: hasta 8 bloques (cita, nombre, detalle, valoración 0–5, producto). Añade solo citas reales.
• Preguntas frecuentes: hasta 16 bloques Pregunta, datos estructurados FAQ opcionales (desactivados por defecto; actívalos en una sola sección FAQ por página).
• Suscripción por email: titular, explicación, etiqueta del botón; los suscriptores aparecen en Clientes.
• Liquid personalizado: código y esquema de color (fuera del soporte).
• Recomendaciones de producto: Relacionados o Complementarios (los complementarios requieren la app Search & Discovery), titular, 2–8 productos.

5. Plantillas

• Producto: la sección Producto con los bloques Título, Marca, Precio, Selector de variante, Cantidad, Botones de compra, Descripción, Función del estilo, Cómo usar, Ingredientes, Instrucciones del producto, Liquid personalizado y bloques de app. Admite también campos de destinatario en tarjetas regalo, planes de venta, disponibilidad de recogida y mensaje de Shop Pay Installments donde esté disponible. Función del estilo, Cómo usar e Ingredientes permanecen ocultos si el producto no tiene datos.
• Colección: Productos por página (4–48, por defecto 24), orden y filtros (se configuran en Search & Discovery), insignias, precios «Desde», precios unitarios, paginación y estado vacío. Meniscus puede mostrar un filtro como escala de gotas; Lather tiene un mosaico de pausa opcional en la séptima posición.
• Blog y Artículo: el blog muestra imagen destacada y etiquetas (las etiquetas filtran el blog); los artículos muestran comentarios si están activados.
• Páginas: Página, Contacto (page.contact, formulario de contacto de Shopify), Lista de colecciones, Contraseña (mensaje desde Tienda online > Preferencias), Tarjeta regalo (valor, saldo, código con botón de copiar, caducidad, código QR, Apple Wallet si está disponible, imprimir), Búsqueda y Búsqueda en filas (search.rows).
• 404: enlaces sugeridos (hasta seis, por defecto main-menu), campo de búsqueda y el producto de tonos de Pigment.

6. Funciones propias

Vista rápida. Se abre desde la tarjeta de producto con selector de variante, cantidad, Añadir a la bolsa y pago dinámico opcional. Cada preset tiene la suya: Meniscus se abre desde la derecha con la textura primero y un botón «Siguiente paso»; Pigment repinta el campo de color al cambiar el tono; Strand es una hoja lateral con producto anterior y siguiente; Bristle tiene un botón «Ficha» y una regla. Se cierra con Escape y devuelve el foco a quien la abrió.

Filtros. El orden y los filtros de las páginas de colección y búsqueda vienen de la app Search & Discovery.

Barra de compra fija. En los cinco presets. Muestra el producto (o el tono elegido), la variante, el precio y un botón Añadir. Aparece en todos los dispositivos tras hacer scroll, cuando los controles de compra de la página quedan fuera de vista, y se oculta sin JavaScript. No tiene ajustes.

Rutina de Meniscus. «Dosis y aplicación», pasos de aplicación, ingredientes con buscador, «En tu rutina» (paso anterior y siguiente, desde Colección de la rutina) y una bolsa agrupada por paso de rutina.

Tocador de Pigment. «Compara dos tonos» y el escenario teñido necesitan una opción con al menos dos valores con muestra. La bolsa «Tu paleta» muestra cada línea como una banda de su color de tono.

Carriles de Strand. La bolsa ordena las líneas en carriles Lavar, Acondicionar y Peinar según las tres colecciones que elijas; el resto va a «Otros». «Día de lavado» muestra los productos de custom.phase_pairs, ordenados por Tipo de producto.

Recambio de Lather. La ficha muestra una tarjeta de Recambio con «Añadir recambio» (desde custom.refill) y la bolsa tiene un hueco de recambio. El recambio solo se añade cuando el comprador lo elige.

Escuadra de Bristle. La bolsa «Tu juego» ordena las piezas de la más larga a la más corta, con un indicador frente a la pieza más larga. Los largos se leen de custom.format, luego custom.materials y luego las opciones de la variante (números seguidos de «cm» o «mm»; decimales con punto). Las piezas sin largo legible van al final, marcadas «Sin longitud». La búsqueda puede mostrar cuadrícula o filas de especificaciones.

Envío gratis. Muestra cuánto falta y «Envío gratis conseguido». Otras monedas de mercado se convierten con el tipo de cambio de Shopify y se redondean al alza; si el tipo no está disponible, el objetivo se oculta. Se oculta si la bolsa está vacía o no tiene nada que enviar.

Venta cruzada (combinaciones). Hasta tres sugerencias en la bolsa (cuatro en /cart, dos en el cajón de Bristle) a partir de las recomendaciones de Shopify para el último producto añadido. Nada se añade automáticamente. Cada preset tiene su lógica: «Lo siguiente en tu rutina», «Completa tu paleta», «La siguiente fase», «Para el baño», «Completa el juego».

Valoraciones. Se leen de reviews.rating y reviews.rating_count. Meniscus no recoge ni modera reseñas; instala una app de reseñas que escriba esos metacampos.

Metacampos de producto (espacio de nombres custom, todos opcionales; créalos en Configuración > Datos personalizados > Productos):

El tema nunca deduce tipo de piel, de cabello ni resultados; solo muestra lo que escribes.

7. Preguntas frecuentes y solución de problemas

Una función no aparece. La mayoría de funciones propias se ocultan si faltan sus datos. En el editor, una nota indica qué metacampo rellenar (apartado 6).

Falta la fila de enlaces de colección. Elige una colección en al menos un bloque Enlace editorial de colección.

No aparecen las valoraciones. Comprueba que tu app de reseñas escribe reviews.rating y que Mostrar valoración del producto está activado.

No salen los productos complementarios. Necesitan la app Shopify Search & Discovery; los relacionados funcionan solos.

Faltan los filtros. Configúralos en Search & Discovery.

El objetivo de envío gratis no coincide con el pago. El objetivo es informativo. Fija el mismo mínimo en Configuración > Envíos y entrega. Si tu tarifa cuenta los importes de otra forma (por ejemplo con impuestos), las cifras pueden diferir.

El carrito de Bristle muestra «Sin longitud». Escribe el largo en custom.format o custom.materials, por ejemplo «18 cm».

Falta el interruptor de modo oscuro. Pon el Modo de color en «Seguir el dispositivo» y activa Mostrar el interruptor de modo oscuro en la cabecera. Sin JavaScript el interruptor no se muestra.

Los vídeos no se reproducen solos. Es intencionado: nunca reproducen sonido por sí solos. Un bucle silencioso requiere la opción de reproducción Bucle silencioso y solo vale para vídeos subidos.

Idiomas. Se incluyen inglés y español. Edita los textos en Editar contenido predeterminado del tema o usa Translate & Adapt.

Aún sin probar: una tienda Shopify real (pago, pago dinámico, Installments, Seguir en Shop, recogida, mercados, instalación desde la Theme Store), un lector de pantalla real, Lighthouse en tienda real, Safari, zoom al 200 %, envío gratis frente a tarifas reales, subtítulos desde el CDN de Shopify, reproducción de YouTube y Vimeo, y los datos de valoración en datos estructurados. Las valoraciones y citas de ejemplo de la demo local son inventadas.

8. Soporte

Respondemos en un plazo de 24 horas. El soporte se mantiene mientras el tema esté a la venta.

• Página de soporte: https://lizardassets.com/pages/soporte
• Documentación: https://lizardassets.com/pages/meniscus-docs

Qué cubre el soporte: corrección de errores en cualquiera de los cinco presets, preguntas sobre ajustes, secciones, bloques, esquemas de color, modo oscuro y datos de producto, y orientación sobre las funciones de Shopify que el tema admite.

Qué no cubre: personalizaciones y código del tema modificado, Liquid personalizado, apps de terceros y sus conflictos, configuración de la tienda ajena al tema (pagos, envíos, impuestos, dominios, carga de datos), temas no obtenidos en la Shopify Theme Store, recogida y moderación de reseñas y tus tarifas de envío. Para trabajos a medida, considera un Shopify Partner.

Al escribirnos, incluye: tu nombre y email, URL de la tienda, tema y preset, versión del tema (opcional), una descripción de lo que esperabas, lo que ocurrió y en qué página, y capturas o grabaciones. Si necesitamos ver tu tienda, te pediremos una solicitud de colaborador. Nunca te pediremos tu contraseña. Antes de escribir, revisa esta documentación, usa la última versión y prueba en un duplicado con las apps desactivadas.

9. Registro de cambios

1.0.0

• Cinco presets completos: Meniscus, Pigment, Strand, Lather y Bristle.
• Esquemas de color con 16 roles, un esquema por zona, modos Claro, Oscuro o Seguir el dispositivo e interruptor opcional de modo oscuro en la cabecera.
• Selectores de fuente para titulares, texto y especificaciones.
• Ficha de producto, producto destacado, vista rápida propia de cada preset, barra de compra fija, cajón del carrito y página /cart (que funciona sin JavaScript).
• Objetivo de envío gratis, combinaciones de producto en la bolsa, valoraciones nativas, recomendaciones relacionadas y complementarias, filtros, orden, paginación y búsqueda predictiva.
• Secciones: Hero, Secuencia de productos, Producto destacado, Colección destacada, Editorial, Glosario, Vídeo, Comparación, Testimonios, Preguntas frecuentes, Suscripción por email, Barra de anuncios y Liquid personalizado.
• Plantillas de blog, artículo, contacto, página, lista de colecciones, 404, contraseña y tarjeta regalo.
• Navegación por teclado, foco visible, respeto al movimiento reducido y un ajuste para desactivar las animaciones.
• Inglés y español.
• Validación en tienda real: NOT_RUN.