Secciones versus bloques
Una sección es una fila de ancho completo en una página. Las secciones se apilan verticalmente y pueden reordenarse, ocultarse o eliminarse. Un bloque es un fragmento de contenido dentro de una sección: un bloque de texto, una imagen, un botón o un grupo de diseño. Algunas secciones contienen un conjunto fijo de bloques (como el encabezado), mientras que otras te permiten agregar, eliminar y reordenar bloques libremente.
Secciones globales (aparecen en todas las páginas)
Barra de anuncios
Una franja promocional delgada en la parte superior de la página. Puedes agregar hasta 7 mensajes de anuncio individuales, cada uno con su propio texto. Los mensajes se alternan en dos modos: Ticker (desplazamiento horizontal continuo) o Slider (transiciones distintas con un intervalo configurable de 2 a 10 segundos). Las opciones adicionales incluyen dirección del texto (izquierda a derecha o derecha a izquierda), un carácter separador entre mensajes del ticker, tamaño de fuente (10–30 px) y esquema de colores. Puedes agregar un máximo de 2 barras de anuncios por página.
Encabezado
La barra de navegación principal. Contiene cinco bloques fijos que no pueden agregarse, eliminarse ni reordenarse, solo configurarse:
- Logo: muestra la imagen de marca de tu tienda. Establece la posición (izquierda, centro o derecha), el ancho (20–300 px), la altura (20–300 px) y el relleno.
- Menú: el menú de navegación. Elige un menú que hayas creado en Menús, luego establece su posición horizontal, en qué fila del encabezado se encuentra (superior o inferior), el tipo de visualización (cajón, mega menú o menú desplegable) y el esquema de colores para el panel desplegable. Una opción de barra de menú agrega una franja de color de ancho completo detrás de la fila inferior.
- Búsqueda: un icono de búsqueda que abre un overlay de búsqueda de productos. Establece su posición horizontal (izquierda o derecha) y en qué fila se encuentra.
- Carrito: el icono del carrito con una insignia de conteo de artículos. Opciones de tipo de visualización: Cajón (un panel lateral), Menú desplegable (un mini carrito en el encabezado) o Página (redirige a la página completa del carrito). Cada tipo tiene su propio selector de esquema de colores.
- Localización: un selector de país e idioma para tiendas con múltiples mercados. Activa o desactiva si se muestra el nombre y la bandera del país, y establece la posición y la fila.
La configuración a nivel de encabezado incluye: Comportamiento adhesivo (Desplazamiento (adhesivo inteligente: se oculta al desplazarse hacia abajo, reaparece al desplazarse hacia arriba), Siempre (fijado permanentemente en la parte superior), Reducir (se encoge al desplazarse) o Nunca (se desplaza con la página)), más Ancho (limitado por página o de borde a borde), esquema de colores, relleno superior e inferior, y un campo de CSS personalizado. Máximo 1 encabezado por página.
Pie de página
La sección inferior de cada página. Puedes agregar, eliminar y reordenar bloques dentro del pie de página. Bloques de pie de página disponibles:
- Sobre nosotros: un área de historia de marca que contiene tu logo, bloques de texto, información de contacto y grupos de diseño opcionales. Admite controles de dirección, alineación, espacio, ancho y relleno. Máximo 1 por pie de página.
- Menú: un menú de navegación mostrado como una lista de enlaces. Selecciona un menú que hayas creado en Menús. Máximo 1 por pie de página.
- Iconos de redes sociales: una fila de iconos de plataformas sociales. Plataformas compatibles: Facebook, Instagram, Threads, X (Twitter), TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp y Telegram. Configura el tamaño del icono (12–64 px), el espacio (0–48 px), la forma (ninguna, círculo, redondeado o cuadrado), el estilo de relleno de forma (plano o contorno), el tamaño del contenedor (26–80 px), la paleta de colores (colores de marca, monocromático o un color personalizado) y el efecto al pasar el ratón (ninguno, marca, escala, elevación u opacidad). Máximo 1 por pie de página.
- Iconos de pago: muestra automáticamente iconos para los métodos de pago que hayas habilitado en tu tienda (Visa, Mastercard, PayPal, Stripe, Apple Pay, etc.). No se necesita configuración. Máximo 1 por pie de página.
- Enlaces de privacidad: enlaces a tus páginas legales (Política de privacidad, Términos de servicio, Política de reembolso, Política de envío), generados automáticamente a partir de las políticas de tu tienda. Establece el tamaño de fuente (12–20 px) y el caso del texto (predeterminado o mayúsculas). Máximo 1 por pie de página.
- Copyright: muestra el año del copyright y el nombre de tu tienda, con una línea opcional de "Powered by Storeep". Establece el tamaño de fuente (12–20 px), el caso del texto y si se muestra la atribución de Storeep. Máximo 1 por pie de página.
- Texto, Divisor y Grupo: los mismos componentes de diseño disponibles en otras secciones. Ver Componentes de diseño para más detalles.
Secciones de la página de inicio
Hero
Una sección de banner de pantalla completa con fondo de medios (imagen o video). Dos modos de visualización: Simple (un fondo) y Dividido (dos paneles de medios uno al lado del otro). Presets de altura: Pequeño (50% de la altura de la ventana gráfica), Mediano (70%), Grande (90%), Pantalla completa (altura completa de la pantalla), Imagen (adopta el tamaño natural de tus medios para que toda la imagen sea visible) o Personalizado (un porcentaje definido por el usuario). Los bloques de contenido se superponen sobre los medios y admiten los mismos controles de diseño que un grupo: dirección, alineación, espacio y relleno. Se puede aplicar un overlay con relleno sólido o degradado sobre los medios. Cuando se coloca directamente después del encabezado y la opción de Encabezado transparente está habilitada, el encabezado se mezcla con el hero y usa su esquema de colores.
Productos destacados
Una cuadrícula de productos o carrusel obtenido de tu catálogo. Opciones de fuente: Manual (tú eliges productos específicos), Más recientes (los productos más recientemente agregados) o Más vendidos (productos ordenados por volumen de ventas). Configura el número de columnas en escritorio (1–8), columnas en móvil (1 o 2), espacio entre tarjetas, ancho de sección y esquema de colores. Contiene un bloque de tarjeta de producto que define el diseño de cada tarjeta (imagen, título, precio, puntuación y botón de compra), más bloques opcionales de texto y divisor encima o debajo de la cuadrícula.
Presentación de diapositivas
Un carrusel de imágenes o videos de ancho completo. Cada diapositiva puede tener su propio fondo de medios, overlay y bloques de contenido (texto, botón, grupo y divisor). Hasta 7 diapositivas por presentación, con un máximo de 2 secciones de presentación por página. Disponible solo en la página de inicio.
Boletín
Un formulario de suscripción por correo electrónico. Modos de visualización: En línea (incrustado en la página) o Fijo (un widget flotante anclado a la esquina inferior). Los bloques incluyen texto (encabezados y descripciones), un campo de entrada de correo electrónico (con etiqueta opcional, marcador de posición y aviso de privacidad), un botón de suscripción (etiqueta de icono o texto, con opción de fusionarlo visualmente con el campo de entrada), divisores y grupos. También puedes configurar el encabezado y el mensaje de éxito mostrados después de que alguien se registre.
Secciones de la página de producto
Información del producto
La sección principal de detalles del producto. Contiene la galería de medios del producto (imágenes y videos), el área de detalles del producto (título, precio, insignia de ahorro, variantes, formulario de compra, botón de pedido por WhatsApp y temporizador de cuenta regresiva) y el bloque de descripción del producto. El formulario de compra admite un diseño en línea o emergente, un control de resumen del pedido, texto personalizado de encabezado y subencabezado, etiquetas de botones personalizadas para Agregar al carrito y Comprar ahora, un hook de mensaje de regalo y un temporizador de cuenta regresiva para el vencimiento del descuento. Esta sección es obligatoria en la página de producto.
Productos relacionados
Una cuadrícula de productos que muestra productos relacionados con el que se está viendo actualmente, basada en la misma colección o curada manualmente. Usa el mismo sistema de tarjeta de producto que la sección de Productos destacados.
Reseñas
Muestra las reseñas de clientes para el producto actual. Contiene un bloque de resumen de reseñas (puntuación de estrellas promedio, conteo total de reseñas y barras opcionales de distribución de estrellas) y un bloque de formulario de reseña (un botón que abre un panel de envío de reseñas). Las reseñas se moderan antes de publicarse.
Secciones de la página de destino
Información de destino
La sección de ventas del producto para las páginas de destino. Similar a Información del producto pero diseñada para una página de ventas dedicada: combina el formulario del producto, los medios, la descripción y los bloques de contenido relacionado en un diseño enfocado único. Esta sección es obligatoria en la página de destino.
Secciones de la página de colección
Productos de la colección
La cuadrícula de productos para una página de colección. Los productos mostrados se obtienen de la colección a la que navegó el comprador. Puedes configurar columnas en escritorio (1–8), columnas en móvil (1 o 2), espacio entre tarjetas, opciones de ordenamiento, una barra lateral de filtros y el diseño de la tarjeta de producto. Esta sección es obligatoria en la página de colección.
Secciones de la página de búsqueda
Productos de búsqueda
La cuadrícula de productos para los resultados de búsqueda. Muestra los productos que coinciden con la consulta de búsqueda del comprador. Usa la misma configuración de tarjeta y cuadrícula que la sección de Productos de la colección. Esta sección es obligatoria en la página de búsqueda.
Secciones de la página de contacto
Contacto
Un formulario de contacto con campos de nombre, correo electrónico, asunto y mensaje. Puedes agregar bloques de texto y grupos de diseño encima o debajo del formulario. La etiqueta del botón de envío y el estilo (primario o secundario) son configurables. Los mensajes enviados se envían a la dirección de correo electrónico de tu tienda. Esta sección es obligatoria en la página de contacto.
Secciones disponibles en todas las páginas
Texto
Una sección de texto independiente para un encabezado, párrafo o bloque de contenido formateado. Hasta 3 secciones de texto por página. Ver Componentes de diseño para todas las configuraciones de texto.
Imagen
Una sección de imagen independiente. Hasta 3 secciones de imagen por página. Configura el ancho, la alineación, la relación de aspecto (automática, retrato 3:4, cuadrado 1:1 o paisaje 4:3), el ajuste (cubrir o contener), el redondeo de esquinas, el relleno y un enlace de clic opcional.
Divisor
Una línea separadora horizontal o vertical. Hasta 10 secciones de divisor por página. Configura el grosor, la longitud (como porcentaje del contenedor), el estilo de las extremidades (recto o redondeado), la alineación, el esquema de colores, el ancho (ajustar o rellenar) y el relleno. Ver Componentes de diseño para más detalles.
Preguntas frecuentes
Una sección de preguntas frecuentes con estilo de acordeón. Agrega tantos pares de pregunta y respuesta como necesites. Configura el esquema de colores, el ancho de la sección y el relleno.
Código personalizado
Una sección para HTML, CSS y JavaScript sin procesar. Tu HTML se inserta dentro de un contenedor único en la página. El CSS que escribas se limita automáticamente a ese contenedor para que tus estilos no puedan afectar otras secciones. JavaScript se ejecuta en un ámbito aislado y recibe el contenedor como su única referencia, cargado después de que el contenido de la página esté listo para que tus consultas se resuelvan correctamente. Máximo 2 secciones de código personalizado por página. Útil para incrustar widgets de terceros, animaciones personalizadas o cualquier otra cosa que las secciones estándar no puedan expresar.