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 funciones 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.

Menú Desplegable:

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

Menú 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 menú del carrito.

La sección de Acordeón te permite construir 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 establecer 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 controles deslizantes simples en el Editor de Temas.

La sección División de Acción combina un mensaje de texto detallado a la izquierda con un cuadro de función dedicado o 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 título principal, subtítulo, descripción, botones de etiqueta y título de la barra lateral, así como ajustar tamaños de fuente, ancho de la barra lateral y colores individuales de fondo y acento 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 de 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, título principal, descripción y 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 títulos 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 raw directamente en el campo Ícono de tu bloque de Tarjeta.

El Menú del Carrito permite a los clientes previsualizar y gestionar artículos mediante un desplegable al pasar el cursor sobre el encabezado o un cajón deslizante hacia arriba con controles de cantidad, entradas de promociones y enlaces de pago (requiere agregar el bloque de Menú 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 dinámica de recompensas directamente dentro del cajón.

La cuadrícula de la 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 a través de Shopify Video o ingresar una URL de YouTube (se usa automáticamente si no se selecciona Shopify Video), con una opción para activar o desactivar la Reproducción automática del video.

• Bloques de reseñas: Agrega múltiples bloques de reseñas para crear un deslizador de testimonios junto a tu cuadrícula de medios. 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 mostrar y establece un título personalizado para la sección (por ejemplo, "Cartas de Fantasía Mythos").
• Configuración de insignias: Añade una insignia promocional (por ejemplo, "NUEVO") junto al encabezado, selecciona su color de acento y activa la opción Posicionar insignia arriba para alinearla.
• Botones y navegación: Personaliza las etiquetas predeterminadas para los botones de cada tarjeta 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, iconos vectoriales y enlaces directos a colecciones. Puedes personalizar el color de fondo de la sección, el encabezado, columnas por fila y 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 destino para el enlace de redirección.
• Título de la colección: Ingresa la etiqueta personalizada de la tarjeta (por ejemplo, "Nuevas llegadas").
• Icono: 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 colección destacadas con imágenes destacadas y títulos directos de las colecciones. Los controles de la sección permiten alternar el tamaño de los elementos de la cuadrícula (Pequeño/Grande) y ajustar el espacio entre ellos, mientras que los bloques individuales de colección permiten seleccionar y mostrar colecciones específicas de la tienda.

La sección de Formulario de Contacto muestra un formulario simplificado para consultas de clientes dentro de un contenedor de tarjeta oscura. Las configuraciones permiten la personalización completa de encabezados, subtítulos, 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 superposiciones de texto centradas 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 de Puntos Calientes Hero combina un banner interactivo con iconos de puntos calientes (+ 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 Calientes 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 Calientes 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 destacadas con iconos personalizados, títulos y descripciones organizadas en una cuadrícula de múltiples columnas. Las configuraciones generales de la sección permiten personalizar encabezados, columnas por fila, espacio en la cuadrícula, dimensiones de los 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, visite una biblioteca de iconos de código abierto como Lucide Icons o Tabler Icons, busque el icono deseado y haga clic en Copiar SVG o Copiar Código. Luego, pegue el bloque de código directamente en el campo SVG de su bloque de Caja.

La sección de 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 permite mostrar contenido lado a lado para resaltar beneficios clave, pasos o características de la tienda en un diseño limpio. Puede 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, proporcionando 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 su tienda con enlaces de navegación, marca, detalles de cumplimiento y herramientas de compromiso con el cliente. Aquí, puede establecer el color de fondo, activar Mostrar iconos de pago para mostrar 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: Suba su logo, ajuste su tamaño y agregue un eslogan rápido. También puede activar iconos sociales o el nombre de su tienda.

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

• Bloque de Boletín: Agregue un cuadro de suscripción por correo electrónico con su elección de encabezado, subtítulo y texto de marcador de posición.

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 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 de Pestañas 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 icono Conectar fuente dinámica (el símbolo de base de datos junto a la etiqueta del campo) encima del cuadro de contenido y selecciona Descripción.

El bloque de 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 icono de base de datos apilada en la esquina y selecciona el nombre de tu detalle para vincularlo automáticamente.

El bloque de Texto con icono muestra hasta 3 características compactas en píldoras 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 icono vectorial que elijas.

El bloque de 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 los botones de Lista de deseos y Compartir de forma independiente y personalizar el texto de la etiqueta del botón para cada uno.

Tipografía

Los ajustes de Tipografía controlan los estilos globales de fuente en toda tu tienda. Seleccionar una fuente primaria (como Work Sans) establece una identidad visual consistente, 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 tienda controlando el Ancho de página (ancho máximo del contenedor para el contenido principal) y el Margen de página (espacio lateral exterior para evitar que el contenido toque los bordes de la pantalla en pantallas pequeñas).

Colores

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

• Fondo y Primer Plano: Define el color principal de fondo 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 para 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 y los íconos sociales 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 mayores 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, animando a los clientes a agregar más artículos para desbloquear descuentos o beneficios.