Manifest: guía de configuración para comerciantes

1. Primeros pasos#

Instalación#

1. En el panel de Shopify ve a Tienda online > Temas.
2. Añade Manifest desde la Theme Store (o sube el ZIP del tema) y pulsa Personalizar.
3. Abre los Ajustes del tema (el icono del pincel) en el editor.

Elegir un preset#

Si instalas desde la Theme Store, obtienes la disposición de la página de inicio del preset que elijas. Si cambias de preset más adelante en el editor, solo cambian los ajustes del tema (fuentes, colores, estilo de cuadrícula, esquinas, vista por defecto). No se reordenan las secciones ni cambia tu contenido. Elige el preset primero y afina después, porque sustituye los valores de tus Ajustes del tema.

Antes de montar las páginas#

Manifest funciona mejor cuando la tienda está bien organizada. Reserva tiempo para estos pasos.

1. Menús (Contenido > Menús). Crea:
   • main-menu: los departamentos. Los elementos de primer nivel son los departamentos. Sus submenús se convierten en las teselas con imagen del menú de departamentos y sus enlaces de tercer nivel aparecen bajo cada tesela. Enlaza colecciones para que las teselas puedan usar las imágenes de colección. El mismo menú alimenta el panel del menú móvil y, por defecto, el árbol de colecciones.
   • Un menú de utilidades (opcional): enlaces pequeños en la barra superior, por ejemplo Ayuda, Envíos, Devoluciones.
   • Un menú de ámbito de búsqueda (opcional): las opciones del selector de departamentos de la barra de búsqueda. Enlaza colecciones, o un proveedor o un tipo de producto para limitar los resultados.
   • Un menú de búsquedas populares (opcional): enlaces que se muestran cuando el campo de búsqueda está enfocado y vacío.
   • footer y customer-account-main-menu.
2. Colecciones. Crea una colección por departamento y categoría, y añade una imagen a cada una. Las imágenes alimentan las miniaturas de departamento, las teselas y los atajos.
3. Páginas. Crea dos páginas (Tienda online > Páginas):
   • Pedido rápido: elige la plantilla de tema page.quick-order.
   • Comparar: usa el título «Compare», comprueba que el identificador sea compare (si el panel de Shopify no está en inglés, fíjalo a mano) y elige la plantilla de tema page.compare. La barra de comparación y el enlace de la cabecera apuntan a /pages/compare.
4. Search & Discovery (app gratuita de Shopify): define los filtros que se muestran en las colecciones y la búsqueda (disponibilidad, precio, marca, tipo de producto, opciones) y los productos complementarios para «Se compran juntos con frecuencia».
5. Definiciones de metacampos (Configuración > Datos personalizados > Productos), si quieres las secciones de la página de producto: custom.specs (JSON), custom.price_breaks (JSON) y custom.downloads (lista de archivos). Consulta Metacampos más abajo.
6. Inventario. Activa el seguimiento de inventario en tus variantes para que se muestren las unidades en stock. Los productos sin seguimiento de inventario muestran «En stock» sin número.
7. Precios para profesionales (opcional). Las reglas de cantidad y los precios por volumen salen de los catálogos B2B de Shopify. Manifest los muestra; no los crea. La disponibilidad de B2B depende de tu plan de Shopify, así que revisa tu plan.
8. Añade países en Configuración > Mercados e idiomas en Configuración > Idiomas para los selectores.

2. Ajustes del tema#

Todo lo de esta sección está en Ajustes del tema. El grupo Manifest es propio de este tema.

Manifest#

Fichas de producto y cuadrículas

• Estilo de la cuadrícula: con líneas (las celdas comparten una línea fina, sin huecos) o con espacio (un pequeño hueco, teselas con borde).
• Mostrar unidades en stock en las fichas: el número junto al estado del stock, en los productos que controlan inventario.
• Umbral de stock bajo (de 2 a 50, por defecto 10): los productos con este número de unidades o menos se muestran como stock bajo.
• Mostrar el SKU en las fichas.
• Mostrar la fecha de entrega en las fichas y Plazo de entrega en las fichas (de 1 a 14 días laborables). La fecha es una estimación a partir de este número; ajústalo a tus plazos de envío reales.

Colecciones

• Vista por defecto: cuadrícula, lista o tabla. Los clientes pueden cambiar de vista y se recuerda su elección.

Comparar

• Activar la comparación de productos: añade una casilla de comparar a las fichas y una barra de comparación.
• Productos a comparar a la vez: de 2 a 5.

Cabecera

• Cabecera compacta al hacer scroll: reduce la cabecera a una sola fila (logotipo, buscador y carrito) cuando se desplaza la página.

Grupo Cabecera#

Manifest tiene su propia cabecera, así que los ajustes del tema no tienen grupo Cabecera. El comportamiento fijo se controla con el ajuste Mantener la cabecera visible al desplazarse de la sección de cabecera; las barras de herramientas fijas de las páginas de colección y búsqueda lo siguen.

Logotipo, colores, tipografía, diseño#

• Logotipo y Favicon como en los demás temas. El ancho del logotipo de Manifest es de 140 px en escritorio por defecto.
• Colores: cinco esquemas de color con funciones fijas. 1 la página, 2 una superficie alternativa pálida, 3 el esquema oscuro (pinta la cabecera y el pie de página), 4 la banda de acción, 5 la superficie más profunda. Mostrar el color de acento en elige botones, etiquetas o ambos. En Manifest el acento es el color de acción (botones, enlaces, estados seleccionados). Los colores de stock (en stock, stock bajo, agotado) son los mismos en todos los presets para que los clientes lean el stock de un vistazo; el color de oferta sigue el color de la etiqueta de oferta de cada preset.
• Tipografía: fuentes de los títulos y del cuerpo, tamaño, grosor. Manifest define su propia escala de títulos compacta.
• Diseño: ancho de la página, margen, espacio entre elementos de la cuadrícula y Espacio entre secciones (reducido en todos los presets). Radio de las esquinas: el radio de las tarjetas fija un radio pequeño para la mayoría de los controles, con un máximo de 8 px.

Tarjetas de producto, carrito, búsqueda#

• Tarjetas de producto: proporción y ajuste de la imagen (usa «contain» para productos fotografiados sobre fondo blanco), segunda imagen al pasar el cursor, proveedor, valoración (necesita una app de reseñas), muestras de color, compra rápida, etiquetas.
• Carrito: panel o página, nota del pedido, recomendaciones, Mostrar barra de progreso de envío gratuito y su importe mínimo, Producto de envoltorio de regalo. La barra de envío gratuito está activada en los cuatro presets.
• Comportamiento de la búsqueda: sugerencias activadas o desactivadas, proveedor y precio en las sugerencias, y el Menú de búsquedas populares y la Colección destacada para la ventana de búsqueda vacía.
• Animaciones: desactivadas por defecto en Manifest (sin aparición al desplazarse, sin efecto al pasar el cursor).

3. Cabecera, búsqueda y menú de departamentos#

Sección: Cabecera.

Menús

• Menú de departamentos (por defecto main-menu), Menú de enlaces rápidos (enlaces junto a «Todos los departamentos»; si está vacío, muestra los primeros departamentos), Menú de utilidades, Menú de ámbito de búsqueda, Menú de búsquedas populares (si está vacío, usa Ajustes del tema > Comportamiento de la búsqueda).

Barra superior

• Mostrar barra superior, Texto de ayuda y Enlace de ayuda, Teléfono, Enlace de seguimiento de pedido, selectores de país e idioma.

Búsqueda

• Mostrar el selector de ámbito: el selector de departamentos a la izquierda del campo.
• Mostrar búsqueda por voz: un botón de micrófono, solo en los navegadores compatibles.

Cuenta y carrito

• Mostrar cuenta, Menú de la cuenta (los enlaces de la hoja de la cuenta; predeterminado customer-account-main-menu), Mostrar el subtotal del carrito, Enlace de pedido rápido (usa /pages/quick-order), Enlace de la página de comparación (usa /pages/compare). Si un enlace está vacío, se oculta su icono.

Barra de departamentos

• Mostrar barra de departamentos, Mostrar miniaturas en la lista de departamentos, Mostrar imágenes en las teselas de subcategorías.
• Texto del enlace destacado, Enlace destacado y Etiqueta del enlace destacado: un enlace opcional a la derecha, como «Ofertas», con una etiqueta como «Hasta un 30 % de descuento».

Desplazamiento y aspecto

• Mantener la cabecera visible al desplazarse. Reducir a una fila está en Ajustes del tema > Manifest.
• Esquemas de color de la cabecera, la barra superior, la barra de departamentos y los menús; Mostrar borde inferior; enlaces de redes sociales en el menú móvil.

Bloques (hasta 16)

• Promo de departamento: una imagen, etiqueta, título, pie y enlace que se muestran a la derecha de un departamento en el menú de departamentos. Escribe el título exacto del departamento en Departamento. Solo se muestra la primera promo de cada departamento.
• Miniatura de departamento: una imagen que sustituye a la imagen de la colección enlazada para un departamento en el menú.

Cómo se comporta la búsqueda

• Una consulta sin espacios que contiene un dígito, o uno de los caracteres - _ . /, se trata como un SKU o una referencia. Los productos con una variante cuyo SKU o código de barras contiene la consulta aparecen primero, en un grupo «Coincidencias de referencia», como filas de variante con el texto coincidente marcado, precio, stock y un botón «Añadir» para esa variante exacta. La búsqueda de Shopify tiene que haber devuelto antes el producto; el tema reordena los resultados, no busca por sí mismo en el índice de SKU.
• Las demás consultas listan productos (imagen, título, SKU, precio, punto de stock, Añadir), con sugerencias, colecciones, páginas y artículos a un lado.
• Con el campo enfocado y vacío, el panel muestra las últimas 5 búsquedas del cliente (se guardan en su navegador, con un botón para borrarlas) y tus búsquedas populares.

En el móvil la cabecera muestra el menú, el logotipo, la cuenta y el carrito en una fila, con el campo de búsqueda a todo el ancho debajo. El menú abre un panel a pantalla completa con navegación por niveles.

4. Ficha de producto#

La ficha de Manifest muestra, por orden: proveedor, título, SKU (opcional), valoración, precio (con precio anterior y precio por unidad), línea de stock, línea de entrega (opcional). Las acciones están siempre visibles:

• Productos de una sola variante: un campo de cantidad compacto y Añadir. El campo sigue la regla de cantidad de la variante (mínimo, múltiplo, máximo).
• Productos con variantes: Elegir opciones, que abre la compra rápida.
• Una casilla Comparar cuando la comparación está activada.

Estados de stock: «En stock (95)», «Poco stock (4)», «Agotado» y «Bajo pedido» para una variante con seguimiento que está agotada pero se sigue vendiendo. Las etiquetas se apilan arriba, al inicio de la imagen: porcentaje de oferta, novedad y etiquetas personalizadas.

5. Colección y resultados de búsqueda#

Sección: Colección (y Resultados de búsqueda, que tiene las mismas vistas).

• Página: ruta de navegación, descripción (recortada con «Leer más»), Mostrar el árbol de colecciones en la barra lateral y el Menú del árbol de colecciones (por defecto main-menu, hasta tres niveles, con el número de productos). Las subcolecciones de la colección que estás viendo también aparecen como atajos bajo el título, con su número de productos.
• Vistas: Vista por defecto (ajuste del tema: cuadrícula, lista o tabla), Ofrecer la vista de lista, Ofrecer la vista de tabla, Filas de variantes en la tabla (los productos con 2 hasta este número de variantes tienen una fila por variante; con 0 hay una fila por producto).
• Vista de tabla: una fila por SKU con una casilla, imagen, producto y variante, SKU, stock, precio, y un campo de cantidad con Añadir. Marca filas y usa la barra flotante Añadir seleccionados (n) para añadirlas todas en una sola petición.
• Cuadrícula: productos por página (12, 24, 36 o 48; los clientes pueden elegir 2 o 4 veces este número, es decir, 24, 48 y 96 por defecto), Mostrar el selector de productos por página (solo con paginación numerada), columnas en escritorio (de 3 a 6) y en móvil, Paginación (numerada o cargar más).
• Filtros y orden: filtros activados o desactivados, grupos expandidos, recuentos, orden, Barra de herramientas fija. Los filtros salen de Search & Discovery. El precio es un control deslizante con dos tiradores y campos de texto. La barra de herramientas muestra el número de resultados, los filtros activos como atajos con «Borrar todo», el selector de productos por página, el orden y el cambio de vista.
• Móvil: una barra fija con Filtrar (con el número de filtros activos), Ordenar por y Vista. El panel de filtros ocupa toda la pantalla y tiene un botón «Aplicar · n resultados».

6. Página de producto#

Sección: Información del producto (compartida con los demás temas) con bloques de Manifest. El cuadro de compra por defecto, por orden: proveedor, SKU, título, valoración, precio, Precios por cantidad, selector de variantes, Matriz de variantes, estado del inventario, estimación de entrega, botones de compra, recogida disponible, Se compran juntos, acordeón, compartir. Debajo del producto: especificaciones, comparar con productos similares, descargas, productos relacionados y productos vistos recientemente.

Bloques de Manifest#

La plantilla de producto por defecto no incluye Stock y entrega; añádelo desde Añadir bloque si quieres la promesa «Pide en las próximas 3 h 12 min». En su lugar usa los bloques compartidos Estado del inventario y Estimación de entrega. Los bloques compartidos (precio, selector de variantes, estado del inventario, estimación de entrega, botones de compra, recogida disponible, acordeón, guía de tallas) se describen en la guía de Tessera.

Secciones bajo el cuadro de compra#

• Especificaciones: tablas agrupadas a partir de custom.specs, en una o dos columnas. No muestra nada si no hay datos.
• Comparar similares: este producto frente a otros similares en una tabla, con un interruptor Resaltar diferencias. Productos similares de: recomendaciones, o una colección (si está vacío, usa la primera colección del producto). Productos a comparar (de 2 a 5, incluido este). Filas: marca, disponibilidad, opciones y especificaciones.
• Descargas del producto: fichas técnicas, manuales y certificados de custom.downloads. Cada fila muestra un nombre (el texto alternativo del archivo o su nombre de archivo), un tipo y el tamaño cuando el servidor del archivo responde.

En el móvil aparece una barra fija con el precio y Añadir (o Elegir opciones) cuando el botón principal sale de la pantalla.

7. Herramientas para profesionales#

Pedido rápido#

Añade la sección Pedido rápido a una página con la plantilla page.quick-order. Los clientes escriben un SKU o un nombre de producto y eligen una sugerencia, que se convierte en una fila con stock, precio unitario, cantidad y total de la línea. También pueden pegar líneas con el formato SKU, cantidad en el cuadro para pegar. Añadir todo al carrito envía todas las filas a la vez. Ajustes: título y texto, Mostrar el cuadro para pegar, Sugerencias mostradas, Poco stock con. Las cantidades siguen la regla de cantidad de cada variante y los precios siguen los escalones de precio de B2B. Las sugerencias vienen de la búsqueda predictiva de Shopify, así que solo se pueden añadir los productos que esa búsqueda devuelve.

Comparar#

Con Activar la comparación de productos activado, cada ficha tiene una casilla Comparar (hasta el límite que fijes, 4 por defecto). Una barra al pie de la página muestra miniaturas y Comparar (n). La sección Página de comparación (en la plantilla page.compare) muestra los productos uno al lado del otro: precio, marca, tipo, SKU, stock, opciones y grupos de especificaciones. Mostrar el interruptor «Solo diferencias», Empezar solo con las diferencias y un Enlace para añadir más productos. En el móvil caben dos columnas a la vez; desliza para ver el resto. Se puede compartir una comparación con un enlace como /pages/compare?products=handle-a,handle-b.

8. Secciones de la página de inicio#

La cuenta atrás nunca se reinicia: cuenta hasta una fecha fija y permanece oculta hasta que esa fecha está dentro del número de días que elijas, así que un plazo lejano nunca parece falso. Úsala solo para plazos reales.

Las secciones compartidas (pase de diapositivas, colección destacada, fila de iconos, vistos recientemente, boletín, lista de logotipos, testimonios y otras) también funcionan y adoptan el estilo de Manifest.

9. Metacampos#

Crea cada definición en Configuración > Datos personalizados > Productos > Añadir definición, con el espacio de nombres y la clave exactamente como se indican.

custom.specs: grupos de etiqueta y valor. Un valor puede ser texto, un número, verdadero o falso, o una lista.

{
  "General": {
    "Type": "Tape Measures",
    "Brand": "Anvil Row",
    "SKU": "TLH-10256"
  },
  "Details": {
    "Standard": "DIN 933",
    "Warranty": "2 years",
    "Waterproof": true,
    "Pack sizes": ["Single", "Pack of 3", "Pack of 6"]
  }
}

La página de comparación lee primero custom.specs. Si un producto no lo tiene, recurre a custom.specifications (con la misma forma) y después a custom.key_specs (una lista de líneas con el formato Etiqueta: valor).

custom.price_breaks: una lista de escalones de cantidad. min es la cantidad en la que empieza el escalón y price es el precio unitario en la moneda de tu tienda, como cadena decimal. El primer escalón es el precio normal de la variante con su cantidad mínima; indica solo los escalones con descuento.

[
  { "min": 10, "price": "18.99" },
  { "min": 50, "price": "17.59" },
  { "min": 100, "price": "16.39" }
]

Si una variante tiene escalones de precio de un catálogo B2B de Shopify, se usan esos en lugar del metacampo. Se ignoran los escalones cuyo min no supera la cantidad mínima de la variante.

custom.downloads: elige el tipo Archivo y activa Lista de valores. Sube fichas técnicas, manuales o certificados en el editor de producto. El texto alternativo del archivo se convierte en la etiqueta que ven los clientes; si no lo tiene, se usa el nombre del archivo.

Otros datos de la tienda que usa Manifest:

• Inventario (cantidades con seguimiento, política de inventario): unidades en stock y estados.
• Reglas de cantidad y escalones de precio (B2B de Shopify): los campos de cantidad, el bloque de precios por cantidad y el carrito.
• Productos complementarios (Search & Discovery): se compran juntos.
• Colecciones y menús: rejilla de departamentos, árbol, atajos.
• Etiquetas de producto que empiezan por badge: muestran una etiqueta personalizada.

10. Receta para la página de inicio#

El orden por defecto de la página de inicio sirve para los cuatro presets:

1. Pase de diapositivas (diseño dividido)
2. Atajos de compra
3. Rejilla de departamentos
4. Fila de ofertas
5. Mosaico de promociones
6. Colección destacada, «Más vendidos»
7. Muro de marcas
8. Colección destacada, «Novedades»
9. Fila de iconos
10. Vistos recientemente
11. Barra de ayuda
12. Boletín

No se abre ningún popup en la primera carga. El popup del boletín y la verificación de edad están en el grupo de superposiciones (Overlay group) y vienen desactivados; actívalos solo si los necesitas.

11. Preguntas frecuentes#