La sección Product info es la parte principal de tu página de producto. Muestra las imágenes del producto a un lado y los detalles del producto (nombre, descripción y formulario de pedido) al otro. Es obligatoria en la página de producto, así que puedes darle estilo, pero no eliminarla.
Dónde encontrarla
- Abre el constructor y elige Product page en la pestaña Pages.
- Elige un producto para la vista previa. Esto solo cambia lo que muestra la vista previa: tu diseño se aplica a todos los productos a la vez.
- Haz clic en Product info en la vista previa o en la pestaña Sections.
La sección tiene dos partes fijas, Media y Details. No puedes quitarlas ni moverlas, solo configurarlas. En los móviles se apilan: primero las imágenes y luego los detalles.
Ajustes de la sección
- Section width: Page mantiene el contenido dentro del ancho de tu página, Full va de borde a borde.
- Equal columns: activado, las imágenes y los detalles ocupan cada uno la mitad del ancho. Desactivado, cada columna ocupa el espacio que necesita.
- Color scheme, Gap (espacio entre las dos columnas), relleno y Custom CSS.
Media: la galería de imágenes
Muestra las fotos y los vídeos que añadiste al producto.
- Mode: Carousel (una imagen cada vez) o Grid (todas las imágenes a la vez).
- Sticky: Off, Desktop, Mobile o Both. Una galería fija se queda visible mientras los compradores se desplazan por los detalles.
- Grid: Columns (1 o 2), Gap y Full width first (la primera imagen ocupa las dos columnas).
- Carousel: Navigation icons (Arrows, Chevrons o None), Icon background, Desktop pagination (Dots, Counter, Thumbnails) y Mobile pagination (Dots, Counter, Hint, Thumbnails). Hint deja ver un trozo de la siguiente imagen.
- Thumbnails: con miniaturas en escritorio, define Desktop position (Left, Bottom, Right) y Desktop size. En los móviles siempre van debajo de la imagen.
- Aspect ratio: Auto mantiene la forma original de cada imagen. Con Portrait, Square o Landscape, Media fit elige Cover (llena y recorta) o Contain (muestra la imagen completa).
- Enable zoom: los compradores hacen clic o tocan una imagen para verla a pantalla completa.
Details: los bloques junto a las imágenes
Details tiene un Gap y Sticky on desktop (la columna se queda visible mientras los compradores pasan las imágenes). Selecciónalo y haz clic en Add new block para añadir bloques, y arrástralos en el orden que quieras.
- Title: el nombre del producto, una vez por página. Define Width, Alignment, Preset, Line height y Letter spacing. Show above image on mobile pone el nombre (con su valoración) encima de la galería en los móviles. Show reviews above title coloca las estrellas encima del nombre.
- Description: el texto de tu producto. Define el interlineado y el espaciado entre letras. Con Click image to scroll activado, un clic dentro de la descripción lleva al formulario de pedido cuando no hay ningún formulario en pantalla. Los enlaces siguen funcionando.
- Form: el precio, las variantes y el botón de compra. Sus opciones están en ¿Cómo configuro la sección Landing info y el formulario de pedido (botones, cuenta atrás, WhatsApp)?
- Divider: hasta 2 líneas entre bloques.
- Collapsibles, Delivery timeline, Size guide, Badges y Before and after: consulta ¿Cómo añado pestañas desplegables, fechas de entrega, una guía de tallas, insignias o imágenes de antes y después a mi página de producto?
Form y Description son obligatorios: puedes moverlos, pero no eliminarlos.
Sticky button
Mantiene en pantalla una forma de comprar cuando los compradores se alejan del formulario de pedido. Se vuelve a ocultar mientras cualquier formulario está visible. Mode:
- None: sin elemento fijo.
- Bar: una barra en la parte inferior con el precio, la cantidad y el botón de compra.
- Button: un botón flotante que lleva al formulario. Define Label (vacío usa el texto de tu botón de compra), Style (Primary o Secondary), Position (Start, Center, End) y Animation (Pulse, Heartbeat, Shake, Bounce, Glow, Ripple, Wiggle o None).
- Image: una imagen flotante a tu elección que lleva al formulario, con Position y Animation.
En el constructor, el elemento fijo aparece mientras la sección está seleccionada, para que puedas darle estilo.