Producto destacado

Agregue una galería de productos, controles de compra y contenido de apoyo a cualquier página.

Todas las secciones Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Shopify: 9 consejos para optimizar las páginas de producto y aumentar las ventas

Vídeo de Shopify Academy: Personalizar tu tienda

Muestre una experiencia completa de detalle de producto y compra en casi cualquier página. Esta sección combina la galería de un producto seleccionado, la información del producto y bloques de contenido flexibles para que pueda crear páginas de destino enfocadas, promociones en la página de inicio o funciones editoriales de producto en torno a un solo artículo. Para obtener una visión general más amplia de cómo funcionan las secciones y los bloques en el editor de temas, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Empiece seleccionando el Producto. Esa elección activa la galería, el título, el precio, la descripción, las variantes, los controles sensibles al inventario y las acciones de compra que se usan en toda la sección.

Si no se selecciona ningún producto, el diseño aún puede mostrar bloques de contenido generales, pero los bloques específicos del producto y los controles de compra no serán útiles.

Ajustes de galería

Use los ajustes de galería para definir cómo se muestran los medios del producto en escritorio y en móvil. Puede elegir relaciones de aspecto separadas para cada dispositivo, controlar el equilibrio de columnas en escritorio y colocar la galería a la izquierda o a la derecha de la información del producto.

El estilo de la galería cambia rápidamente la sensación de la sección. Los diseños con varias imágenes funcionan bien cuando los compradores necesitan comparar detalles entre varias fotos, mientras que Diapositivas crea una presentación más compacta y controlada. Ninguno es útil cuando desea un diseño centrado primero en el texto o planea depender de bloques separados de imagen y video.

El comportamiento de la imagen de variante determina cómo responde la galería cuando los compradores seleccionan una variante diferente. Predeterminado mantiene los medios vinculados a la variante seleccionada, Ninguno deja la galería sin cambios y Solo variante crea una experiencia más enfocada al mostrar solo las imágenes de la variante seleccionada.

Los controles de zoom y video refinan la experiencia de navegación. Use el zoom lightbox cuando el detalle de la imagen sea importante y use la reproducción automática con moderación para que el movimiento apoye el producto en lugar de distraer del proceso de compra.

Ajustes de presentación

Estos ajustes se aplican cuando la galería usa un diseño de presentación. Puede controlar la visibilidad de las diapositivas, el estilo y la velocidad de la animación, el comportamiento de reproducción automática, el bucle y si se muestra la navegación o la paginación.

Los ajustes de columna de la presentación en escritorio y móvil afectan cuánto de la siguiente diapositiva es visible. Los valores más pequeños se sienten más como un carrusel tradicional de una sola diapositiva, mientras que los valores más grandes sugieren que hay más medios disponibles.

La animación de desvanecimiento crea una presentación más tranquila y editorial, pero también fuerza un diseño de una sola diapositiva y oculta los estilos de paginación que dependen del movimiento entre varias diapositivas. Use el estilo de animación predeterminado cuando quiera una galería con una sensación más interactiva.

Tipos de bloque admitidos

App
Accordion
Buy buttons
Benefits
Button
Contact form
Complementary products
Custom liquid
Description
Heading
Icon with text
Image
Price
Quantity selector
Rich text
Separator
Social media icons
Title
Testimonial
Variant selector
Video

Guía de bloques

Bloques principales de compra del producto

Estos bloques crean el flujo de compra principal en esta sección:

Title para el nombre del producto y las acciones opcionales de compartir o imprimir.
Price para los precios y los mensajes opcionales de políticas.
Description para la descripción principal del producto, incluida una opción expandible para textos más largos.
Variant selector para la selección de opciones como talla o color.
Quantity selector para los controles de cantidad y los mensajes sobre existencias.
Buy buttons para el botón de añadir al carrito y las acciones de compra relacionadas.

Una pila predeterminada sólida es Title, Price, Description, Variant selector, Quantity selector y Buy buttons. Empiece por ahí y luego agregue bloques de apoyo solo cuando ayuden a los compradores a decidir más rápido.

Selector de variante

El bloque Variant selector controla cómo eligen los compradores las opciones del producto. Consulte Selector de variantes.

Use menús desplegables cuando quiera un diseño compacto. Use pills o swatches cuando la opción sea visual o cuando importe una comparación más rápida.

Si activa swatches de color o de imagen, asegúrese de que los nombres de las opciones coincidan con los nombres reales de sus opciones de variante. Los swatches de imagen sustituyen a los swatches de color cuando ambos están configurados para la misma opción.

Botones de compra

El bloque Buy buttons añade la acción principal de compra. Consulte Botones de compra.

Mantenga esta área enfocada. Los botones extra de pago, los detalles de recogida, los mensajes de envío, los iconos de pago y los mensajes de cuotas pueden ser útiles, pero demasiados extras alrededor del botón de añadir al carrito pueden debilitar la acción principal.

Productos complementarios

El bloque Complementary products muestra artículos relacionados que combinan bien con el producto destacado. Consulte Productos complementarios.

Esto funciona mejor para complementos, accesorios, recambios o ventas cruzadas rutinarias. Puede presentar los artículos en una cuadrícula o presentación y ajustar el diseño de la tarjeta para que se adapte a la página.

Bloques de contenido de apoyo

Use bloques de apoyo para responder objeciones, aportar credibilidad o dar más contexto al producto.

Accordion para preguntas frecuentes, materiales, detalles de cuidado, información de envío o resúmenes de políticas. Consulte Acordeón.
Benefits y Icon with text para puntos de valor rápidos como garantías, ventajas de entrega o aspectos destacados del producto.
Testimonial para prueba social cerca de los controles de compra.
Image y Video para medios adicionales fuera de la galería principal.
Button, Rich text, Heading y Separator para una estructura de página personalizada.

Bloques avanzados y de utilidad

Algunos bloques se reservan mejor para casos de uso específicos:

App para funciones de producto impulsadas por aplicaciones.
Custom liquid para salida personalizada avanzada o integraciones.
Contact form para flujos de consulta, pedido personalizado o preventa.
Social media icons para enlaces de marca y comunidad cerca del producto.

Ajustes estándar de sección

Ajustes de espaciado

ajustes de espaciado controlan el espacio encima y debajo de esta sección. Use un espaciado más ajustado cuando esta función de producto se encuentre dentro de una página de destino densa, y añada más espacio cuando deba destacar como una zona de conversión principal.

Ajustes de fondo de sección

ajustes de fondo de sección le permiten añadir un color, degradado, imagen o video detrás de toda la sección. Esto es útil cuando quiere que la función de producto se sienta como una franja principal o como un área promocional claramente separada.

Tenga cuidado con los fondos muy detallados detrás de galerías de productos muy cargadas. Un contraste fuerte y un espaciado adecuado importan más a medida que el diseño se vuelve más visual.

Ajustes de separador

ajustes de separador añaden una línea divisoria superior o inferior a la sección. Úselos para separar esta función de producto del contenido circundante sin añadir otro elemento de diseño completo.

Ajustes de visibilidad

ajustes de visibilidad controlan si la sección aparece en escritorio, en móvil o en ambos. Esto es especialmente útil cuando quiere diseños de función de producto distintos para diferentes tamaños de pantalla.

Ajustes de ancho

ajustes de ancho controlan el ancho máximo del contenido y el ancho exterior de la sección. Estos ajustes afectan notablemente al equilibrio de la galería, la legibilidad del texto y lo amplio que se siente el área de compra.

La vista previa del editor puede hacer que los cambios de ancho parezcan más restringidos de lo que aparecen en la página publicada, así que compruebe la tienda online real antes de finalizar el diseño.

Notas de uso

Construya primero el recorrido de compra. Empiece con Title, Price, Variant selector, Quantity selector y Buy buttons antes de añadir contenido extra.
Adapte la galería al producto. Use diseños con varias imágenes para productos con mucho detalle y presentaciones para presentaciones más compactas y controladas.
Mantenga claro el comportamiento de las variantes. Si las variantes tienen imágenes distintas, combine el Variant selector con un ajuste de galería que haga evidentes esas diferencias visuales.
Use bloques de apoyo para reducir la duda. Añada acordeones, beneficios, testimonios o productos complementarios cuando ayuden a los compradores a tomar la siguiente decisión más rápido.
Revise con cuidado el diseño móvil. Esta sección se contrae en una experiencia de una sola columna en pantallas pequeñas, así que compruebe el orden de los medios, la longitud del contenido y la prominencia del botón antes de publicar.
Compruebe tanto los estados con diapositivas como sin diapositivas. Cuando añada bloques o cambie los estilos de la galería, la sección puede pasar de un diseño de producto simple a una experiencia más centrada en el contenido o impulsada por un carrusel.
Trate las recomendaciones como condicionales. El contenido de productos complementarios depende de un contexto de producto adecuado y de recomendaciones disponibles, así que deje espacio para que el bloque pueda no aparecer sin romper el diseño.
Compare por separado escritorio y móvil. El diseño, la alineación, la visibilidad de los medios y los controles de presentación pueden comportarse de forma diferente según los puntos de ruptura, así que confirme ambas vistas antes de publicar.
Use de forma intencionada las anulaciones visuales explícitas. Los valores vacíos o con estilo predeterminado suelen mantener el estilo de reserva del tema, mientras que los colores personalizados, los degradados o los medios separados para escritorio y móvil hacen que la sección sea más autónoma.

Align v2.0