Tessera: 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 Tessera 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#

Cuando instalas el tema desde la Theme Store, obtienes la página de inicio del preset que elegiste. Si cambias de preset más adelante en el editor, solo cambian los ajustes del tema (fuentes, colores, esquinas, cabecera, tarjetas). No reorganiza tus 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#

• Crea los menús que necesites en Contenido > Menús: main-menu (cabecera), footer y customer-account-main-menu. Para un megamenú, añade submenús y sub-submenús a un elemento del menú principal.
• Crea tus colecciones y añádelas al menú.
• Instala la app gratuita de Shopify Search & Discovery. Controla los filtros de las páginas de colección y búsqueda y los productos complementarios que se muestran en la página de producto.
• Añade tus países en Configuración > Mercados y tus idiomas en Configuración > Idiomas si quieres que aparezcan los selectores de país e idioma.
• Si vendes suscripciones, instala una app de suscripciones que ofrezca planes de venta. Tessera muestra las opciones; no crea los planes.
• Si quieres valoraciones con estrellas, instala una app de reseñas de producto que escriba los metacampos estándar de valoración (consulta Metacampos).
• Tessera está traducido a 21 idiomas (consulta las preguntas frecuentes). Se pueden añadir otros idiomas con los ajustes de idiomas de Shopify.

2. Ajustes del tema#

Todo lo de esta sección está en los Ajustes del tema.

Logotipo y favicon#

Sube un Logotipo y un Logotipo invertido para las cabeceras transparentes sobre imágenes y para los esquemas de color oscuros. Define el ancho en escritorio (de 50 a 300 px) y en móvil (de 40 a 200 px). Añade un Favicon de 32 x 32 px.

Colores y esquemas de color#

Cada preset tiene cinco esquemas de color, siempre con los mismos papeles: 1 la página, 2 una superficie alternativa, 3 la superficie inversa (oscura), 4 una banda de acento, 5 texto sobre imágenes. Cada sección tiene un ajuste de Esquema de color, así que cambias el ambiente de una sección cambiando su esquema. Edita los propios esquemas en Colores. Cada esquema define los colores de fondo, texto, acento, botón y borde.

• Mostrar el color de acento en (accent_usage): botones, etiquetas o ambos. Los enlaces siempre usan el acento. Tessera no tiene ningún tono de acento; Facet usa su verde en las etiquetas; Ampere y Saffron usan su acento en los botones y las etiquetas.
• Etiquetas: define los colores de las etiquetas de oferta, de agotado y personalizadas.

Tipografía#

• Fuente de los títulos, Grosor de los títulos (automático o de 400 a 800), Escala de los títulos (compacta, predeterminada, grande o gran formato), Tamaño de los títulos (80 a 150 %), Mayúsculas en títulos (tal como se escribe o mayúsculas) y Espaciado entre letras de los títulos.
• Fuente del cuerpo y Tamaño del texto (90 a 130 %).

Los títulos en mayúsculas se muestran automáticamente un tamaño más pequeños. Las fuentes salen de la biblioteca de fuentes de Shopify.

Diseño#

• Ancho de la página (1200, 1440 o 1680 px), Margen de la página, Espacio entre elementos de la cuadrícula.
• Espacio entre secciones: compacto, predeterminado o amplio.
• Forma: radio de las esquinas de los botones, de los campos, de las tarjetas y de las imágenes. Los presets usan esquinas cuadradas en todas partes o esquinas redondeadas en todas partes; mezclarlas suele dar un resultado poco cuidado.
• Mostrar los botones en mayúsculas y Estilo del botón secundario (relleno, contorno o subrayado). Los botones principales siempre van rellenos.

Cabecera#

• Diseño de la cabecera: clásica (logotipo a la izquierda, menú en el centro, iconos a la derecha), centrada (logotipo en el centro, menú en una segunda fila), dividida (menú repartido a ambos lados de un logotipo centrado) o flotante (una barra con margen y esquinas redondeadas).
• Transparente sobre la primera sección de la página de inicio: la cabecera flota sobre la primera diapositiva y se vuelve sólida al hacer scroll. Necesita un pase de diapositivas o un vídeo como primera sección.
• Cabecera fija: no fija, siempre visible, o solo al subir.

Tarjetas de producto#

• Proporción de la imagen (adaptar, vertical, cuadrada, horizontal) y Ajuste de la imagen (rellenar o encajar). Usa encajar para los productos fotografiados sobre blanco.
• Estilo de la tarjeta: minimalista (imagen, y luego título y precio), sobre fondo (la imagen sobre un fondo de color) o con caja (una tarjeta con margen y un borde o una sombra). Color del fondo de la imagen define ese fondo; Mostrar una sombra suave en las tarjetas con caja cambia el borde por una sombra.
• Interruptores: segunda imagen al pasar el cursor, proveedor, valoración del producto (necesita una app de reseñas), muestras de color, compra rápida. Alineación del texto es izquierda o centro.
• Etiquetas: posición, formato de la etiqueta de oferta (texto, porcentaje o importe), etiqueta de agotado y el prefijo de la etiqueta personalizada. Un producto con la etiqueta badge:Nuevo muestra una etiqueta «Nuevo».
• Muestras: forma (círculo o cuadrado) y tamaño.

Carrito#

• Tipo de carrito: panel lateral o página.
• Mostrar nota del pedido en el panel del carrito y Mostrar recomendaciones de productos en el carrito.
• Mostrar barra de progreso de envío gratuito e Importe mínimo para envío gratuito. Crea una tarifa de envío gratuito equivalente en los ajustes de envío de Shopify; el tema solo muestra el progreso.
• Producto de envoltorio de regalo: elige un producto y los clientes podrán añadirlo al carrito como envoltorio de regalo.

Comportamiento de la búsqueda#

• Activar sugerencias de búsqueda, con interruptores para mostrar el proveedor y el precio en las sugerencias.
• Menú de búsquedas populares: enlaces que se muestran en la ventana de búsqueda antes de que el cliente escriba.
• Colección destacada: productos que se muestran en la ventana de búsqueda antes de que el cliente escriba.

Otros ajustes#

• Animaciones: mostrar las secciones al desplazarse y el efecto al pasar el cursor sobre las imágenes (ninguno, ampliar o levantar). El movimiento se desactiva para los clientes que prefieren menos movimiento.
• Redes sociales: añade los enlaces de tus cuentas una sola vez; los usan el pie de página, la barra de anuncios y el menú móvil.
• Formato de moneda: mostrar los códigos de moneda junto a los precios.
• Nombre del preajuste: una etiqueta de texto que el tema usa como gancho de estilo. Déjala como está.

3. Secciones y bloques#

Cabecera y megamenú#

Sección: Cabecera.

• Menú: elige el menú (por defecto main-menu).
• Mostrar todos los submenús como megamenú: los elementos con sub-submenús siempre abren un panel a todo el ancho; activa este ajuste para usarlo en todos los elementos.
• Bloques Promo del menú (hasta 8 en la cabecera): una imagen, un título y un enlace. Escribe el título exacto de un elemento de primer nivel del menú en Elemento del menú; cada elemento muestra sus dos primeras promos en el panel del megamenú.
• Iconos: mostrar búsqueda, mostrar cuenta (solo si las cuentas de cliente están activadas), mostrar redes sociales en el menú móvil, selectores de país e idioma.
• Menú de la cuenta: los enlaces de la hoja de la cuenta (menú predeterminado customer-account-main-menu).
• Esquema de color, Esquema de color del menú y Mostrar borde inferior.

El diseño, la transparencia y el comportamiento al hacer scroll están en Ajustes del tema > Cabecera.

Barra de anuncios#

Sección: Barra de anuncios. Añade bloques Anuncio (texto y enlace) y bloques Cuenta atrás opcionales (texto, fecha de finalización YYYY-MM-DD, hora de finalización HH:MM, zona horaria). Una cuenta atrás sale de la rotación cuando se acaba el tiempo. Ajustes: rotar automáticamente, cambiar cada 3 a 10 segundos, mostrar flechas, tamaño del texto, iconos sociales y selectores de país e idioma en pantallas grandes.

Pase de diapositivas#

Sección: Pase de diapositivas (la apertura habitual de la página de inicio).

• Sección: Ancho completo (desactivado da un pase de diapositivas con margen y esquinas redondeadas), Altura y Altura en móvil (adaptar, pequeña, mediana, grande, pantalla completa), Mostrar el texto debajo de la imagen en móvil, Mostrar paginador de líneas, Mostrar flechas de navegación, Cambiar diapositivas automáticamente y el intervalo. Siempre se muestra un botón de pausa.
• Bloque Diapositiva: Diseño: superpuesto (texto sobre la imagen), dividido (imagen en una mitad, un panel en la otra) o díptico (dos imágenes en paralelo). Dividido y díptico van bien con fotos verticales. Imagen para escritorio, Segunda imagen, Imagen para móvil, Vídeo (sin sonido, en bucle), Intensidad del degradado (un degradado desde el lado donde está el texto), antetítulo, título y su tamaño, texto, hasta dos botones con un estilo cada uno, Posición del contenido (nueve posiciones), Alineación del texto, Estilo del texto (claro, oscuro o recuadro) y un esquema de color.

Lista de colecciones, colección destacada y pestañas de colecciones#

• Lista de colecciones: añade bloques Colección. Diseño en cuadrícula o carrusel, proporción de la imagen, estilo de tarjeta (texto debajo o sobre la imagen), mostrar número de productos, columnas.
• Colección destacada: elige una colección, el número de productos, cuadrícula o carrusel, columnas, flechas y un enlace «Ver todo».
• Pestañas de colecciones: hasta 6 bloques Pestaña, cada uno con una colección y un texto. Estilo de las pestañas: píldoras o subrayado.

Imagen con texto#

Sección: Imagen con texto. Añade bloques de texto, título, botón y otros. Ajustes: posición y ancho de la imagen, proporción de la imagen, Mostrar una segunda imagen superpuesta (la segunda imagen se superpone a una esquina de la primera, con el 40 % de su ancho), ancho completo o contenido.

Marquesina#

Sección: Marquesina. Bloques Texto (texto grande con un enlace opcional, en la fuente de los títulos o del cuerpo) y bloques Imagen. Velocidad, dirección, pausar al pasar el cursor, tamaño del texto, texto sólido, atenuado o con contorno, separador (ninguno, punto, estrella o destello). Siempre hay un botón de pausa disponible y el movimiento se detiene para los clientes que prefieren menos movimiento.

Compra el look (puntos interactivos)#

Sección: Compra el look. Elige una imagen y añade bloques Punto interactivo: elige un producto y define su posición horizontal y vertical. Cada punto abre una tarjeta de producto. Diseño «Solo imagen» o «Imagen con lista de productos» (una lista junto a la imagen), mostrar números, pulso. Usa Adaptar a la imagen como proporción para que los puntos queden exactamente donde los colocaste en cualquier tamaño de pantalla.

Antes y después#

Sección: Antes y después. Dos imágenes (usa el mismo tamaño y encuadre), etiquetas, una posición inicial, proporción. Añade bloques de texto a su lado si quieres.

Testimonios, lista de logotipos y galería#

• Testimonios: diseño de cita grande, cuadrícula o carrusel; bloques Testimonio con valoración (0 oculta las estrellas), título, cita, autor, datos, foto y un producto valorado. Escribe solo citas reales de clientes.
• Lista de logotipos: diseño en cuadrícula o marquesina, logotipos en escala de grises y una Cita opcional por logotipo que se muestra cuando se selecciona el logotipo. Úsala para menciones de prensa que tengas permiso para mostrar.
• Galería de imágenes: cuadrícula, mosaico o carrusel. Cada bloque Imagen puede tener un pie de foto, un enlace y un producto (una etiqueta de producto se muestra al pasar el cursor).

Vídeo, cuenta atrás, cronología y tabla comparativa#

• Vídeo: un vídeo subido (modo de fondo, sin sonido) o un enlace de YouTube o Vimeo (solo se carga cuando el cliente pulsa reproducir). Necesita una imagen de portada y una descripción para lectores de pantalla.
• Cuenta atrás: una fecha de finalización fija, con hora y zona horaria; nunca se reinicia. Úsala solo para plazos reales. Elige qué pasa al terminar: ocultarse o mostrar un mensaje.
• Cronología: bloques Hito con una fecha, un título, un texto y una imagen; vertical u horizontal.
• Tabla comparativa: de 2 a 4 columnas, una columna destacada, bloques Fila con una marca de verificación, una cruz, un texto o una celda vacía, y bloques Título de grupo de filas.

Sección (crea la tuya)#

Sección: Sección. Un contenedor para cualquier bloque (texto, botón, imagen, icono, vídeo, grupo, bloques de apps). Tiene nueve diseños de partida: sección, portada, texto enriquecido, imagen con texto, varias columnas, iconos con texto, llamada a la acción, cifras y preguntas frecuentes. Ajustes: dirección, ancho, alineación, espacio, altura mínima, imagen o vídeo de fondo y capa de color.

Fila de iconos, artículos del blog, formulario de contacto y boletín#

• Fila de iconos: hasta 8 bloques Elemento con un icono (o tu propia imagen pequeña), título, texto y enlace. Úsala para dar tranquilidad sobre envíos, devoluciones y pago.
• Artículos del blog: elige un blog; cuadrícula o carrusel; interruptores de extracto, fecha y autor.
• Formulario de contacto: el nombre, el correo electrónico y el mensaje siempre se muestran; el teléfono es opcional; añade bloques Campo personalizado (texto de una línea, texto de varias líneas, número, fecha, desplegable, casilla de verificación).
• Boletín: centrado con una imagen de fondo, o dividido con una imagen. Los suscriptores se añaden a tu lista de clientes con consentimiento para recibir marketing por correo electrónico.
• Popup del boletín y Verificación de edad están en el grupo de superposiciones y vienen desactivados. La ventana nunca se muestra en la página de contraseña ni a los suscriptores; define el disparador (retraso o al salir de la página), la frecuencia y un código de descuento opcional que crees en Descuentos.

Pie de página#

Sección: Pie de página. Bloques: texto, menú, grupo, suscripción por correo, iconos de redes sociales, logotipo, imagen, botón, iconos de pago, Liquid personalizado y bloques de apps. Ajustes: primera columna más ancha, columnas en móvil, selectores de país e idioma, Mostrar el botón Seguir en Shop (necesita Shop Pay), iconos de pago, enlaces a las políticas, texto de copyright y Mostrar un wordmark grande (el nombre de tu tienda en la fuente de los títulos, como una fila a todo el ancho).

Página de colección#

Sección: Colección.

• Banner: oculto, solo texto o con imagen. Los banners con imagen usan la imagen de la colección o la Imagen alternativa. Altura, opacidad de la superposición, alineación, descripción y ruta de navegación.
• Cuadrícula: productos por página (de 8 a 48), columnas en escritorio (de 2 a 5) y en móvil, Mostrar selector de diseño de cuadrícula (los clientes eligen productos más grandes o más pequeños y se recuerda su elección), Paginación: números de página, botón Cargar más o desplazamiento infinito, y Mostrar número de productos.
• Filtros y orden: Diseño de los filtros panel lateral, barra lateral u horizontal; expandir los grupos de filtros; mostrar el número de productos; Barra de herramientas fija. En los móviles la barra de herramientas se convierte en una píldora flotante «Filtrar y ordenar». Los filtros son los que configuras en Search & Discovery.
• Bloque Chips de subcolecciones: elige un menú y cada enlace se convierte en un chip redondo con la imagen de la colección.
• Bloque Bloque promocional: un mosaico de imagen que se coloca en la cuadrícula en la posición que elijas (de 1 a 48), de una o dos columnas de ancho, con título, texto y un botón. Solo se muestra en la primera página.

Página de producto#

Sección: Información del producto. Ajustes: posición de la multimedia (izquierda o derecha) y ancho, Diseño de la galería (apilada, miniaturas, carrusel o bloque Galería multimedia), Fondo tintado de las imágenes (coloca los packshots blancos sobre un fondo de color), migas de pan, Mantener visibles los detalles del producto al desplazarse, espacio entre bloques, Mostrar barra fija de añadir al carrito (y si se muestra en escritorio). En móvil todos los diseños se convierten en un carrusel que se desliza con el dedo y tiene un paginador de líneas.

Añade y reordena los bloques de la caja de compra. Los bloques, con sus ajustes principales:

Debajo del producto, la plantilla por defecto muestra una fila de iconos, productos relacionados y productos vistos recientemente.

Carrito y búsqueda#

• Página Carrito y Carrito lateral: interruptor de proveedor, enlaces a colecciones del carrito vacío, recomendaciones (título, número, relacionados o complementarios), un resumen del pedido fijo.
• Resultados de búsqueda: pestañas por tipo de resultado, cuadrícula, selector de densidad, paginación, filtros y orden, igual que en la página de colección.

4. Metacampos#

Tessera no necesita ningún metacampo. El único dato que lee de los metacampos es la valoración de una app de reseñas.

La mayoría de las apps de reseñas los escriben por ti. Ejemplo de un valor de valoración:

{ "value": "4.6", "scale_min": "1.0", "scale_max": "5.0" }

También puedes conectar cualquier metacampo de texto a un ajuste del editor. Pulsa el icono Conectar origen dinámico junto a un ajuste que lo admita (por ejemplo el Valor de una fila de Especificación, o el texto de una fila de acordeón) y elige un metacampo. Crea antes la definición del metacampo en Configuración > Datos personalizados.

Otros datos de la tienda que usa el tema:

• Las etiquetas de producto que empiezan por badge: se convierten en etiquetas personalizadas (cambia el prefijo en Ajustes del tema > Tarjetas de producto).
• Los planes de venta vienen de tu app de suscripciones.
• Los productos complementarios y relacionados vienen de Search & Discovery.
• Las muestras de las opciones vienen de las opciones de producto del panel de Shopify.
• Los precios unitarios vienen de la medida del precio unitario de la variante.

5. Receta de página de inicio#

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

1. Pase de diapositivas (la primera sección; obligatorio si la cabecera es transparente).
2. Lista de colecciones (tres mosaicos, texto sobre la imagen).
3. Colección destacada, «Novedades», como carrusel.
4. Imagen con texto (la segunda imagen se superpone).
5. Marquesina.
6. Compra el look.
7. Producto destacado.
8. Galería de imágenes.
9. Fila de iconos (devoluciones, pago seguro, ayuda, envío con seguimiento).

El formulario de boletín está en el pie de página, así que aparece en todas las páginas. La promesa de envío se dice una sola vez en cada página (la barra de anuncios) y la marquesina lleva frases de marca, no ofertas. La página de inicio por defecto no trae testimonios ni logotipos de prensa porque el tema no puede inventarlos: añade una sección Testimonios cuando tengas opiniones reales de clientes y una Lista de logotipos solo para menciones de prensa que tengas permiso para mostrar.

En móvil todas las diapositivas del pase tienen la misma altura, también una diapositiva dividida (imagen arriba, panel abajo). Si eliges para móvil la misma altura que en escritorio, los controles de la primera diapositiva quedan sobre el pliegue.

Hay dos extras opcionales ya conectados que esperan tu contenido: crea una página con el identificador size-guide (una tabla de tallas) y aparecerá el enlace Guía de tallas en los productos con una opción Talla; y en Ajustes del tema > Comportamiento de la búsqueda elige un menú de búsquedas populares y una colección destacada para que la ventana de búsqueda nunca salga vacía.

6. Preguntas frecuentes#