Signal: 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 Signal 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 el diseño de la página de inicio del preset que hayas elegido. Si cambias de preset más tarde en el editor, solo cambian los ajustes del tema (fuentes, colores, paneles, esquinas, tarjetas). No reordena tus secciones ni cambia tu contenido. Elige primero el preset y afina después, porque sustituye los valores de tus Ajustes del tema.

Antes de montar las páginas#

• Crea los menús en Contenido > Menús: main-menu, footer y customer-account-main-menu.
• Crea las colecciones que quieras mostrar (los más vendidos, una por categoría).
• Instala la app gratuita de Shopify Search & Discovery para los filtros de colección y los productos de «Cómpralo con».
• Reseñas: para mostrar la etiqueta de estrellas en las tarjetas y en el producto héroe, instala una app de reseñas que escriba los metacampos estándar de valoración de Shopify (reviews.rating y reviews.rating_count).
• Suscripciones: para mostrar «Suscríbete y ahorra» en un producto, instala una app de suscripciones y crea planes de venta para el producto. Signal los muestra; no los crea.
• Packs: el creador de packs solo estima el descuento. Crea un descuento automático equivalente en Descuentos.
• Líneas de beneficio: crea el metacampo de producto custom.benefit (consulta Metacampos) y rellénalo en tus productos.
• Añade países en Configuración > Mercados e idiomas en Configuración > Idiomas si quieres que aparezcan los selectores.

2. Ajustes del tema#

Todo lo de esta sección está en Ajustes del tema. La mayoría de los grupos son comunes a los demás temas de la familia; Signal es específico de este tema.

Signal (paneles y tipografía)#

• Radio de las esquinas de los paneles: 0, 8, 12, 20 o 28 px. Cada sección con un esquema de color distinto del 1 se dibuja como un panel redondeado sobre el fondo de la página.
• Espacio entre paneles: de 8 a 32 px. El fondo de la página se ve por ese hueco.
• Mostrar una sombra suave bajo los paneles: si está desactivado, los paneles quedan planos sobre la página.
• Etiquetas pequeñas: monoespaciada o la fuente del texto, para los chips, las etiquetas de cifras y la barra de anuncios.
• Opacidad del texto fantasma: del 4 al 20 %, cuánto se ven las palabras gigantes decorativas.

Logotipo y favicon#

Logotipo, Logotipo invertido (para los esquemas oscuros), anchos para escritorio y móvil, y un Favicon de 32 x 32 px.

Colores y esquemas de color#

Cada preset tiene cinco esquemas con funciones fijas: 1 el tono de la página, 2 el panel blanco, 3 el panel inverso (oscuro), 4 la banda de acento, 5 una banda pastel suave. Una sección con el esquema 1 queda directamente sobre la página; con cualquier otro esquema se dibuja como un panel. Cambia el Esquema de color de una sección para cambiar su panel. Mostrar el color de acento en elige botones, etiquetas o ambos. Define los colores de las etiquetas de oferta, agotado y personalizada en Etiquetas.

Tipografía#

Fuente, grosor, escala (compacto, predeterminado, grande, gran formato), tamaño, mayúsculas y espaciado entre letras de los títulos; fuente y tamaño del cuerpo. Las fuentes vienen de la biblioteca de fuentes de Shopify. Los títulos en mayúsculas usan automáticamente un tamaño menos.

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, radios de las esquinas de botones, campos, tarjetas e imágenes, botones en mayúsculas y el estilo del botón secundario. En Signal, los controles pequeños como los chips, las píldoras y las muestras siempre son redondeados; los ajustes de radio se aplican a botones, campos, tarjetas e imágenes.

Cabecera#

La cabecera de Signal es siempre la barra flotante, así que el grupo Cabecera de los ajustes del tema solo tiene un ajuste, Cabecera fija. No hay opción de diseño ni de transparente. La lista completa de ajustes de la cabecera está en el apartado 3.

Tarjetas de producto#

Proporción y ajuste de la imagen, estilo de la tarjeta, color del fondo de la imagen, sombra, segunda imagen al pasar el cursor, proveedor, Mostrar valoración del producto (requiere una app de reseñas), muestras de color, Activar compra rápida, alineación del texto, etiquetas (posición, formato de oferta, agotado, prefijo de etiqueta personalizada) y forma y tamaño de las muestras. Las etiquetas de producto new y bestseller (en mayúsculas o minúsculas) muestran un chip «Novedad» o «Más vendido» en la tarjeta. Una etiqueta que empiece por badge: muestra su texto como chip.

Carrito#

Tipo de carrito (panel lateral o página), nota del pedido, recomendaciones, Mostrar barra de progreso de envío gratuito y su importe mínimo, y el Producto de envoltorio de regalo. La barra de progreso está activada en los cuatro presets; ajusta el mínimo para que coincida con una tarifa real de envío gratuito en los ajustes de envío de Shopify.

Búsqueda, animaciones, redes sociales y moneda#

Sugerencias de búsqueda (con opciones de proveedor y precio), un menú de búsquedas populares y una colección destacada para la ventana de búsqueda vacía; aparición de las secciones al desplazarse y el efecto al pasar el cursor (ninguno, ampliar o elevar); enlaces a cuentas sociales; códigos de moneda.

3. Secciones y bloques propios#

Cabecera#

Sección: Cabecera.

• Menú y Mostrar todos los submenús como panel grande.
• Texto del botón, Enlace del botón y Color del botón (acento o tinta). El botón queda a la derecha de la barra. Deja el texto vacío para ocultarlo. Sin enlace, va a todos los productos.
• Iconos: mostrar búsqueda, mostrar cuenta, mostrar enlaces a 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). El icono de cuenta es el componente de cuenta de Shopify, visible en todos los tamaños de pantalla cuando las cuentas de cliente están activadas.
• Mostrar la barra inferior en móviles: una barra con Inicio, Tienda, Búsqueda y Carrito (con el número de artículos). Enlace de Tienda (por defecto, todos los productos) y Combinación de colores de la barra. La barra se oculta mientras se muestra la barra de añadir al carrito de la página de producto.
• Espacio sobre la barra (de 0 a 24 px), Combinación de colores y Combinación de colores del menú.
• Bloques Destacado del mega menú (hasta 8): escribe el título exacto de un elemento del menú principal en Elemento del menú y elige una Colección (sus 4 primeros productos se muestran en una tira), un Encabezado y una Imagen opcional con enlace.

Producto héroe#

Sección: Producto héroe. Colócala la primera en la página de inicio.

• Producto: elige el producto que quieres destacar. En una página de producto puede quedar vacío.
• Título (vacío usa el título del producto), Etiqueta del título (usa un solo título 1 por página), Texto, Texto de valoración (por ejemplo «4,8 con 2.300 reseñas»; si existen los metacampos de reseñas del producto, se usan en su lugar).
• Imagen (funciona mejor un recorte con fondo transparente), Posición de la imagen (izquierda o derecha), Ajuste de la imagen (mostrar el producto entero o rellenar el recuadro).
• Zona de compra: mostrar precio, opciones de variante, selector de cantidad, botones de pago dinámico, un enlace a la página del producto y un Texto del botón. El botón de añadir al carrito funciona desde la página de inicio.
• Bloques Beneficio (hasta 5): un icono de una lista de 14 y una línea de texto.
• Bloques Etiqueta de dato (hasta 3): un valor, un texto y una posición sobre la imagen (seis posiciones), por ejemplo «32 h» y «batería». Introduce solo cifras que puedas respaldar.
• Esquema de color, Sección a todo el ancho, relleno superior e inferior.

Banner fantasma#

Sección: Banner fantasma. Una palabra muy grande detrás de la imagen de un producto, con texto y botones.

• Palabra fantasma (una palabra corta o el nombre de un modelo), Estilo de la palabra (relleno suave o contorno), Tamaño máximo de la palabra (de 120 a 640 px; la palabra crece hasta llenar el ancho, hasta este tamaño), Desplazamiento vertical de la palabra, Desplazamiento al hacer scroll (desactivado, sutil, medio, fuerte; nunca se mueve para quien prefiere menos movimiento).
• Imagen, Tamaño de la imagen, Ajuste de la imagen (cubrir llena un marco redondeado 4:5; contener muestra un recorte entero).
• Bloques: Encabezado (1), Texto (1), Botón (hasta 2, principal o secundario).

Banda de cifras#

Sección: Banda de cifras. Título, texto, alineación y hasta 4 bloques Cifra: Número (dígitos y un punto decimal opcional; cuenta desde 0 cuando la sección aparece en pantalla), Antes del número, Después del número, Texto y Texto secundario. Introduce cifras medidas y guarda la fuente de cada una; no publiques números que no puedas respaldar.

Tabla comparativa#

Sección: Tabla comparativa. Título, texto, un botón y el Título de la columna de características.

• Bloques Columna (hasta 4): Nombre, Texto breve y Destacar esta columna.
• Bloques Fila: Característica, una Nota y, para cada columna, un valor de marca, cruz o texto, con el texto. Los valores de columnas que no existen se ignoran.
• La primera columna se queda fija cuando la tabla se desplaza en el móvil.

Pasos de rutina#

Sección: Pasos de rutina. Título, texto, Pasos visibles en escritorio (2, 3 o 4; con más pasos, la fila se desplaza hacia los lados) y proporción de la imagen. Bloques Paso (hasta 6): Imagen, Etiqueta del paso (vacía numera los pasos automáticamente), Título, Texto y un Producto opcional que se muestra con un botón para añadirlo.

Titular con imágenes#

Sección: Titular con imágenes. Una frase grande construida con bloques, en este orden:

• Texto (una palabra o frase; estilo normal, resaltado, contorno o fantasma),
• Imagen en línea (decorativa; forma píldora, círculo o cuadrado redondeado; inclinación de −8 a 8),
• Salto de línea (hasta 3).

Ajustes: etiqueta del título, tamaño (grande, display o mega), alineación, altura de las imágenes, texto bajo el titular, un botón, esquema de color.

Vídeos de creadores#

Sección: Vídeos de clientes. Título, texto, tarjetas por fila en escritorio (de 3 a 6), Reproducir vídeos al verlos (sin sonido y en bucle; se pausan al salir de la vista y se quedan quietos para quien prefiere menos movimiento), Mostrar el usuario del creador. Bloques Tarjeta de vídeo (hasta 12): sube un Vídeo vertical 9:16 (mejor corto y ligero), una Imagen de póster, el Usuario del creador, un Pie de foto y un Producto etiquetado (muestra un chip de compra que abre la compra rápida). Usa vídeos de creadores que te hayan dado permiso.

Preguntas con soporte#

Sección: Preguntas con soporte.

• Bloques Pregunta (hasta 24): pregunta y respuesta.
• Ajustes: abrir la primera pregunta, abrir una a la vez, Añadir datos estructurados de preguntas (ayuda a los buscadores a mostrar las preguntas).
• Panel de soporte: posición, título, texto, Etiqueta del tiempo de respuesta y Tiempo medio de respuesta, y un botón de contacto. Escribe tu tiempo medio de respuesta real, o déjalo vacío para ocultarlo. Añade hasta 5 bloques Avatar con fotos cuadradas del equipo.

Creador de packs#

Sección: Creador de packs. Los clientes eligen productos de una colección y los añaden en un solo paso.

• Colección, Productos a mostrar (de 4 a 12), Columnas en escritorio, Productos por pack (de 2 a 5; el cliente debe elegir exactamente esa cantidad), Descuento del pack (del 0 al 40 %), Texto del botón.
• Anotar el pack en el carrito añade un atributo de carrito como «Pack, 15% de descuento» para que lo veas en el pedido.
• La sección no aplica ningún descuento. Crea un descuento automático en el panel de Shopify (Descuentos > Importe de descuento en productos) con el mismo porcentaje; el total que se muestra en la página es solo una estimación.

Quiz con respuestas#

Sección: Quiz con respuestas. Un panel de colores con una pregunta y hasta 4 chips de Respuesta. Cada chip enlaza a una colección, una página o cualquier URL (sin enlace, va a todos los productos). Es un conjunto de enlaces, no un motor de cuestionarios.

Bloques de la página de producto#

La página de producto de Signal usa los bloques comunes (proveedor, título, precio, selector de variantes, botones de compra, estado del inventario, estimación de entrega, recogida disponible, productos complementarios, acordeón, guía de tallas, compartir). Tres bloques son propios de Signal:

La plantilla de producto predeterminada, por orden: valoración, título, línea de beneficio, precio, selector de variantes, opciones de compra, botones de compra, barra de existencias, estimación de entrega, productos complementarios («Cómpralo con») y un grupo de acordeón. Debajo del producto añade una banda de cifras, una imagen con texto, una tabla comparativa, una fila de iconos («Qué incluye la caja»), pasos de rutina, vídeos de creadores, preguntas con soporte, productos relacionados y productos vistos recientemente. Puedes quitar o reordenar cualquiera de ellos.

Otras secciones#

Las secciones comunes también funcionan en Signal: Pase de diapositivas, Lista de colecciones, Colección destacada, Pestañas de colecciones (usada para «Más vendidos» con pestañas), Imagen con texto, Marquesina, Compra el look, Antes y después, Testimonios, Lista de logotipos, Vídeo, Cuenta atrás, Cronología, Fila de iconos, Artículos del blog, Formulario de contacto, Boletín, Pie de página, Liquid personalizado. Sus ajustes están descritos en la guía de Tessera. En Signal, cada una se dibuja como un panel cuando su esquema de color no es el 1, y tiene los mismos ajustes de relleno.

Página de colección#

Sección: Colección. La plantilla de Signal muestra un banner de imagen (dibujado como un panel), un bloque de chips de subcolecciones, una barra de herramientas blanca, filtros en un panel lateral y un quiz con respuestas después de la cuadrícula. Los ajustes son los mismos que en la guía de Tessera (diseño de los filtros, selector de densidad, paginación, barra de herramientas fija).

4. Metacampos#

Crea custom.benefit en Configuración > Datos personalizados > Productos > Añadir definición: nombre «Beneficio», espacio de nombres y clave custom.benefit, tipo Texto de una sola línea. Después rellénalo en cada producto. Que sea una línea corta (la tarjeta muestra una sola línea, de 14 px).

custom.benefit = "Limpia los poros sin resecar tu piel"

Los dos metacampos de reseñas los escribe tu app de reseñas. Un valor de valoración tiene este aspecto:

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

Otros datos de la tienda que usa Signal:

• Etiquetas de producto: new y bestseller muestran chips; badge:Texto muestra un chip personalizado.
• Planes de venta de tu app de suscripciones: opciones de compra.
• Productos complementarios de Search & Discovery: «Cómpralo con».
• Descuentos automáticos de Shopify: el descuento real del creador de packs.

5. Receta para la página de inicio#

El orden predeterminado de la página de inicio funciona con los cuatro presets:

1. Producto héroe
2. Lista de colecciones (categorías)
3. Pestañas de colecciones («Más vendidos»)
4. Banner fantasma
5. Banda de cifras
6. Tabla comparativa
7. Titular con imágenes
8. Pasos de rutina
9. Vídeos de clientes
10. Testimonios
11. Lista de logotipos (prensa)
12. Preguntas con soporte
13. Fila de iconos (confianza)
14. Boletín

No necesitas todas. Una tienda con un solo producto puede quedarse con el héroe, las cifras, la comparativa, las preguntas y el boletín. Alterna paneles de color (esquemas 3, 4, 5) con paneles blancos (esquema 2) para que la página se lea como una pila de paneles distintos, y reserva el esquema 1 para las secciones que deban quedar directamente sobre la página.

6. Preguntas frecuentes#