La sección de Encabezado controla la navegación de nivel superior, la marca y los controles de utilidad de acceso rápido en toda tu tienda. Las configuraciones principales te permiten ajustar el color de fondo, la altura del encabezado, la visualización fija, el diseño del logo y controles específicos para características clave:

Barra de Búsqueda:

Activa o desactiva la visibilidad de la barra de búsqueda central y personaliza su texto de marcador de posición.

Cajón de Menú:

Selecciona menús de navegación, personaliza el texto de los enlaces y elige mostrar la navegación en un cajón lateral (incluso en escritorio) posicionado a la derecha.

Cajón de Cuenta y Carrito:

Establece etiquetas personalizadas para los disparadores de cuenta de cliente y carrito, y define el encabezado para el estado vacío del cajón del carrito.

La sección Acordeón te permite crear listas de texto plegables, perfectas para Preguntas Frecuentes o políticas de la tienda. Los visitantes pueden hacer clic en cualquier pregunta para desplegarla y leer la respuesta, manteniendo tu página limpia y organizada. Puedes configurar fácilmente el título principal de la sección, cambiar su color de texto y ajustar el espacio arriba y abajo del bloque usando deslizadores simples en el Editor de Tema.

La sección División de Acción combina un mensaje de texto detallado a la izquierda con un cuadro de características dedicado o un menú de contacto directo a la derecha. Es ideal para mostrar servicios como tasaciones al por mayor, consignación o canales especiales de soporte al cliente. Puedes personalizar el encabezado principal, el subtítulo, la descripción, los botones de etiqueta y el título de la barra lateral, así como ajustar los tamaños de fuente, el ancho de la barra lateral y los colores de fondo y acento individuales directamente en la configuración.

La sección Deslizador de Blog presenta las últimas publicaciones e historias de tu tienda en un carrusel limpio y desplazable. En la configuración principal de la sección, puedes establecer un color de fondo o degradado, personalizar el relleno superior e inferior, ajustar los pesos de fuente y establecer etiquetas estándar como el título de la sección, texto del enlace y botones de leer más. Al agregar bloques individuales de Artículo, puedes mostrar publicaciones estándar del blog o historias personalizadas con opciones para diseños de imagen completa o tarjeta dividida, imágenes personalizadas, fondos de video (YouTube, Vimeo o MP4) y enlaces de redirección personalizados.

El Banner de Llamado a la Acción crea una sección promocional amplia y llamativa diseñada para impulsar la participación del cliente. Puedes personalizar el subtítulo, el título principal, la descripción y el botón de llamado a la acción con un enlace directo. También puedes agregar bloques individuales de Información, que se muestran automáticamente debajo del texto con íconos de marca de verificación limpios para resaltar puntos clave de confianza o garantías. La configuración de la sección también te permite ajustar el relleno superior e inferior y elegir un color de fondo o degradado personalizado.

La sección Centro de Campañas muestra una cuadrícula estructurada de tarjetas promocionales para destacar ofertas clave de la tienda, campañas y contenido exclusivo. La configuración de la sección controla los encabezados principales, columnas por fila, estilo de fondo y efectos globales de desplazamiento de tarjetas, mientras que los bloques individuales de Tarjeta te permiten personalizar títulos, descripciones, enlaces de botones e íconos.

Cómo obtener códigos de íconos SVG

Para agregar íconos vectoriales personalizados a tus tarjetas:

1. Encuentra un ícono: Visita una biblioteca de íconos de código abierto gratuita (como Lucide Icons o Tabler Icons).
2. Copia el código SVG: Busca el ícono deseado (por ejemplo, un corazón, estrella o diamante), haz clic en él y selecciona Copiar SVG o Copiar Código.
3. Pega en la configuración: Pega el bloque de código crudo directamente en el campo Ícono de tu bloque de Tarjeta.

El Cajón del Carrito permite a los clientes previsualizar y gestionar artículos mediante un menú desplegable al pasar el cursor sobre el encabezado o un cajón deslizante con controles de cantidad, entradas promocionales y enlaces de pago (requiere agregar el bloque Cajón del Carrito bajo Encabezado). En Configuración del Tema > Recompensas del Carrito, puedes configurar hasta tres umbrales de gasto escalonados (por ejemplo, niveles de gasto para 30%, 50% o 70% de descuento) para mostrar una barra de progreso de recompensa dinámica directamente dentro del cajón.

La Cuadrícula de Galería de Contenido combina elementos multimedia destacados (video e imágenes estáticas) junto con un carrusel limpio de reseñas de clientes.

• Configuración general de la sección: Personaliza el relleno superior e inferior, el subtítulo de la sección (por ejemplo, "RESEÑAS DE CLIENTES"), el recurso de imagen principal, el medio de video y los colores del borde del contenedor. Para contenido de video, puedes subir un archivo MP4 directo vía Video de Shopify o ingresar una URL de YouTube (se usa automáticamente si no se selecciona Video de Shopify), con una opción para activar Reproducción automática de video.

• Bloques de reseñas: Agrega múltiples bloques de Reseña para crear un deslizador de testimonios junto a tu cuadrícula multimedia. Para cada bloque individual de reseña, puedes ajustar: Calificación con estrellas, Texto de la reseña, Autor y Etiqueta.

La sección Carrusel de Colección muestra productos de una colección seleccionada en un deslizador limpio y desplazable horizontalmente con flechas de navegación.

• Colección y encabezado: Elige qué colección de la tienda destacar y establece un título personalizado para la sección (por ejemplo, "Tarjetas de Fantasía Mythos").
• Configuración de insignias: Agrega una insignia promocional (por ejemplo, "NUEVO") junto al encabezado, selecciona su color de acento y activa Posicionar insignia arriba para alinearla.
• Botones y navegación: Personaliza las etiquetas predeterminadas para los botones individuales de las tarjetas de producto (por ejemplo, "Agregar al carrito") y configura un botón independiente para la sección con una etiqueta personalizada (por ejemplo, "Comprar colección") y enlace directo.
• Estilo y diseño: Establece colores personalizados para el fondo de la sección, fondo del botón y texto del botón, junto con controles de relleno superior e inferior de la sección.

La sección Lista de Colecciones crea una cuadrícula de tarjetas interactivas con degradados personalizados, íconos vectoriales y enlaces directos a colecciones. Puedes personalizar el color de fondo de la sección, el encabezado, las columnas por fila y los colores de acento al pasar el cursor, luego agregar bloques individuales de Tarjeta de Colección para representar cada colección.

Configuración del Bloque de Tarjeta de Colección

Para cada bloque de tarjeta, puedes configurar:

• Colección: Selecciona la colección objetivo para el enlace de redirección.
• Título de la Colección: Ingresa la etiqueta personalizada de la tarjeta (por ejemplo, "Nuevas Llegadas").
• Ícono: Pega código
• Degradado de Fondo de la Tarjeta: Añade un código CSS de degradado lineal para dar a cada tarjeta una transición de color de fondo distinta. Formato: linear-gradient(dirección, color1, color2)

La sección de cuadrícula de Colecciones muestra un diseño adaptable de tarjetas de colecciones destacadas con imágenes destacadas y títulos directos de colecciones. Los controles de la sección te permiten alternar el tamaño de los elementos de la cuadrícula (Pequeño/Grande) y ajustar el espaciado de la cuadrícula, mientras que los bloques individuales de colección te permiten seleccionar y mostrar colecciones específicas de la tienda.

La sección Formulario de Contacto muestra un formulario simplificado de consulta para clientes dentro de un contenedor de tarjeta oscura. Las configuraciones permiten la personalización completa de encabezados, subencabezados, descripciones, etiquetas del botón de envío y etiquetas personalizadas o texto de marcador de posición para los campos Asunto, Correo Electrónico y Mensaje.

La sección Hero presenta un banner de fondo de ancho completo con textos superpuestos centrados y un botón de llamada a la acción. Los controles de la sección permiten seleccionar la imagen de fondo y ajustar la altura total del banner, mientras que los bloques de contenido permiten agregar elementos personalizables de Encabezado, Párrafo y Botón.

La sección Puntos de Interés Hero combina un banner interactivo con iconos de puntos de interés (+ indicadores) que revelan carruseles de colecciones vinculadas al pasar el cursor. Las configuraciones de la sección controlan la tipografía del hero, el estilo del botón, las imágenes de fondo para escritorio/móvil y la opacidad de la superposición, mientras que los bloques individuales de Puntos de Interés permiten asignar títulos, descripciones, colecciones objetivo y coordenadas precisas X/Y en porcentaje para posicionar cada pin sobre la imagen.

La sección Vitrina con Tooltips combina un banner de fondo destacado con encabezados alineados a la izquierda, descripciones y bloques personalizables de Elementos con Viñetas. Las configuraciones de la sección permiten ajustar el medio de fondo, la opacidad de la superposición y el estilo de la tarjeta (colores y radio de borde), mientras que los bloques de Puntos de Interés permiten colocar pines interactivos en la imagen con coordenadas X/Y independientes para escritorio y móvil para mostrar detalles emergentes y enlaces.

La sección Marquesina de Texto crea un banner de texto animado que se desplaza continuamente para anuncios y alertas del sitio. Las configuraciones de la sección permiten personalizar el color de fondo, el color del texto, el tamaño de fuente y el espacio entre los elementos, mientras que los bloques individuales de Texto permiten agregar mensajes promocionales únicos, emojis o notas de actualización al bucle de la marquesina.

La sección Texto con Iconos muestra tarjetas de características con iconos personalizados, títulos y descripciones organizados en una cuadrícula de varias columnas. Las configuraciones generales de la sección permiten personalizar encabezados, columnas por fila, espacio en la cuadrícula, dimensiones de iconos y una insignia opcional de conteo de pasos, mientras que los bloques individuales de Caja permiten subir imágenes o ingresar iconos vectoriales SVG en bruto, establecer fondos degradados personalizados y configurar colores específicos de la tarjeta y botones de llamada a la acción.

Para obtener código SVG, visita una biblioteca de iconos de código abierto como Lucide Icons o Tabler Icons, busca el icono deseado y haz clic en Copiar SVG o Copiar Código. Luego, pega el bloque de código directamente en el campo SVG de tu bloque Caja.

La sección Migas de Pan proporciona una navegación simple de página con un botón de retroceso a la izquierda y un indicador de página actual a la derecha. Las configuraciones de la sección permiten personalizar el color de fondo, la etiqueta del botón de retroceso (por ejemplo, "Volver") y el texto prefijo del indicador de visualización (por ejemplo, "Estás viendo:").

La sección Multicolumna te permite mostrar contenido lado a lado para resaltar beneficios clave, pasos o características de la tienda en un diseño limpio. Puedes establecer un título principal y un subtítulo para toda la sección, así como agregar o eliminar bloques individuales de columna para mostrar imágenes, títulos y descripciones breves.

La sección Lista de Deseos crea un espacio dedicado para mostrar todos los artículos que un cliente ha guardado mientras navega.

Cuando un comprador hace clic en el botón de utilidad Lista de Deseos en cualquier página de producto, ese artículo se guarda y se muestra automáticamente como una cuadrícula de tarjetas dentro de esta sección, ofreciendo a los clientes un lugar fácil y centralizado para revisar y comprar sus artículos favoritos más tarde.

La sección Pie de Página ancla la parte inferior de tu tienda con enlaces de navegación, marca, detalles de cumplimiento y herramientas de compromiso con el cliente. Aquí, puedes establecer el color de fondo, activar Mostrar iconos de pago para mostrar los métodos de pago aceptados y habilitar las Políticas de la tienda en la barra inferior.

Bloques del Pie de Página

• Bloque de Logo: Sube tu logo, ajusta su tamaño y agrega un eslogan rápido. También puedes activar iconos sociales o el nombre de tu tienda.

• Bloque de Enlaces: Muestra un menú de navegación desde tu administrador de Shopify bajo un título personalizado.

• Bloque de Boletín: Agrega un cuadro de suscripción por correo electrónico con el encabezado, subencabezado y texto de marcador de posición que elijas.

La sección de Producto presenta un diseño de dos columnas que muestra medios del producto junto con detalles clave y opciones de compra. Las configuraciones principales te permiten ajustar el color de fondo, el ancho de la sección, imágenes fijas, radio de borde y zoom de imagen, mientras que bloques como Título, Precio, Inventario, Selector de Variante y Botones de Compra completan el diseño principal del producto.

El bloque Pestaña de Detalles organiza la información del producto en una interfaz limpia con pestañas para mantener la página ordenada y fácil de navegar. Puedes establecer títulos personalizados para las pestañas (por ejemplo, "Descripción de la Tarjeta" y "Resumen de la Tarjeta") e ingresar texto enriquecido para cada área de contenido correspondiente.

Consejo: Para extraer automáticamente la descripción real de tu producto desde Shopify, haz clic en el ícono Conectar fuente dinámica (el símbolo de base de datos junto a la etiqueta del campo) sobre el cuadro de contenido y selecciona Descripción.

El bloque Características del Producto muestra atributos clave, como Rareza de la Tarjeta o Condición, en una lista limpia de etiqueta y valor (admite hasta 6 pares de características personalizadas).

Cómo vincular detalles personalizados del producto

1. Crea el Campo de Detalle (Configuración única)
   • Ve a Configuración > Datos personalizados > Productos en Shopify.
   • Haz clic en Añadir definición, nombra tu detalle (como "Rareza de la Tarjeta") y haz clic en Guardar.
2. Agrega detalles a un producto
   • Abre la página de tu producto en Shopify.
   • Desplázate a la sección Metacampos al final, escribe el valor (como "Raro") y guarda.
3. Muestra esto en tu tienda
   • En el editor de temas, abre tu bloque de Características del Producto.
   • Escribe la etiqueta (por ejemplo, "Rareza de la Tarjeta") en el cuadro de Título.
   • En el cuadro de Texto, haz clic en el ícono de base de datos apilado en la esquina y selecciona el nombre de tu detalle para vincularlo automáticamente.

El bloque Texto con Icono muestra hasta 3 píldoras de características compactas una al lado de la otra dentro de la sección del producto para resaltar puntos clave de venta (como envío rápido, garantías del producto o autenticidad). Cada bloque de texto te permite ingresar texto personalizado junto con código SVG en bruto para mostrar el ícono vectorial que elijas.

El bloque Botón de utilidad añade acciones secundarias a tu página de producto, permitiendo a los clientes guardar artículos o compartir productos con otros. Las configuraciones te permiten activar o desactivar independientemente los botones de Lista de deseos y Compartir y personalizar el texto de la etiqueta del botón para cada uno.

Tipografía

Los ajustes de Tipografía controlan los estilos de fuente globales en toda tu tienda. Seleccionar una fuente primaria (como Work Sans) establece una identidad visual coherente, aplicando automáticamente la tipografía elegida a los encabezados, texto del cuerpo, botones y elementos de navegación en todo el sitio.

Diseño

Los ajustes de Diseño definen las dimensiones estructurales y el espaciado de tu escaparate controlando el Ancho de página (ancho máximo del contenedor para el contenido principal) y el Margen de página (espaciado lateral exterior para evitar que el contenido toque los bordes de la pantalla en pantallas más pequeñas).

Colores

Los ajustes de Colores establecen la paleta de colores global de tu tienda para una completa coherencia de marca en cada página:

• Fondo y Primer Plano: Establece el color de fondo principal de la página y el estilo de acento predeterminado.
• Primario y Secundario: Define los colores de fuente principales para encabezados (Primario) y texto del cuerpo (Secundario).
• Borde y Acento: Controla los divisores de línea, bordes de contenedores y acentos estructurales.
• Controles de Botón: Personaliza los colores de fondo, texto y borde de los botones.
• Enlace y Hover: Establece los colores predeterminados de hipervínculos y sus estados interactivos al pasar el cursor.

Redes Sociales

Los ajustes de Redes Sociales te permiten agregar enlaces a las cuentas de redes sociales de tu marca. Simplemente pega las URLs de tus perfiles en los campos correspondientes de cada plataforma, y los íconos sociales correspondientes aparecerán automáticamente en el pie de página.

Los ajustes de Logo te permiten subir el logo principal de tu tienda, controlar su tamaño de visualización en píxeles y establecer un icono favicon para representar tu sitio en las pestañas del navegador.

Los ajustes de Recompensas del Carrito te permiten incentivar pedidos más grandes configurando hasta tres metas de gasto escalonadas. Define montos específicos del carrito y etiquetas personalizadas para cada nivel para mostrar una barra de progreso dinámica directamente en el cajón del carrito de compras, animando a los clientes a agregar más artículos para desbloquear descuentos o beneficios.