Mandrel — Documentación

Tema de Shopify para tiendas de herramientas, ferretería y taller · Versión 1.1.0 · Autor: Lizardassets · English version

Estado. Mandrel 1.1.0 no se ha enviado a Shopify ni ha sido aprobado, y no está en la Shopify Theme Store. Todavía no se ha probado en una tienda Shopify real: todas las comprobaciones han sido locales.

Contenido

1. Introducción
2. Instalación y elección del estilo
3. Configuración global
4. Secciones y bloques
5. Plantillas
6. Funciones propias del tema
7. Preguntas frecuentes y solución de problemas
8. Soporte
9. Registro de cambios

Las etiquetas en negrita son los nombres que ves en el editor de temas en español. Los textos que ve el cliente se citan entre «comillas» como aparecen en la tienda en español; entre paréntesis, el texto en inglés. Los textos de ejemplo de las plantillas (por ejemplo «Families» o «Work order») son contenido escrito en inglés y se citan tal cual.

1. Introducción

Mandrel es un tema para tiendas que venden herramientas, recambios, ferretería y material de taller. En estas tiendas el cliente suele conocer una referencia, compara formatos y medidas y compra varios artículos a la vez. El tema está pensado para eso:

• Referencias. El SKU de la variante se muestra como referencia. El cliente puede copiarla con un clic. Las sugerencias de búsqueda encuentran productos por SKU o código de barras en todos los estilos y muestran sus existencias.
• Familias. Tus menús y colecciones funcionan como familias de producto. Varios estilos muestran cuántos productos hay en cada familia.
• Especificaciones y documentos. En la ficha puedes mostrar filas de especificación sacadas de metacampos para todo el catálogo, y añadir documentos, notas de uso y cuidado, guías de tamaños, información de entrega y composición para un producto, para variantes exactas o para todos los productos.
• Encontrar piezas. La sección Buscador de piezas convierte los filtros de una colección en una búsqueda guiada breve.
• Pedidos de varios artículos. Las secciones Mesa de pedido, Pedido rápido y Herramientas de compra ayudan a añadir varios formatos de una vez.

Mandrel tiene cinco estilos (también llamados presets): Mandrel, Joinery, Crimp, Gauge y Quench. No son simples cambios de color. Cada estilo tiene su propia cabecera, menú, tarjeta de producto, página de colección, ficha, vista rápida, carrito, búsqueda, página 404, página de contraseña y tarjeta regalo. La sección 2.7 los describe.

1.1 Los cinco estilos

Mandrel tiene cinco estilos (también llamados presets). Cada uno cambia cómo funciona la tienda, no solo sus colores (ver 2.7):

• Mandrel — el mostrador de referencias: búsqueda de referencias siempre visible, familias con recuentos y filas densas de producto con referencias copiables.
• Joinery — la lista de cortes: diseño editorial con tarjetas en retrato, menú en cortina por clic y una cesta en dos pasos.
• Crimp — el kit de trabajo: productos organizados por trabajo, «Añadir al kit» en cada tarjeta y una hoja del kit agrupada por trabajo.
• Gauge — el banco óptico: marcos cuadrados de museo con lupa, menú en esfera de instrumento y un escenario central en la ficha.
• Quench — la hoja de operación: cabecera negra, menú con colores de revenido y tarjetas a sangre con banda negra.

1.2 Lo que Mandrel no hace

• No inventa datos. Especificaciones, documentos y notas de compatibilidad solo aparecen si los escribes tú. Nada se calcula ni se deduce.
• No recoge reseñas. Las aporta una app de reseñas: el tema muestra en las tarjetas la valoración que publica (3.5), y en la ficha puedes poner el bloque propio de la app.
• No incluye plantillas de cuentas de cliente antiguas (ver 2.2).
• En las comparaciones no convierte unidades ni elige un «ganador».

2. Instalación y elección del estilo

2.1 Añadir el tema

1. En el administrador de Shopify, ve a Tienda online › Temas.
2. Añade el tema a tu biblioteca. Si lo recibiste como archivo ZIP, usa la opción de subida de la biblioteca de temas (Añadir tema › Subir archivo zip, o el texto que muestre tu administrador).
3. El tema se añade sin publicar. Tu tienda en vivo no cambia.

2.2 Vista previa, personalizar y publicar

• Vista previa te deja recorrer la tienda con Mandrel antes de publicarlo.
• Personalizar abre el editor de temas.
• Publicar convierte Mandrel en tu tema en vivo. Antes, revisa la página de inicio, un producto, una colección, la búsqueda y el carrito con tus propios productos.
• Duplica el tema antes de cambios grandes para poder volver atrás.
• Cuentas de cliente. Mandrel no tiene plantillas de cuentas de cliente antiguas. El enlace de cuenta de la cabecera usa las cuentas de cliente de Shopify. Si tu tienda aún usa las cuentas antiguas, consulta la ayuda de Shopify antes de publicar.

2.3 Elegir un estilo

Hay dos formas de elegir un estilo, y no hacen lo mismo.

1. Al añadir el tema (recomendado). Elige uno de los cinco estilos. Shopify instala entonces:

• los ajustes del estilo: identidad del tema, colores y esquemas de color, modo de color, fuentes y los demás ajustes de diseño;
• la página de inicio, la ficha de producto y la página de taller propias del estilo (secciones, orden y textos), y su grupo de cabecera con el texto de aviso del estilo;
• en Gauge, también su propia página de contraseña.

El resultado coincide con la demo de ese estilo, sin los productos, imágenes ni menús de la demo.

2. Después, en la configuración del tema. Configuración del tema › Identidad de marca › Identidad del tema cambia el diseño y el comportamiento de todas las superficies. La documentación de Shopify sobre estilos de tema (presets) indica que, al cambiar de estilo, solo se copian los ajustes de diseño (como colores, fuentes, casillas y selecciones); los ajustes de texto y de enlace no se copian y las plantillas no se sustituyen. Tu página de inicio, tu ficha y las demás plantillas se quedan como están. Para tener la disposición completa de otro estilo, añade el tema de nuevo y elige ese estilo al añadirlo.

La lista Identidad del tema muestra los cinco nombres de estilo: Mandrel, Joinery, Crimp, Gauge y Quench. Su texto de ayuda dice: «Define el diseño y el comportamiento de la cabecera, las tarjetas, las colecciones, la ficha, la vista rápida y el carrito: Mandrel, Joinery, Crimp, Gauge o Quench.»

Cambiar solo Identidad del tema cambia la disposición y el comportamiento de todas las superficies (cabecera, tarjetas, ficha, carrito, etc.). No cambia tus colores ni tus fuentes: edítalos en Colores y Tipografía.

2.4 Qué contiene la página de inicio de cada estilo

Cada estilo trae su propia página de inicio. No hay productos, colecciones ni imágenes preseleccionados: elige los tuyos en el editor, también la colección del Buscador de piezas (el editor muestra un aviso hasta que lo hagas).

Antes de añadir contenido. En una tienda nueva, todas las secciones de la portada del estilo se muestran igualmente, con el diseño propio del estilo, en modo claro y oscuro:

• las fotos que aún no has elegido muestran el dibujo de relleno propio del estilo, sobre un fondo que sigue el esquema de color de la sección;
• el Buscador de piezas muestra campos de ejemplo con la forma propia del estilo (desplegables desactivados en Mandrel, Joinery y Crimp, una escala graduada en blanco en Gauge, placas de revenido en blanco en Quench), una pista y un botón «Explorar el catálogo de productos» que funciona;
• la Mesa de pedido muestra filas de ejemplo;
• el Estudio de herramienta de Joinery muestra una herramienta de ejemplo;
• las tarjetas de producto y las teselas de colección conservan la disposición del estilo.

Sustitúyelos por tu contenido en el editor.

Los textos de ejemplo de estas páginas están en inglés. Cámbialos por los tuyos.

La página de inicio por defecto de los archivos del tema (la que se usa si subes el tema sin estilo) contiene Apertura técnica, Directorio de familias y Selección de productos.

Otras plantillas y textos que instala cada estilo

El orden de las secciones de la página de taller también cambia según el estilo. Los botones de pago acelerado están activados por defecto en la ficha y en el carrito. Gauge y Quench empiezan en modo oscuro; Crimp empieza con cabecera y pie oscuros.

2.5 Otras plantillas

Para usar la plantilla contact, editorial o workshop, crea una página en Tienda online › Páginas y elige la plantilla en su campo Plantilla del tema.

2.6 Primeros pasos

1. Configuración del tema › Identidad de marca: sube el Logotipo y el Icono del sitio y ajusta Ancho del logotipo.
2. Configuración del tema › Colores: revisa los esquemas de color y elige Modo de color (sección 3.3).
3. Menús: crea el menú principal y el del pie (sección 3.9). En el estilo Crimp, los trabajos salen de tu menú.
4. Productos: añade SKU a las variantes (serán las referencias), buenas imágenes con texto alternativo y los datos que quieras mostrar. Para las especificaciones, crea metacampos de producto y anótalos en Configuración del tema › Datos de producto (sección 6.6).
5. Página de inicio: elige las imágenes de las diapositivas y las colecciones y productos de cada sección.
6. Plantilla de producto: añade bloques de especificación, documento y cuidado para tus productos (sección 6.6).
7. App Search & Discovery: configura los filtros de colecciones y búsqueda (sección 6.3).
8. Carrito: decide si usas el panel del carrito, fija el Umbral de envío gratis y revisa el campo de descuento y las recomendaciones del carrito (Configuración del tema › Carrito). Decide si ofreces un producto de envoltorio para regalo (sección 3.14).
9. Idiomas: publica otros idiomas y traduce tu contenido (sección 3.18).

2.7 Los cinco estilos en detalle

Cada estilo cambia cómo funciona la tienda, no solo su aspecto. La tabla da una vista rápida; los apartados siguientes explican cada uno. Los textos entre «comillas» son los que ve el cliente en la tienda en español; entre paréntesis, el texto en inglés.

Acciones de tarjeta y Mostrar vista rápida. Varias acciones de las tarjetas dependen de Configuración del tema › Catálogo › Mostrar vista rápida. Si está desactivado:

• Los productos de una sola variante conservan su «Añadir» (Add) directo en las tarjetas de Mandrel y Joinery (y «Añadir al kit» en las de Crimp).
• Productos con opciones: «Opciones» (Options) de Mandrel, el «+» de Joinery y «Elegir opciones» (Choose options) de Crimp abren la ficha en lugar de la vista rápida.
• Las tarjetas de Gauge no tienen botón «Examinar» (Inspect) y las de Quench no tienen botón «Vista rápida» (Quick view).

Mandrel — el mostrador de referencias

Para catálogos de recambios y ferretería en los que se busca por referencia.

• Cabecera. Un campo de búsqueda siempre visible; el cliente pulsa «/» para ir a él. Cuenta y carrito se muestran como palabras con cifras.
• Riel de familias. Bajo la barra, un riel muestra los enlaces del menú principal con el número de productos de cada colección. Un enlace con subenlaces abre una rejilla de cajones de familias (hasta tres subenlaces por familia y después «Todo en …» (All in …)).
• Cabecera en el móvil. El campo de búsqueda se coloca abajo con un botón «Familias» (Families). Abre una hoja por niveles con botón «Volver» (Back).
• Tarjeta de producto. Una fila densa: miniatura cuadrada, título, referencia con botón de copiar, disponibilidad con punto y texto, precio y «En el carrito · n» (In cart · n) si el artículo ya está en el carrito. Hay una sola acción: «Añadir» (Add), «Opciones» (Options) o el texto de agotado.
• Datos de la tarjeta. Las especificaciones de tarjeta van una por línea y la valoración en su propia línea; un valor que no cabe termina en «…».
• Lista y densidad. En colecciones y búsqueda el cliente puede cambiar «Lista» / «Cuadrícula» (List / Grid) y «Densidad de filas» (Row density: «Cómoda» / «Compacta»). El navegador recuerda esa elección.
• Página de colección. Título con el número de productos, árbol de familias desde tu Menú de familias, árbol de filtros, barra de herramientas con orden, densidad y vista, una «línea de consulta» con los filtros aplicados y páginas numeradas.
• Ficha. Una ficha técnica: compra a la izquierda y galería a la derecha. Debajo, una hoja a ancho completo con índice fijo «Especificaciones · Documentos · Notas» (Specs · Documents · Notes). La tabla de especificaciones muestra también el peso y el código de barras de la variante cuando existen.
• Barra de la ficha. Una barra fija con referencia, precio y «Añadir» sigue disponible. La referencia cambia al cambiar de variante.
• Vista rápida. Un cajón a la derecha (hoja inferior en el móvil) con botones de producto anterior y siguiente para recorrer la lista sin cerrarlo.
• Carrito. En escritorio, un panel pequeño bajo «Carrito n» que no bloquea la página; en el móvil, una hoja inferior. La página del carrito es una tabla con resumen fijo. Ambos ofrecen «Copiar referencias» (Copy references).
• Tras añadir. Un aviso breve confirma el añadido en el mismo sitio, con un enlace «Ver carrito» (View cart). Con Usar panel del carrito activado, «Ver carrito» abre el panel a cualquier ancho de pantalla; desactivado, lleva a la página del carrito.
• 404. «Referencia no encontrada» (Reference not found): el campo de búsqueda aparece relleno con la última parte de la dirección y se listan tus familias.
• Fuentes por defecto: Saira (títulos y texto) y Azeret Mono (referencias).

Joinery — la lista de cortes

Para herramienta manual, carpintería y material artesanal con voz editorial.

• Cabecera. Marca a la izquierda, familias a la derecha, utilidades como palabras. Se oculta cuando el cliente baja y vuelve al subir, pero nunca con el foco dentro ni con un menú abierto.
• Menú en cortina. Un enlace padre abre por clic una cortina con subenlaces, una fotografía y tres productos. Si añades a la cabecera un bloque Promoción de navegación con imagen, esa imagen se usa en la cortina.
• Cabecera en pantallas pequeñas. Por debajo de 1024 px, un cajón izquierdo muestra enlaces grandes con serifa y teselas de imagen.
• Tarjeta de producto. Retrato 4:5 con esquinas suaves. Con Activar imagen alternativa en tarjetas, la segunda imagen aparece con una máscara de «cepillado» al pasar el ratón o con el foco.
• Botón de la tarjeta. Un «+» redondo en la esquina añade directamente un producto de una sola variante. En un producto con opciones abre la vista rápida, o la ficha si Mostrar vista rápida está desactivado.
• Página de colección. Título grande con el recuento y una barra horizontal de filtros. Cada filtro abre un pequeño desplegable con «Aplicar» (Apply) (hoja inferior en el móvil); el orden está en la misma barra. Los filtros aplicados se leen como una frase con palabras que se pueden quitar.
• Rejilla de la colección. La rejilla alterna filas 7/5 y 4/4/4. La última fila siempre se cierra a tamaño de tarjeta: una tarjeta sobrante se une a las anteriores en una fila de tres o cuatro, así que ninguna tarjeta suelta se estira a lo ancho. Un producto sin foto en un hueco ancho se acorta hasta la altura de una tarjeta normal.
• Notas de material. Si creas el metacampo de colección custom.material_notes (tipo: lista de texto de una línea) y lo rellenas, aparece un bloque «Notas de material» (Material notes) cada seis productos. Sin ese dato no se muestra nada.
• Ficha. Editorial: una columna vertical de imágenes (aprox. 60 %) junto a una columna de compra fija (aprox. 40 %). Después «Cómo se hace» (The making: tu descripción y bloques de texto).
• Despiece y cuidado. Un «Despiece» (Cut list) se construye con tus bloques Especificación asociada (solo si hay alguno). Uso y cuidado van en acordeones. En pantallas pequeñas, una barra de compra queda abajo.
• Vista rápida. Una hoja inferior que sube hasta el 72 % de la pantalla, con imágenes en una tira horizontal y la banda de compra debajo. Por debajo de 900 px la hoja es más alta (88 % de la pantalla, la pantalla entera en móviles bajos) y la tira de imágenes más baja, para que título, precio, opciones y el botón de añadir queden a la vista.
• Carrito («Cesta», Basket). Un cajón derecho en dos pasos. El paso 1, «Piezas» (Pieces), ya ofrece el pago y un botón «Añadir una nota» (Add a note). El paso 2, «Nota para el taller» (Note for the workshop), contiene la nota del pedido, descuentos y totales. La nota se guarda sola y avisa «Guardada» (Saved).
• Carrito sin nota en el panel. Si Mostrar nota del pedido en el panel está desactivado, el botón dice «Revisar totales» (Review totals) y el paso 2 pasa a ser «Resumen del pedido» (Order summary), sin campo de nota. El envoltorio para regalo solo se ofrece en la página del carrito. La página del carrito tiene dos columnas con la nota en lugar destacado.
• Búsqueda. Una superposición a pantalla completa con un campo grande con serifa, piezas en lista editorial y «Materiales» (Materials) como chips.
• Suscripción por correo. El ajuste Firma de la sección Suscripción por correo solo se muestra en este estilo.
• Fuentes por defecto: Cormorant (títulos), Alegreya Sans (texto), Anonymous Pro (referencias).

Crimp — el kit de trabajo

Para material eléctrico, de instalación y de oficios, organizado por trabajo.

• Trabajos. Los trabajos salen de un menú: Configuración del tema › Catálogo › Menú de trabajos de Crimp (por defecto main-menu). La cabecera, las tarjetas, las colecciones, la búsqueda, el pie, el carrito vacío y la ficha lo leen. Ver 5.3.
• Cómo se encuentran los trabajos. El tema usa los subenlaces del primer enlace de ese menú que tiene subenlaces (por ejemplo Tienda › Cortar, Pelar, Instalar, Medir). Si ningún enlace tiene subenlaces, usa los enlaces de primer nivel. Enlaza cada trabajo a una colección: el tema usa esas colecciones para etiquetar, agrupar y contar productos.
• Cabecera. Una barra con tu logotipo, el conmutador de trabajos (el activo queda resaltado), «Herramientas» (Tools), búsqueda con el atajo Ctrl K / ⌘K visible, cuenta y el «Kit» con su contador.
• Menú Herramientas. «Herramientas» abre un menú con pestañas verticales de trabajo y hasta seis herramientas por trabajo, cada una con «Añadir al kit» (Add to kit) u «Opciones» (Options). Los demás enlaces principales del menú de la cabecera también aparecen ahí (cuando los trabajos son los subenlaces de un enlace, o salen de otro menú).
• Menú Herramientas con el teclado. Tab desde «Herramientas» entra en el panel abierto, Mayús+Tab vuelve a él y Tab tras el último elemento cierra el panel.
• Cabecera en el móvil. Una barra fija inferior muestra cuatro trabajos y el Kit; «Menú» (Menu) abre un menú a pantalla completa.
• Nombres de trabajo largos. Los trabajos que no caben en la fila del conmutador se ocultan en ella (también para el teclado) y siguen disponibles en «Herramientas». En la barra inferior del móvil, y con un primer trabajo muy largo en la cabecera, los nombres terminan en «…»; los lectores de pantalla oyen el nombre completo.
• Tarjeta de producto. Tarjeta teñida con una esquina en ángulo, etiqueta de trabajo, imagen cuadrada, título condensado y precio. Con Activar imagen alternativa en tarjetas, la segunda imagen aparece al pasar el puntero o con el foco del teclado.
• Botón de la tarjeta. Un botón a todo el ancho. Un producto con una sola variante disponible tiene «Añadir al kit» (después dice «En el kit ×N», In kit ×N). Los productos con opciones tienen «Elegir opciones» (Choose options), que abre el producto en línea bajo la fila de tarjetas. Los agotados tienen «Ver herramienta» (View tool), que abre la ficha.
• Página de colección. El conmutador de trabajos como chips, un cajón «Filtros» (Filters), el orden como control segmentado (desde 768 px, cuatro opciones por fila, y las etiquetas largas saltan de línea dentro de su segmento), chips fijos para los filtros activos y productos agrupados por trabajo bajo encabezados fijos. Si el cliente elige un orden, la lista pasa a ser plana en ese orden.
• Trabajos con una sola herramienta. Un trabajo con una sola herramienta la muestra como una tarjeta horizontal ancha.
• Ficha. Galería deslizable con contador, chip de trabajo, opciones en losetas, botones de cantidad grandes y «Añadir al kit». Después «Se usa en» (Used for: los trabajos que contienen el producto) y «Completa el trabajo» (Complete the job: los productos complementarios de Shopify, con casillas «Incluir …» que se añaden juntas).
• Barra de compra en el móvil. Hay una barra de compra abajo; se oculta mientras el «Añadir al kit» del formulario está a la vista, así que nunca hay dos botones en pantalla.
• Trabajos en la ficha. Ficha de producto › Menú de familias tiene prioridad si eliges uno; si no, se usa el Menú de trabajos de Crimp.
• Carrito («Kit»). Desde 1024 px, tras el primer añadido aparece abajo una barra («Kit · 3 líneas · total · Revisar kit»). Abre una hoja del kit agrupada por trabajo, con la nota del pedido en un desplegable y el pago siempre visible. El kit no se abre solo al añadir; se actualiza el contador.
• Colección destacada. Mostrar el botón «Añadir todo» añade de una vez todos los productos visibles disponibles. Solo aparece en este estilo y solo si se pueden añadir al menos dos productos; las tarjetas regalo y los productos solo de suscripción quedan fuera.
• Fuentes por defecto: Bebas Neue (títulos), Rubik (texto), Roboto Mono (referencias).

Gauge — el banco óptico

Para instrumentos de medida, herramienta de precisión y productos que se examinan de cerca. Este estilo empieza en modo oscuro (Modo de color: Oscuro).

• Cabecera. Una barra fina con logotipo, menú, búsqueda, cuenta y «Carrito» con su contador.
• Cabecera transparente. Si la primera sección de una página es una Presentación de diapositivas, la cabecera empieza transparente sobre ella y pasa a ser una barra translúcida tras 24 px de desplazamiento. Desactívalo con Cabecera › Transparente sobre el primer pase de diapositivas. Este ajuste solo afecta al estilo Gauge.
• Menú en esfera de instrumento. Desde 1024 px, un botón junto a cada enlace padre (hasta seis en la barra) abre una esfera. Sus subenlaces (hasta diez) se colocan en un arco graduado; con más de siete la esfera crece y el arco se abre. Una aguja gira hacia el enlace que el cliente señala o enfoca, y la ventana de la esfera muestra la foto de esa colección.
• Lectura de la esfera. Junto a la esfera, una lectura muestra el número de productos, los subenlaces del enlace, «Ver …» (Browse …), hasta dos enlaces de Promoción de navegación (bloques de la cabecera con título y enlace) y un enlace al padre. Las flechas, Inicio y Fin giran la aguja; Tab entra en la lectura; Escape cierra la esfera.
• Cabecera en el móvil. «Menú» despliega una hoja con las entradas principales como pestañas (hasta tres).
• Tarjeta de producto. Un marco cuadrado con marcas en las esquinas. Con ratón, una lupa cuadrada sigue al puntero (hasta 2×, nunca por encima de la resolución real de la imagen). «Examinar» (Inspect, con Mostrar vista rápida activado, y siempre visible, también con ratón) abre una caja de luz con opciones, cantidad y «Añadir al carrito».
• Datos de la tarjeta. Bajo el marco: el nombre, el precio y un dato opcional. La tarjeta no tiene botón de añadir.
• Página de colección. Un título sobrio, una «barra de lente» («Afina tu selección», Refine your selection) con un desplegable por filtro, orden y recuento en vivo, y una rejilla de cuadrados que aparecen con un efecto de diafragma.
• Ficha. Un «escenario» central con pestañas de vista con nombre (tomado del texto alternativo), lupa y «Ampliar» (Enlarge) para ver a pantalla completa a 1×, 2× y 3× con gesto de pellizco.
• Columna de compra. Desde 1100 px, una columna estrecha de compra queda a la derecha durante toda la página, y las especificaciones y los documentos van bajo el escenario, a su lado (de 1100 a 1279 px en una columna, con la descripción primero; más ancho, en dos columnas).
• Banda de compra en pantallas menores. Por debajo de 1100 px, una banda abajo muestra el nombre, la opción elegida, el precio (oculto en pantallas muy estrechas) y «Añadir al carrito» (Add to cart). Se recoge mientras el botón de añadir del formulario está a la vista.
• Vista rápida. Una caja de luz con el producto en su escenario y una banda de compra debajo.
• Carrito. Una persiana que baja desde arriba (como máximo el 60 % de la altura, 90 % en el móvil). Se abre desde «Carrito» y tras añadir, y marca un momento la línea nueva.
• Zona fija en el móvil. En el móvil solo quedan fijos al pie de la persiana los totales y «Finalizar compra»; la nota y el campo de descuento se desplazan con las líneas.
• Pantallas bajas. En móviles con poca altura, la persiana ocupa la pantalla bajo la cabecera y las líneas se compactan, para que quepan más líneas y «Finalizar compra».
• Nota en la persiana. Si Mostrar nota del pedido en el panel está activado, la nota del pedido se pliega dentro del resumen (abierta si ya hay una nota). La página del carrito es una columna estrecha, como un recibo.
• Búsqueda. Un panel a la derecha. Si un producto tiene el metacampo custom.measuring_range, su valor aparece en las sugerencias.
• Productos relacionados. En la ficha, la sección Productos relacionados se carga sola cuando el cliente se acerca a ella y desaparece si Shopify no devuelve productos (por ejemplo, en una tarjeta regalo).
• Fuentes por defecto: DM Sans (títulos y texto), Geist Mono (referencias). La página de contraseña y la tarjeta regalo son siempre oscuras.

Quench — la hoja de operación

Para metalistería, fabricación y herramienta pesada. Este estilo empieza en modo oscuro (Modo de color: Oscuro).

• Cabecera. Una barra negra fija arriba mientras la marca se comprime. Desde 1200 px, hasta seis operaciones del menú aparecen en la barra como enlaces en minúscula de frase, cada uno con su color de revenido. Las que no caben en la fila se ocultan ahí y siguen en «Menú».
• Búsqueda. «Buscar» (Search) abre un campo dentro de la barra con hasta cuatro productos debajo. Se pliega en cuanto el foco sale del campo y de sus sugerencias; Escape la cierra y devuelve el foco a «Buscar».
• Menú en barra de revenido. Desde 1024 px, «Menú» abre un panel bajo la cabecera. Las ocho primeras operaciones forman los segmentos de una barra con los colores de revenido, de paja a azul (los seis colores se repiten a partir del sexto). Una aguja sigue al segmento que el cliente señala o enfoca.
• Nombres largos y operaciones de más. Los nombres largos saltan por palabras o terminan en «…»; el enlace conserva el nombre completo para los lectores de pantalla. Las operaciones de más aparecen bajo «Más operaciones» (More operations), junto a «Todas las operaciones» (All operations).
• Lectura de la etapa. Bajo la barra, la operación elegida muestra la foto de su colección teñida con su color, los enlaces que pusiste debajo en tu menú (con sus propios subenlaces) y «Abrir …» (Open …). Después, una fila con el resto del menú. Izquierda y Derecha recorren la barra, Abajo o Tab entran en la lectura y Escape cierra el menú.
• Menú en pantallas menores. Por debajo de 1024 px, «Menú» abre un cajón derecho con las operaciones como bandas de color apiladas. Cada banda es un enlace con el nombre y el número de productos; cuando la operación tiene subenlaces en tu menú, un botón de 44 px los despliega bajo la banda. El cajón muestra todas las operaciones, sin límite.
• Operaciones. Las operaciones son los subenlaces del primer enlace del menú que tiene subenlaces, o los enlaces de primer nivel. Aparecen como placas negras con foto, nombre y número de productos en el carrito vacío, la página 404, la búsqueda sin resultados y las colecciones vacías.
• Tarjeta de producto. Imagen 4:5 a sangre y una banda negra con título y precio. Con Activar imagen alternativa en tarjetas, la segunda imagen aparece al pasar el puntero o con el foco del teclado. Un botón «Vista rápida» (Quick view) de 44 px está en la banda.
• Datos de la tarjeta. Al pasar el ratón o con el foco, la banda sube y muestra el tipo de producto y el fabricante. El fabricante solo aparece si Mostrar fabricante está activado y el proveedor es distinto del nombre de la tienda. En pantallas táctiles los datos están siempre visibles.
• Página de colección. Una fotografía bajo una placa negra con el título, un cajón «Filtros» (Filters) a la izquierda, el orden en placas de cuatro columnas iguales, un selector de rejilla 2/4 (el navegador lo recuerda) y los filtros aplicados como placas negras.
• Ficha. Galería horizontal a todo el ancho, título grande, hoja de compra y especificaciones en bloques grandes. Una barra de operación fija (variante, precio, cantidad, «Añadir al carrito», Add to cart) aparece solo cuando los controles de compra principales no se ven.
• Vista rápida. Un cajón ancho a la izquierda.
• Carrito. Un panel a pantalla completa que sube desde abajo, con cifras de cantidad grandes, la nota del pedido y una banda de resumen. No se abre solo al añadir.
• Pie. Una banda pajiza de suscripción (o un enlace al catálogo si la suscripción está desactivada) y después un «registro de tratamiento»: una fila por cada menú del pie (Menú de navegación, Segundo menú, Tercer menú), con el título del menú a la izquierda y sus enlaces a lo largo de la fila. Los menús vacíos no aparecen.
• Nombre de la tienda en el pie. El nombre de la tienda ocupa todo el ancho en Arvo y se ajusta en tamaño, así que ninguna letra queda cortada. Los nombres largos saltan de línea entre palabras y los muy largos se hacen más pequeños.
• Fuentes por defecto: Arvo (títulos), Libre Franklin (texto), Source Code Pro (referencias).

3. Configuración global

Abre Configuración del tema (el icono de engranaje) en el editor.

3.1 Identidad de marca

3.2 Tipografía

Las tres usan el selector de fuentes de Shopify, así que puedes elegir cualquier fuente de su biblioteca. El tema no incluye archivos de fuente propios. La fuente de títulos, y la de texto cuando es distinta, se precargan para que el texto no cambie de línea al aparecer la página. Las fuentes se cambian en cuanto llegan. Para las familias de títulos y de texto que usan por defecto los cinco estilos (Saira, Cormorant, Alegreya Sans, Bebas Neue, Rubik, DM Sans, Arvo, Libre Franklin), el tema define además una fuente de sistema de reserva ajustada en tamaño, sea cual sea el estilo que las use, así que el texto apenas se mueve al llegar la fuente real. Las demás fuentes, y la fuente de referencias, usan las reservas normales.

3.3 Colores y modo oscuro

Esquemas de color. Cada esquema tiene ocho colores:

Cada estilo trae cinco esquemas. En todos los estilos, el esquema 5 es el oscuro. Puedes añadir, editar o borrar esquemas.

Modo de color

Gauge y Quench empiezan en Oscuro; los demás estilos en Seguir el dispositivo.

Qué esquema usa cada área

Varias secciones tienen además su propio ajuste Esquema de color (Presentación de diapositivas, Colección destacada, Lista de colecciones, Imagen con texto, Texto enriquecido, Suscripción por correo, Artículos del blog).

Consejo. En modo oscuro se usa un solo esquema en todo el sitio. Al editar colores, comprueba el contraste en los dos modos: texto sobre fondo, texto del botón sobre el botón y texto resaltado sobre el resaltado.

3.4 Catálogo

3.5 Datos de producto

Este grupo decide qué datos de producto aparecen en las tarjetas y en la ficha. Lee metacampos de Shopify; si un producto no tiene valor, no aparece nada.

3.6 Ajustes del carrito

3.7 Enlaces sociales

Enlace de Facebook, Enlace de X, Enlace a Instagram, Enlace de TikTok, Enlace de Pinterest y Enlace a YouTube. Los enlaces que rellenes aparecen en el pie.

3.8 Movimiento

3.9 Menús de cabecera y pie

Crea los menús en el administrador de Shopify (Contenido › Menús, o Tienda online › Navegación en administradores antiguos).

• Cabecera › Menú de navegación (por defecto main-menu) es el menú principal.
• Cabecera › Menú de cuenta del cliente (por defecto customer-account-main-menu) lo usa el enlace de cuenta cuando las cuentas de cliente están activas.
• Pie › Menú de navegación (por defecto footer), Segundo menú y Tercer menú. En Quench, cada uno de estos menús es una fila del «registro de tratamiento» del pie, con el nombre del menú como título (ver 2.7).
• Cabecera › Mostrar la búsqueda en la tienda muestra u oculta la búsqueda de la cabecera.

Los menús admiten tres niveles. Siempre que puedas, enlaza los elementos principales y las familias a colecciones: varios estilos solo muestran recuentos y fotos para enlaces a colecciones.

3.10 Cómo usa cada estilo el menú principal

3.11 Menú de familias en las colecciones

Resultados de colección › Menú de familias elige el menú que se muestra como familias en las páginas de colección (Mandrel lo muestra como árbol y usa main-menu si está vacío; Joinery lo muestra como lista de enlaces).

3.12 Bloques de promoción de navegación

La Cabecera admite hasta dos bloques Promoción de navegación (Título, Texto, Enlace, Imagen). El texto de ayuda del bloque en el editor explica dónde aparece. Solo los usan dos estilos:

• Gauge: el título y el texto aparecen como enlace en la lectura junto a cada esfera de instrumento (título y enlace obligatorios).
• Joinery: solo usa la imagen, como fotografía de sus paneles de menú (la cortina).

Los demás estilos no los muestran.

3.13 Secciones de cabecera y pie

Cabecera (grupo de cabecera): Menú de navegación, Menú de cuenta del cliente, Mostrar la búsqueda en la tienda, Transparente sobre el primer pase de diapositivas (solo Gauge), hasta dos bloques Promoción de navegación.

Aviso (grupo de cabecera): Texto, Enlace.

Pie (grupo de pie): Título, Texto, Menú de navegación, Segundo menú, Tercer menú, Mostrar Seguir en Shop (aparece cuando Shop Pay está activo), Mostrar suscripción, Mostrar selector de país, Mostrar selector de idioma, Mostrar enlaces a políticas. En el pie aparecen también los iconos de pago, los enlaces sociales y «Volver arriba» (Back to top) (ajuste del tema).

3.14 Panel del carrito por estilo

La última columna supone que Configuración del tema › Carrito › Mostrar nota del pedido en el panel está activado (por defecto). Desactívalo para ocultar la nota en el panel de todos los estilos; en Joinery, el paso 2 pasa a ser «Resumen del pedido» (Order summary).

Si Configuración del tema › Carrito › Usar panel del carrito está desactivado, o no hay JavaScript, el enlace del carrito lleva a la página del carrito.

3.15 Página del carrito

La sección Carrito tiene:

Todos los carritos usan el formulario de carrito de Shopify: cantidades, «Actualizar carrito» (Update cart) y «Finalizar compra» (Checkout) funcionan sin JavaScript. Con Configuración del tema › Carrito › Mostrar botones de pago acelerado activado (por defecto), los botones de pago exprés aparecen bajo «Finalizar compra» en la página y en el panel del carrito, si tu tienda tiene métodos exprés activados. Una cantidad de 0 quita la línea. Descuentos, precios unitarios, planes de venta y propiedades de línea se muestran tal como los da Shopify. Los códigos de descuento se pueden introducir en el carrito (ver 6.7) y en el pago.

3.16 La palabra del carrito

Cada estilo usa su propia palabra en los títulos y mensajes del carrito: «Carrito» (Cart: Mandrel, Gauge, Quench), «Cesta» (Basket: Joinery) y «Kit» (Crimp). El enlace del carrito de la cabecera usa la misma palabra. Puedes cambiar estos textos en Editar contenido predeterminado del tema (sección 3.18).

3.17 Búsqueda

• Sugerencias de búsqueda aparecen mientras el cliente escribe. Todos los estilos buscan en títulos, tipos, proveedores, nombres de variante, SKU y códigos de barras; Joinery y Crimp también en etiquetas. Los productos sugeridos muestran sus existencias («Disponible», «Solo quedan N» o «Agotado»).
• Pulsar Intro siempre abre la página completa de resultados, que funciona sin JavaScript. Las búsquedas muy largas saltan de línea en la página de resultados en lugar de ensancharla.
• Resultados de búsqueda tiene Productos por página y Activar carga del siguiente lote (sin efecto en Mandrel, ver 5.5). Los filtros de producto también aparecen en la búsqueda.
• Configuración del tema › Catálogo › Mostrar ámbito de búsqueda muestra la elección del tipo de resultado en las páginas de búsqueda de Mandrel, Joinery y Crimp (en Crimp dice «Todos los recursos / Herramientas / Guías», All resources / Tools / Guides) y en el formulario de búsqueda general. Las búsquedas de Gauge y Quench buscan siempre en todo el contenido.
• Mandrel resalta el texto coincidente y permite copiar una referencia desde una sugerencia. La paleta de Crimp puede añadir al kit un producto de una sola variante.

3.18 Idiomas y traducciones

• Mandrel incluye inglés (por defecto), español, francés, italiano y alemán, tanto para los textos de la tienda como para el editor de temas.
• El francés, el italiano y el alemán no los han revisado hablantes nativos en una tienda. Léelos antes de publicarlos.
• Para ofrecer un idioma, añádelo y publícalo en la configuración de idiomas de tu tienda. El selector de idioma del pie aparece cuando hay más de un idioma (Mostrar selector de idioma).
• Para cambiar textos del tema (por ejemplo «Cesta» o «Kit»), abre el menú de acciones del tema (…) › Editar contenido predeterminado del tema.
• Los textos que escribes en secciones y bloques son contenido de la tienda. Tradúcelos con la app Translate & Adapt de Shopify u otra app de traducción.
• Los valores de opción de los campos Opciones exactas de los bloques de datos deben coincidir con los valores publicados en cada idioma.
• Las etiquetas que escribes en Metacampos de especificación y en las Etiqueta de las especificaciones de tarjeta están en un solo idioma. Los valores de los metacampos se pueden traducir con una app de traducción.

4. Secciones y bloques

«Cabecera» y «pie» se refieren a los grupos de cabecera y pie. El grupo de cabecera admite Cabecera y Aviso; el de pie, Pie. Ninguna de las secciones de contenido de 4.1–4.3 (incluidas Suscripción por correo, Liquid personalizado y Apps) se puede añadir a esos grupos. Para un formulario de suscripción en el pie, usa Pie › Mostrar suscripción.

4.1 Página de inicio y secciones de contenido

Texto y contraste de la presentación. La presentación de diapositivas no tiene ajustes de velo, color de texto ni alineación. En todos los estilos el título y el texto van sobre un panel o una placa opacos, o junto a la foto o debajo de ella: Mandrel usa un panel sobre la foto en pantallas anchas; Joinery y Crimp ponen el texto en su propia columna; Gauge usa un panel casi opaco; Quench, una placa negra. Por eso el contraste no depende de la foto. Los colores del panel y del texto salen del Esquema de color de la presentación, salvo la placa de Quench, que siempre es negra con texto claro.

4.2 Secciones de pedido y taller

4.3 Secciones pensadas para un estilo

Estas secciones se pueden añadir en cualquier estilo, pero se diseñaron para uno:

5. Plantillas

5.1 Ficha: sección Ficha de producto

Ficha de producto es la sección principal de la plantilla de producto. Su ajuste Menú de familias lo usa el estilo Crimp para sustituir el menú de trabajos en la ficha (ver 6.8). Admite hasta 50 bloques:

Solicitar presupuesto y Dónde comprar no están en la plantilla por defecto. Añádelos para clientes profesionales; aparecen bajo los controles de compra en todos los estilos, y el SKU del presupuesto sigue a la variante elegida. Los precios nunca se ocultan tras un inicio de sesión.

5.2 Ficha: controles de compra

El formulario de compra es el formulario de producto de Shopify, así que funciona sin JavaScript. Admite:

• variantes y selectores de opción (muestras nativas si las configuras en Shopify);
• cantidad, con las reglas de cantidad de Shopify (mínimo, máximo, incremento) y precios por volumen;
• planes de venta (suscripciones) con su descripción;
• campos de destinatario de tarjetas regalo, plegados hasta que el cliente marca «Enviar a un destinatario» (Send to a recipient); sin JavaScript se ven siempre;
• disponibilidad de recogida;
• botones de pago acelerado (activados por defecto).

5.3 Ficha: medios

La galería admite imágenes, vídeos alojados en Shopify, vídeos de YouTube y Vimeo y modelos 3D (con «ver en tu espacio» donde Shopify lo permite). Vídeos y modelos 3D solo se cargan cuando el cliente los pide. Las imágenes se muestran completas, sin recortar.

Consejos:

• Escribe un texto alternativo para cada imagen. En Gauge, el texto alternativo da nombre a cada pestaña de vista (un texto que solo repite el título del producto se convierte en «Vista 1», «Vista 2»…).
• Usa la misma proporción para todas las fotos de un producto.
• Los títulos de producto con palabras muy largas saltan de línea dentro de la página en lugar de ensancharla.
• Miga de pan. La miga de pan se mantiene en una fila y acorta el elemento actual con «…» cuando falta espacio; por debajo de 360 px el elemento actual pasa a su propia fila.
• Títulos de producto largos. La ficha y la vista rápida muestran siempre el título completo. En el resto (tarjetas, líneas del carrito, recomendaciones del carrito, productos relacionados, sugerencias de búsqueda, barras de compra y miga de pan) un título largo se acorta a una o dos líneas terminadas en «…». El título completo sigue disponible para los lectores de pantalla y como texto emergente al pasar el puntero.
• La lupa y el zoom de Gauge nunca amplían por encima de la resolución real de la imagen, así que sube imágenes grandes (por ejemplo de 2000 px o más).

5.4 Ficha: otras secciones

• Productos relacionados: Título, Propósito de la recomendación (Productos relacionados o Productos complementarios, que se configuran en la app Search & Discovery) y Productos que se muestran (2–10, por defecto 6). Solo en plantillas de producto.
• Productos relacionados, carga. El título por defecto es «Productos relacionados» (Related products) o «Completa tu selección» (Complete your selection).
• Carga automática. En todos los estilos la sección se carga sola antes de que el cliente llegue a ella y desaparece si no hay nada que mostrar; mientras carga, unas tarjetas de relleno claras reservan su espacio para que la página no salte. En navegadores sin esa función, o sin JavaScript, el cliente pulsa un botón para cargarla. Productos vistos recientemente también reserva su espacio con rellenos mientras carga.
• Productos vistos recientemente: Título. Ya está en la plantilla de producto; ver Ofrecer historial opcional de productos (3.4).

5.5 Página de colección

5.6 Blog y artículos

• Blog: Mostrar fecha, Mostrar autor, Mostrar la búsqueda en la tienda. 12 artículos por página, con enlaces de etiquetas.
• Blog vacío. Un blog sin artículos muestra «Todavía no se han publicado artículos.» (No articles have been published yet.), una línea que dice que ahí aparecerán nuevas guías y notas, y un enlace de vuelta al catálogo, con el diseño propio de cada estilo.
• Artículo: Mostrar fecha, Mostrar autor. Etiquetas y comentarios cuando el blog los tiene activados (también comentarios moderados).
• Cada estilo presenta las entradas a su manera: Mandrel en filas densas, Joinery en rejilla editorial con un artículo principal grande, Crimp en tarjetas de guía con tiempo de lectura estimado, Gauge en rejilla de tres columnas y Quench con fotografías a todo el ancho y bandas negras.

5.7 Páginas y 404

Página no encontrada: Menú de navegación, Imagen de la página 404. Los cinco estilos la muestran en su propia composición, como foto decorativa. Si está vacía, Gauge usa la primera foto del catálogo y los demás estilos muestran la página sin foto. Formulario de contacto: Título, Texto, Mostrar el campo de teléfono, Pedir un mensaje obligatorio y hasta 8 bloques Campo personalizado (Etiqueta del campo, Nombre del campo en la notificación, Tipo de campo, Obligatorio, Opciones). Directorio de colecciones, Página, Resultados de búsqueda y Carrito se describen en otros apartados.

5.8 Página de contraseña

La sección Página de contraseña tiene Título, Mostrar registro por correo, Foto y Velo de la foto (0–80 %, por defecto 40 %; una capa negra para que el texto se lea bien). Solo dos estilos usan la foto: Gauge la muestra dentro de su visor y Quench la pone de fondo detrás de sus placas de acero. Mandrel, Joinery y Crimp mantienen su página lisa y la ignoran. La foto se oculta al imprimir la página. El mensaje sale de la configuración de la página de contraseña de tu tienda. La página siempre incluye el campo de contraseña para el personal. Cada estilo tiene su diseño: una hoja de especificaciones (Mandrel), una tablilla de madera (Joinery), pasos de trabajo numerados (Crimp), un visor oscuro (Gauge) y una placa de acero (Quench).

5.9 Página de tarjeta regalo

La página de tarjeta regalo no se edita en el editor de temas. Muestra el saldo, el código con botón de copiar, un código QR, la fecha de caducidad si existe y un enlace a Apple Wallet cuando Shopify lo ofrece. Cada estilo tiene su diseño (albarán, etiqueta de madera, ticket de trabajo, tarjeta negra mate, placa grabada).

6. Funciones propias del tema

6.1 Vista rápida

El cliente puede abrir un producto en una vista rápida desde su tarjeta, sin salir de la lista. Configuración del tema › Catálogo › Mostrar vista rápida la activa (activada por defecto); ver 2.7 para las acciones de tarjeta que dependen de ella.

La vista rápida muestra siempre el título completo del producto y usa el mismo formulario de compra que la ficha.

6.2 Comparador del cliente

El cliente puede elegir hasta cuatro productos y compararlos lado a lado. Actívalo o desactívalo en Configuración del tema › Datos de producto › Permitir que los clientes comparen productos (activado por defecto).

• Dónde aparece el botón. Un botón «Comparar» (Compare) en las tarjetas de producto de colecciones y resultados de búsqueda, y en la ficha. No aparece en las tarjetas de la portada ni en las tarjetas regalo.
• La bandeja. Los productos elegidos se reúnen en una pequeña bandeja con un contador («3 de 4»), un botón para quitar cada uno, «Vaciar» y «Comparar N». Con un solo producto la bandeja dice «Elige uno más para comparar».
• En la ficha. La bandeja es una pastilla de una línea con el contador y «Comparar N»; su chevrón abre la bandeja completa.
• Pastilla y barra de compra. En pantallas pequeñas la pastilla se aparta mientras se ve la barra de compra del estilo y vuelve cuando la barra se recoge; nunca se mueve mientras tiene el foco del teclado. Un quinto producto no se añade; se avisa al cliente de que quite uno antes. La selección se guarda en el navegador y sigue al cliente entre pestañas.
• La tabla. Muestra la imagen, el título completo, el precio, la disponibilidad, la valoración si una app de reseñas la aporta, la referencia, el fabricante, las opciones, las especificaciones de tarjeta y los Metacampos de especificación definidos en 3.5, y un botón de compra («Añadir», «Elegir opciones» o «Agotado»).
• Filas y valores. Las filas que ningún producto rellena no aparecen, y un valor que falta se lee «Sin dato» (Not listed). «Solo diferencias» (Only differences) oculta las filas en las que todos coinciden. Los productos se pueden quitar desde la propia tabla.
• Diseño de cada estilo. El botón, la bandeja y la tabla siguen al estilo:

• Sin JavaScript el botón y la bandeja se ocultan.
• ¿Comparador del cliente o Comparación curada? La sección Comparación curada (4.1) es una tabla fija que rellenas tú con hasta cuatro productos y tus propios atributos; funciona sin JavaScript. El comparador del cliente lo elige cada cliente y lee automáticamente los datos y metacampos del producto.

6.3 Filtros

Los filtros son los filtros de tienda de Shopify. Configúralos en la app Shopify Search & Discovery (disponibilidad, precio, tipo de producto, proveedor, opciones, metacampos…). Todos los estilos envían los filtros como un formulario normal, así que también funcionan sin JavaScript. Cada estilo los presenta a su manera:

Cuando un filtro de Search & Discovery muestra sus valores como imágenes, todos los estilos muestran esas imágenes en sus filtros (Gauge, como una miniatura enmarcada junto a cada valor).

6.4 Buscador de piezas

Buscador de piezas. El cliente elige unos pocos valores, por ejemplo tipo de producto y material, y pulsa «Ver N resultados» (Show N results) para abrir la colección ya filtrada.

1. Configura filtros de lista o de sí/no para la colección en la app Search & Discovery (por ejemplo tipo de producto, o un metacampo como specs.material).
2. Añade la sección Buscador de piezas y elige la Colección.
3. En Filtros que mostrar, anota los filtros que quieras, separados por comas y en orden, por etiqueta o por parámetro (por ejemplo product_type, specs.material). Déjalo vacío para usar los primeros filtros de lista o de sí/no, sin disponibilidad. Los rangos de precio no se ofrecen.
4. El buscador funciona como un formulario normal sin JavaScript. Con JavaScript, los recuentos se actualizan tras cada elección y los valores sin resultados se desactivan.

Cada estilo muestra los filtros a su manera, y todos funcionan sin JavaScript:

• Mandrel y Joinery: un desplegable por filtro (Mandrel como barra de consulta de referencias, Joinery como despiece con líneas guía).
• Crimp: pasos de trabajo numerados. Un filtro con hasta cinco valores cortos los muestra como chips; las listas más largas usan un desplegable.
• Gauge: cada filtro es una escala graduada con una aguja y una lectura grande del valor elegido; las flechas mueven la aguja. La escala solo muestra graduaciones enteras; cuando hay más valores hacia un lado, un fundido y una flecha en el borde lo indican. Los filtros con más de 40 valores usan un desplegable.
• Quench: cada filtro es una fila de placas de acero numeradas con el filo en la secuencia de colores de revenido; la placa elegida se colorea. Los filtros con más de 24 valores usan un desplegable.

Hasta que eliges una colección, o mientras la colección no tiene productos, la sección muestra campos de ejemplo («Tipo de producto», «Material», «Medida») con la forma propia del estilo, desactivados, la pista «Las opciones aparecerán aquí pronto. Mientras tanto, explora el catálogo completo.» y un botón «Explorar el catálogo de productos» (Browse the product catalog) que abre todos los productos, también sin JavaScript. El editor muestra además un aviso, y avisa si la colección no tiene filtros de lista o de sí/no. Ya viene colocada en la portada de cada estilo (2.4); también puedes añadirla a otras páginas.

6.5 Pedido rápido

• Pedido rápido: Título, Producto y Mostrar con todos los estilos. Muestra una tabla con todas las variantes de un producto y sus cantidades, y ya está en la plantilla de producto. Deja Producto vacío para usar el producto actual.
• Cuándo se oculta el pedido rápido. En la ficha se oculta en productos de una sola variante o con opciones de compra (planes de venta). Por defecto solo se muestra con los estilos Mandrel, Crimp y Quench; activa Mostrar con todos los estilos para Joinery y Gauge. El editor explica por qué está oculto.

6.6 Especificaciones, documentos y notas

Hay dos formas de mostrar especificaciones.

A. Tabla de especificaciones desde metacampos (la mejor para todo un catálogo)

1. En el administrador de Shopify, ve a Configuración › Datos personalizados › Productos y añade una definición de metacampo por especificación, por ejemplo Tamaño de cuadradillo con la clave specs.drive_size. Elige un tipo que encaje con el valor (texto de una línea, número, dimensión, peso…). Las unidades van con el valor.
2. Rellena el valor en cada producto. Si el valor cambia según la variante, crea también un metacampo de variante con la misma clave: el valor de la variante prevalece.
3. En Configuración del tema › Datos de producto › Metacampos de especificación, escribe una línea por fila: Tamaño de cuadradillo | specs.drive_size. La etiqueta antes de la barra es opcional.
4. Cada ficha que tenga valor muestra la fila. Las filas sin valor no aparecen.
5. Un metacampo que contiene una lista de metaobjetos imprime una fila por entrada, con los campos label (o name), value y, opcionalmente, unit de cada entrada.

Las etiquetas que escribes en el ajuste del tema están en un solo idioma; los valores de los metacampos se pueden traducir.

B. Bloques de datos (para un producto, variantes exactas o todos los productos)

1. Añade el bloque a la sección Ficha de producto.
2. En Se aplica al producto, elige un producto para limitar el bloque a él, o déjalo vacío para mostrar el bloque en todos los productos. Un bloque vacío es útil con una fuente dinámica: conecta Valor publicado, incluida la unidad a un metacampo.
3. Deja Alcance de variantes en Todas las variantes, o elige Opciones exactas y copia los valores de opción exactamente como están publicados (por ejemplo 10 mm).
4. Rellena el contenido.

Cada estilo los muestra a su manera:

• Mandrel: la hoja a ancho completo con índice «Especificaciones · Documentos · Notas» (Specs · Documents · Notes). Las especificaciones incluyen el peso y el código de barras de la variante cuando existen; las filas de metacampos se suman a la tabla.
• Joinery: las especificaciones forman el «Despiece» (Cut list); uso y cuidado van en acordeones.
• Gauge: especificaciones y documentos en dos columnas.
• Quench: especificaciones en bloques grandes.
• Crimp: las filas de metacampos aparecen como «Ficha del trabajo» (Job sheet); tus otros bloques aparecen como pasos numerados.

Las filas de metacampos usan la misma presentación que los bloques en cada estilo.

Tarjetas. Hasta dos valores de metacampo, la valoración y el estado de existencias pueden aparecer también en las tarjetas (sección 3.5). Para filtrar por especificación, añade esos mismos metacampos como filtros en la app Search & Discovery.

6.7 Envío gratis, códigos de descuento y recomendaciones del carrito

Indicador de envío gratis

1. En Configuración del tema › Carrito › Umbral de envío gratis, escribe el importe en la moneda de tu tienda, por ejemplo 75. Usa el mismo importe que tu tarifa de envío gratis en Configuración › Envío y entrega: el tema no lee tus tarifas de envío.
2. El panel y la página del carrito muestran cuánto falta («Añade … más para el envío gratis», Add … more for free shipping) y después «Tu pedido llega al envío gratis» (Your order reaches free shipping). El indicador compara el total del carrito, tras los descuentos, con tu importe.
3. Otras monedas: si el cliente paga en una moneda distinta de la de tu tienda, el indicador se oculta. El tema no tiene tipo de cambio, así que nunca muestra un importe convertido.
4. Deja el ajuste vacío para ocultar el indicador. También se oculta con el carrito vacío.

Cada estilo dibuja el indicador a su manera: una regla de referencia (Mandrel), un paso hacia «Entrega gratis» (Joinery), un indicador de kit con diez celdas (Crimp), una escala de lectura (Gauge) y una barra de temple (Quench). Los lectores de pantalla oyen el cambio tras cada actualización del carrito. Funciona sin JavaScript.

Códigos de descuento

• Con Mostrar campo de código de descuento activado, el panel y la página del carrito tienen un campo con «Aplicar» (Apply). Los códigos aplicados aparecen en una lista, cada uno con un botón para quitarlo.
• Shopify aplica los códigos en el carrito, así que el cliente aún puede cambiarlos en el pago. Si un código no se puede usar, el carrito lo indica.
• En Mandrel, la línea «Los códigos de descuento se aplican al pagar.» (Discount codes are applied at checkout.) solo aparece si el campo está desactivado.
• El campo queda plegado tras su etiqueta en Joinery (paso 2, «¿Tienes un código de descuento?»), en la hoja del kit de Crimp y en Gauge.

Recomendaciones en el panel del carrito

• Con Mostrar recomendaciones en el panel del carrito activado, el panel muestra hasta tres productos que combinan con el último artículo añadido: los complementarios de la app Search & Discovery, o los relacionados si no hay. Los productos que ya están en el carrito, los agotados y las tarjetas regalo no aparecen, y no se muestra nada si no queda ninguno.
• Un producto de una sola variante tiene «Añadir» (Add); uno con opciones tiene «Elegir» (Choose), que abre su ficha.
• Necesita JavaScript. El título sigue al estilo: «Encaja con esta referencia» (Mandrel), «Combina bien con» (Joinery), «Completa el kit» (Crimp), «Se mide junto a» (Gauge), «Siguiente operación» (Quench).

6.8 Configurar los trabajos de Crimp

1. Crea una colección para cada trabajo, por ejemplo «Cortar», «Pelar», «Instalar», «Medir».
2. En tu menú, crea un enlace de primer nivel (por ejemplo «Tienda») y pon debajo las colecciones de trabajo como subenlaces. Colócalo antes de cualquier otro enlace con subenlaces.
3. En Configuración del tema › Catálogo › Menú de trabajos de Crimp, elige ese menú (por defecto main-menu). La cabecera, el menú a pantalla completa, las tarjetas, las colecciones, la búsqueda, el pie, el carrito vacío y la ficha leen de él los trabajos.
4. La cabecera muestra en «Herramientas» los demás enlaces principales de Cabecera › Menú de navegación (cuando los trabajos son los subenlaces de un enlace, o salen de otro menú).
5. Los cuatro primeros trabajos aparecen en la barra inferior del móvil; hasta seis aparecen en el conmutador y en los chips.
6. Un producto muestra el primer trabajo (en el orden del menú) cuya colección lo contiene. Los productos que no están en ninguna colección de trabajo se agrupan en «Otros» (Other).
7. En la ficha («Se usa en», Used for), Ficha de producto › Menú de familias tiene prioridad si está elegido; déjalo vacío para usar el Menú de trabajos de Crimp.

6.9 Accesibilidad y movimiento

Mandrel no se ha auditado ni certificado según las WCAG ni ninguna otra norma. Esto es lo que hace el código:

Teclado y foco

• Un enlace «Ir al contenido» (Skip to content) es el primer elemento de cada página.
• Los controles son enlaces, botones, campos, desplegables y diálogos nativos, con contorno de foco visible.
• Menús, paneles de búsqueda, vistas rápidas y paneles del carrito se abren y cierran con el teclado; Escape cierra los diálogos.
• Mandrel: «/» lleva al campo de búsqueda; los cajones del menú se recorren con las flechas. Crimp: Ctrl K / ⌘K abre la paleta. Gauge: las flechas mueven entre las pestañas del menú. Quench: la tira de la galería se desplaza con las flechas.
• Los objetivos táctiles de los controles principales miden al menos 44 px.

Funciona sin JavaScript

• Compra, actualización del carrito (incluida la cantidad 0 para quitar una línea), filtros, orden, búsqueda y paginación usan formularios y enlaces normales.
• Sin JavaScript, los menús pasan a ser desplegables o enlaces simples, la búsqueda lleva a la página de búsqueda, el botón del carrito lleva a la página del carrito y Gauge lista todos los medios del producto en orden.

Avisos

• Añadir al carrito, las actualizaciones del carrito, los errores y las confirmaciones de copiado se anuncian a los lectores de pantalla, igual que el indicador de envío gratis y el resultado de los códigos de descuento.
• En el comparador del cliente, los botones «Comparar» indican si están activados, se anuncian las altas y bajas, la tabla tiene título y cabeceras de fila y de columna, la página se desplaza para que la bandeja nunca tape el elemento con foco, y Escape cierra la tabla y devuelve el foco a «Comparar N».
• Las valoraciones se leen como una frase («Valoración: 4,6 de 5. 38 reseñas»); el estado de existencias siempre lleva una palabra, nunca solo un color.

Movimiento

• Las animaciones mueven los elementos solo con desplazamiento, escala, fundido y recorte. Algunos estados al pasar el ratón o con el foco también funden colores, bordes o sombras.
• Si el dispositivo del visitante pide movimiento reducido, las animaciones se quitan o pasan a ser instantáneas, las listas aparecen de golpe, y las presentaciones nunca avanzan solas.
• Configuración del tema › Movimiento › Activar movimiento del preset desactiva las animaciones para todos.
• Las presentaciones y la galería editorial no avanzan solas salvo que lo actives; se detienen al pasar el ratón o con el foco.

Lo que debes hacer tú

• Añade texto alternativo a todas las imágenes de producto y de sección.
• Comprueba el contraste de color tras editar los esquemas, en modo claro y oscuro.
• Da un nombre a la presentación en Nombre de la presentación para lectores de pantalla.

6.10 Notas de rendimiento

No se publican puntuaciones de rendimiento para Mandrel. Cómo carga el tema:

• Las hojas de estilo propias de cada estilo solo se cargan cuando ese estilo está activo.
• Muchos scripts de estilo solo se cargan cuando el cliente va a usar una función.
• En Mandrel, un script inicial pequeño se carga en todas las páginas (junto al script común del tema); la búsqueda, los menús de familias, el panel del carrito, la vista rápida y la copia de referencias se cargan cuando el cliente pasa el puntero, enfoca o toca esos controles. La ficha, la colección, la búsqueda y la página del carrito cargan su propio script de Mandrel desde el principio.
• Las imágenes son adaptables. Las imágenes más abajo en la página se cargan en diferido. Las primeras imágenes de producto de una colección, la imagen principal de la ficha y la primera diapositiva se cargan primero, con prioridad alta.
• La segunda imagen de la tarjeta (la del puntero) no se descarga en pantallas táctiles, donde nunca se vería.
• Algunas hojas de estilo que no hacen falta para la primera pantalla se cargan después de que aparezca la página.
• El buscador de piezas, los extras del carrito (indicador, campo de descuento, recomendaciones) y el pedido rápido solo cargan sus scripts donde se usan. El comparador del cliente carga su script con la primera interacción con un botón «Comparar» (o al instante si hay una selección guardada), y el de la tabla solo cuando el cliente la abre.
• Vídeos, modelos 3D, la vista ampliada, las sugerencias de búsqueda y las recomendaciones solo se cargan cuando hacen falta. Las recomendaciones y los productos vistos recientemente reservan su espacio con rellenos claros, así que el contenido de debajo no se mueve.
• La fuente de títulos, y la de texto cuando es distinta, se precargan. Las fuentes se cambian al llegar, con reservas ajustadas en tamaño para las familias de títulos y de texto por defecto.

Buenas costumbres:

• Comprime las fotos antes de subirlas y evita texto dentro de las imágenes.
• Usa una Imagen para móvil en las diapositivas cuando la imagen de escritorio sea muy ancha.
• Quita las secciones que no uses y revisa las apps instaladas.
• Mide tu propia tienda con tu contenido (por ejemplo con Lighthouse en Chrome).

7. Preguntas frecuentes y solución de problemas

¿Por qué no aparece la referencia en mi producto? La referencia es el SKU de la variante. Añade un SKU a la variante en el administrador de Shopify.

He añadido un bloque de especificación y no se ve nada. Comprueba que Se aplica al producto está vacío (todos los productos) o indica este producto. Con Opciones exactas, los valores de opción deben coincidir exactamente con los publicados. Un bloque conectado a un metacampo no muestra nada en los productos donde ese metacampo está vacío.

¿Puedo usar Crimp sin trabajos? Sí. Si ningún enlace del menú tiene subenlaces, los enlaces de primer nivel funcionan como trabajos. Los productos fuera de las colecciones de trabajo van a «Otros» (Other).

La cabecera de Gauge es transparente y no lo quiero. Desactiva Cabecera › Transparente sobre el primer pase de diapositivas, o coloca otra sección encima de la presentación.

El carrito no se abre al añadir en Mandrel, Crimp o Quench. Es así a propósito: estos estilos confirman el añadido en el mismo sitio, y Crimp además actualiza el contador del kit. Con Usar panel del carrito activado, el enlace del carrito (y «Ver carrito» de Mandrel) abre el panel a cualquier ancho de pantalla. Joinery y Gauge abren el panel tras cada añadido.

¿Qué nombre tiene cada estilo en Identidad del tema? La lista muestra los nombres públicos: Mandrel, Joinery, Crimp, Gauge y Quench (ver 2.3).

¿Puedo añadir una sección Suscripción por correo al pie? No. Usa Pie › Mostrar suscripción (ver 4).

¿Dónde configuro los filtros? En la app Shopify Search & Discovery (6.3).

¿El tema muestra reseñas o valoraciones? No por sí mismo. Las recoge una app de reseñas; el tema muestra en las tarjetas las estrellas que la app publica en los metacampos reviews.rating (Mostrar valoración del producto), y puedes añadir el bloque de la app en la ficha.

¿Puedo vender envoltorio para regalo? Sí. Crea un producto para ello y elígelo en Carrito › Producto de envoltorio para regalo. Aparece en la página del carrito.

Mi portada parece vacía o muestra dibujos en lugar de fotos. Es el estado previo a añadir contenido. Cada estilo conserva todas sus secciones de portada y muestra sus propios rellenos, filas de ejemplo y campos de ejemplo hasta que eliges imágenes, productos y colecciones en el editor (sección 2.4).

¿Por qué no aparece el indicador de envío gratis? Comprueba que Umbral de envío gratis tiene un importe, que el carrito no está vacío y que el cliente paga en la moneda de tu tienda. En otras monedas el indicador se oculta.

¿Cómo muestro especificaciones en todos los productos? Crea metacampos de producto y anótalos en Configuración del tema › Datos de producto › Metacampos de especificación (sección 6.6).

¿El escáner de códigos de barras funciona en todos los dispositivos? No. El escaneo con cámara necesita que el navegador lo admita. El cliente siempre puede escribir la referencia.

8. Soporte

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

• Cómo pedir ayuda: usa la página de soporte enlazada en la información del tema (Configuración del tema › Información del tema). Ahí también está enlazada la documentación.
• Sobre qué preguntar: los ajustes, secciones, plantillas y funciones descritos en esta guía.
• Fuera de esta guía: los cambios en el código del tema y las apps de terceros.
• Antes de cambiar código, duplica el tema para poder volver atrás.
• Autor: Lizardassets. Versión: 1.1.0.

9. Registro de cambios

1.1.0

Primera versión preparada para la Shopify Theme Store. Todavía no se ha enviado a Shopify ni se ha probado en una tienda Shopify real (NOT_RUN). Desarrollada y comprobada en local. Incluye:

• Cinco estilos (Mandrel, Joinery, Crimp, Gauge, Quench), cada uno con su cabecera, menús, tarjetas, colección, ficha, vista rápida, carrito, búsqueda, 404, página de contraseña y tarjeta regalo, y cada uno instala su propia portada, ficha y página de taller.
• Esquemas de color con modo oscuro y selectores de fuentes de Shopify.
• Datos de producto desde metacampos: tablas de especificaciones, especificaciones en tarjetas, valoraciones de apps de reseñas y estado de existencias.
• Buscador de piezas, comparador del cliente, pedido rápido, mesa de pedido y herramientas de compra.
• Extras del carrito: indicador de envío gratis, códigos de descuento, recomendaciones en el panel del carrito y botones de pago acelerado.
• Bloques profesionales «Solicitar presupuesto» y «Dónde comprar».
• Rellenos con el diseño de cada estilo para una tienda todavía sin contenido.
• Teclado, movimiento reducido y funcionamiento sin JavaScript, y carga de scripts bajo demanda.
• Inglés, español, francés, italiano y alemán.