Páginas de productos

Las páginas de producto son el lugar donde muestras información sobre los productos que vendes en la tienda y donde los clientes pueden comprar los productos.

De forma predeterminada, las páginas de producto tienen las secciones Información del producto y Productos relacionados en el editor de temas.

En esta página

Sección Información del producto

Sección Información del producto

La sección Información del producto muestra los detalles de los productos, como el nombre, la descripción, el precio y las imágenes.

Configuración de la sección de información del producto

La configuración de la sección Información del producto
Configuración	Descripción
Activar contenido fijo en computadoras	Cuando te desplazas por una página, la columna de información del producto no comienza a desplazarse hasta que todas las imágenes se hayan desplazado.
Esquema de colores	Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Ancho del elemento multimedia en computadora	Establece el ancho de los elementos multimedia del producto en su página para computadoras de escritorio. Selecciona entre Pequeño, Mediano o Grande.
Ajustar el elemento multimedia a la altura de la pantalla	Al seleccionar esta opción se establece una altura máxima para elementos multimedia según la altura de la ventana del navegador de cualquier dispositivo.
Ajuste de elemento multimedia	Selecciona Original para mantener la relación de aspecto original multimedia o Rellenar para adaptar el elemento multimedia a su contenedor.
Diseño para computadora	Establece el diseño de los elementos multimedia de los productos en las computadoras de escritorio. Elige entre las siguientes opciones: Apilados: muestra los elementos multimedia de los productos apilados de forma vertical en la página. Cuando haces clic en un tipo de elemento multimedia apilado, abres un cuadro de diálogo emergente con una vista más grande del elemento multimedia seleccionado. Dos columnas: muestra los elementos multimedia de los productos como apilados, pero en dos columnas. Miniaturas: si un producto tiene más de una imagen u otro tipo de elemento multimedia, los elementos restantes aparecerán como miniaturas debajo del elemento multimedia principal del producto. El cliente puede hacer clic en cualquier miniatura para mostrarla como el elemento multimedia principal del producto. Carrusel de miniaturas: si el producto tiene más de una imagen u otro tipo de elemento multimedia, los elementos restantes aparecen como miniaturas en un carrusel debajo del elemento multimedia principal del producto. El cliente puede hacer clic en cualquier miniatura para mostrarla como el elemento multimedia principal del producto o usar las flechas de navegación del carrusel para mostrar otros elementos multimedia.
Posición del contenido multimedia en computadoras de escritorio	Selecciona si quieres que el elemento multimedia del producto se muestre en el lado izquierdo o derecho de la página en las computadoras de escritorio.
Ampliar imagen	Elige el zoom de la imagen en el escritorio: Abrir lightbox: el cliente puede hacer clic para mostrar una versión más grande de la imagen. Esta es la funcionalidad predeterminada para los elementos multimedia del producto que se muestran en los dispositivos móviles. Hacer clic y pasar sobre la imagen: el cliente puede hacer clic para ampliar la imagen y pasar sobre ella con el cursor a fin de ver diferentes secciones ampliadas. La ampliación al pasar sobre la imagen con el cursor se desactiva cuando se vuelve a hacer clic sobre ella o cuando el cursor abandona el espacio que la contiene. Cuando esta configuración está activada y el usuario opera desde un dispositivo móvil, la imagen se abre de forma predeterminada en un modal (lightbox) al hacer clic en ella. Sin zoom: esta opción desactiva el zoom en las imágenes. Es adecuado para imágenes que no tienen alta resolución y no se muestran bien al ampliarlas.
Diseño para móviles	Establece el diseño de los elementos multimedia del producto en los dispositivos móviles. Elige entre las siguientes opciones: Dos columnas: muestra dos elementos multimedia del producto uno al lado del otro, con la funcionalidad de carrusel para desplazarse y ver otros elementos multimedia. Mostrar miniaturas: muestra un solo elemento multimedia principal del producto, con el carrusel de miniaturas que se desplaza abajo. Ocultar miniaturas: muestra un solo elemento multimedia principal del producto, con el carrusel que se desplaza abajo, pero sin que se muestren las miniaturas.
Ocultar los elementos multimedia de las demás variantes tras seleccionar una de ellas	Cuando se selecciona una variante, las imágenes de otras variantes dejan de mostrarse. Las imágenes vuelven a aparecer cuando se deselecciona la variante.
Activar la reproducción de video en bucle	Para cualquier video que tengas en los elementos multimedia del producto, esta configuración reproduce dicho video en un bucle a fin de que se vuelva a reproducir automáticamente cuando finalice.
Relleno superior	Establece la cantidad de espacio en la parte superior de la sección.
Relleno inferior	Establece la cantidad de espacio en la parte inferior de la sección.

Además de la configuración de la sección Información del producto, también puedes ver y personalizar algunas de las opciones de la configuración del tema para los emblemas de producto, y puedes agregar tu propio CSS personalizado específico de sección.

Bloques de información de productos

Puedes usar los siguientes bloques con la sección Información del producto:

Bloque de texto

El bloque Texto puede usarse para mostrar texto estático o datos variables con fuentes dinámicas. Por ejemplo, puedes agregar texto que muestre un mensaje de marketing, como Envío gratis para pedidos superiores a 100 USD, que luego se muestra en cada producto. Puedes utilizar el bloque de texto para agregar una fuente dinámica, que puede cambiar según el producto que se esté visualizando. Por ejemplo, puedes conectar el campo Proveedor del producto en el bloque Texto como una fuente dinámica y se mostrará el proveedor específico del producto.

La configuración del bloque Texto en la sección Información del producto
Configuración	Descripción
Texto	Un campo de texto para agregar información adicional a la página de producto.
Estilo de texto	Cambia el estilo del texto. Elige entre las siguientes opciones: Cuerpo - Cambia el texto al estilo de párrafo. Subtítulo - Cambia el texto al estilo de subtítulos, que es un poco más grande que el texto del estilo de párrafo. Mayúsculas: cambia el texto para que sea más pequeño que el texto del estilo de párrafo y pone todo el texto en letras mayúsculas.

#### Bloque de título

El bloque Título muestra el nombre del producto que se está visualizando. Este bloque no tiene opciones de configuración personalizables.

Bloque de precios

El bloque Precio muestra la información sobre el precio del producto que se está visualizando, como el precio y el precio de comparación. Este bloque no tiene opciones de configuración personalizables.

Bloque de selector de variantes

El bloque selector de variante muestra cualquier opción de la variante para el producto que se está viendo. El selector de variante se muestra solo para productos que tienen opción de variante. Si eliminas este bloque y tienes producto con opción de la variante, tu cliente no podrá elegir ni comprar la opción de la variante que quiere. Puedes agregar un bloque selector de variantes que muestre un desplegable o pastillas y personalizar la forma de las muestras de color. Más información sobre cómo agregar muestra color para tu variante con metacampos de categoría.

La configuración del bloque Selector de variante en la sección Información del producto
Configuración	Descripción
Estilo	Elige la forma en que se muestran las variantes de producto a los clientes. Elige entre las siguientes opciones: Menú desplegable: muestra las opciones de la variante en menús desplegables. Estas pueden aparecer solo como muestra o texto. Botones: muestra las opciones de la variante como botones que puedes seleccionar. Estas pueden aparecer solo como muestra o texto.
Muestra	Elige la forma en que aparecen las muestras de color para los clientes. Elige entre las siguientes opciones: Círculo: exhibe la muestra de color como un círculo que puedes seleccionar. Cuadrado: exhibe la muestra de color como un cuadrado que puedes seleccionar. Ninguna: no se exhiben muestras de color.

#### Bloque del selector de cantidad

El bloque Selector de cantidad muestra un campo de número editable y en el que se puede hacer clic, que los clientes pueden usar para cambiar cuántas unidades de un producto desean comprar. Este bloque no tiene opciones de configuración personalizables.

Bloque de botones de compra

El bloque Botones de compra muestra el botón Agregar al carrito y la información sobre el retiro en tienda. También puede mostrar cualquier botón de pago dinámico que tengas en la tienda.

La configuración del bloque Botones de compra en la sección Información del producto
Configuración	Descripción
Mostrar botones de pago dinámico	Muestra cualquier opción de pago dinámico que activaste en la configuración de pago.
Mostrar el formulario de información del destinatario para las tarjetas de regalo	Muestra una casilla de verificación opcional en las tarjetas de regalo que tengas para permitir a los clientes enviarlas al destinatario, además de programarlas, junto con un mensaje personal.

#### Bloque de descripción

El bloque Descripción muestra la descripción del producto que se está visualizando. Este bloque no tiene opciones de configuración personalizables.

Compartir bloque

El bloque Compartir muestra un enlace en el que los clientes hacen clic para compartir el producto en sus redes sociales.

La configuración del bloque Compartir en la sección Información del producto
Configuración	Descripción
Texto	El texto en el que los clientes hacen clic para compartir el producto en sus redes sociales.

#### Bloque SKU

El bloque SKU muestra el código de artículo (SKU) asociado al producto o la variante, cuando sea relevante. Más información sobre Números SKU.

La configuración del bloque SKU en la sección Información del producto
Configuración	Descripción
Estilo de texto	Cambia el estilo del texto. Elige entre las siguientes opciones: Cuerpo - Cambia el texto al estilo de párrafo. Subtítulo - Cambia el texto al estilo de subtítulos, que es un poco más grande que el texto del estilo de párrafo. Mayúsculas: cambia el texto para que sea más pequeño que el texto del estilo de párrafo y pone todo el texto en letras mayúsculas.

#### Bloque de estado de inventario

El bloque Estado del inventario muestra el estado del inventario del producto. Puedes mostrar permanentemente el estado del inventario y el número de inventario restante, o solo mostrarlo después de que el recuento de inventario de productos llegue al límite que estableciste. El estado del inventario se muestra solo en el caso de los productos que tienen activado el seguimiento de inventario.

La configuración del bloque Estado de inventario en la sección Información del producto
Configuración	Descripción
Estilo de texto	Cambia el estilo del texto. Elige entre las siguientes opciones: Cuerpo - Cambia el texto al estilo de párrafo. Subtítulo - Cambia el texto al estilo de subtítulos, que es un poco más grande que el texto del estilo de párrafo. Mayúsculas: cambia el texto para que sea más pequeño que el texto del estilo de párrafo y pone todo el texto en letras mayúsculas.
Umbral de inventario bajo	Usa el control deslizante de rango para establecer un límite para cuando los productos se muestren con el mensaje Existencias bajas. Selecciona un número entre 0 y 100. Si estableces el control deslizante en cero, el mensaje En existencias se mostrará hasta que el producto esté completamente agotado.
Mostrar recuento de inventario	Selecciona esta opción cuando desees mostrar el recuento de inventario para los productos.

#### Bloque Liquid personalizado

El bloque Liquid personalizado muestra el código Liquid o HTML personalizado que agregas al bloque.

La configuración del bloque Liquid personalizado en la sección Información del producto
Configuración	Descripción
Código de Liquid	Muestra el contenido que se renderiza mediante el código Liquid o HTML que introduces.

#### Bloque de filas desplegables

El bloque Fila desplegable muestra una fila extensible y desplegable con un título. Cuando un cliente hace clic en el ícono, el título o la flecha hacia abajo, la fila se expande para mostrar contenido adicional.

La configuración del bloque Fila desplegable en la sección Información del producto
Configuración	Descripción
Encabezado	El título de la fila, que se muestra cuando la fila se contrae y se expande.
Icono	Selecciona un ícono para mostrar con la fila desplegable o Ninguno a fin de exhibir solo el título de la fila.
Contenido de fila	Introduce el contenido para la fila con el editor de texto enriquecido. El contenido se muestra solo cuando se expande la fila.
Contenido de fila de la página	Agrega contenido de una página a la fila. Esto muestra solo el contenido que agregas a una página en la sección Tienda online > Páginas del panel de control de Shopify. No muestra el contenido que agregas en la plantilla de páginas en el editor de temas. El contenido que ingresas en el campo Contenido de fila se muestra arriba del contenido de la página que agregas.

#### Bloque emergente

El bloque Ventana emergente muestra el texto en el que se puede hacer clic que abre un cuadro de diálogo emergente cuando se hace clic.

La configuración del bloque Ventana emergente en la sección Información del producto
Configuración	Descripción
Etiqueta de enlace	El texto en el que se puede hacer clic que los clientes usan para mostrar el cuadro de diálogo emergente.
Página	Selecciona la página desde la que desees mostrar el contenido en el cuadro de diálogo emergente. Esto muestra solo el contenido que agregas a una página en la sección Tienda online > Páginas del panel de control de Shopify. No muestra el contenido que agregas en la plantilla de páginas en el editor de temas.

#### Bloque de calificación de productos

El bloque Calificación del producto muestra la calificación promedio del producto en estrellas con la cantidad de reseñas entre paréntesis, por ejemplo: ★★★★★ (8).

Para mostrar las calificaciones de los productos, debes usar una aplicación de reseñas de productos y definiciones de metacampo para reviews.rating_count y reviews.rating.

Este bloque no tiene opciones de configuración personalizables.

Bloque de productos complementarios

El bloque Productos complementarios muestra los productos complementarios que configuras con la aplicación Shopify Search & Discovery.

La configuración del bloque Productos complementarios en la sección Información del producto
Configuración	Descripción
Encabezado	El título del bloque.
Mostrar como una fila plegable	Cuando se selecciona, el contenido aparece contraído en una fila. Cuando un cliente hace clic en un título, la fila se expande para mostrar contenido adicional.
Icono	Selecciona un ícono que vaya con el título cuando los productos complementarios se muestren como una fila desplegable.
Máximo de productos para mostrar	Selecciona la cantidad máxima de productos complementarios que se mostrarán. Elige un número entre 1 y 10.
Cantidad de productos por página	Selecciona la cantidad de productos complementarios que desees mostrar por cada página con presentación de diapositivas. Elige un número entre uno y cuatro.
Estilo de paginación	Establece el estilo de navegación de la presentación de diapositivas que aparece debajo de los productos. Elige entre las opciones Puntos, Contador o Números.
Relación de aspecto de imagen	Establece la relación de aspecto de las imágenes de la tarjeta de producto. Elige entre las opciones Vertical o Cuadrado.
Activar botón de agregado rápido	Si activas el botón de agregado rápido, los clientes podrán agregar un artículo a su carrito desde la tarjeta del producto con una de las siguientes opciones: Agregar al carrito: para los productos con una sola variante. Cuando un cliente hace clic en el botón, el producto se agrega automáticamente a su carrito. Elegir opciones: para los productos con variantes. Cuando un cliente hace clic en el botón, se muestra un cuadro de diálogo emergente para que seleccione la variante y continúe con la compra.

#### Ícono con bloque de texto

El bloque Ícono con texto muestra hasta tres íconos con el texto que los acompaña. Elige de una lista de íconos preinstalados o usa una imagen que subas.

La configuración del bloque Ícono con texto en la sección Información del producto
Configuración	Descripción
Diseño	Elige entre las opciones de diseño Horizontal o Vertical para el bloque.
Primer ícono	Selecciona un ícono para mostrar en el bloque o Ninguno a fin de exhibir solo un título.
Primera imagen	Elige tu propia imagen para usar en lugar de un ícono.
Primer encabezado	Agrega un título para tu primer ícono o primera imagen.
Segundo ícono	Selecciona un ícono para mostrar en el bloque o Ninguno a fin de exhibir solo un título.
Segunda imagen	Elige tu propia imagen para usar en lugar de un ícono.
Segundo encabezado	Agrega un título para tu segundo ícono o segunda imagen.
Tercer ícono	Selecciona un ícono para mostrar en el bloque o Ninguno a fin de exhibir solo un título.
Tercera imagen	Elige tu propia imagen para usar en lugar de un ícono.
Tercer encabezado	Agrega un título para tu tercer ícono o tercera imagen.

## Sección Productos relacionados

Según el producto que se esté visualizando, la sección Productos relacionados muestra productos similares, con una descripción similar o que se compran frecuentemente junto con el que se está visualizando. Puedes agregar manualmente tus propios productos a la sección Productos relacionados con la aplicación Shopify Search & Discovery.

Las recomendaciones de productos que se muestran en la sección se basan en el tipo de recomendación que configuraste. Puedes configurar recomendaciones de productos relacionadas basadas en productos similares, productos que a menudo se compran juntos, o productos de colecciones relacionadas, y luego los productos relevantes se mostrarán en la sección. Los clientes pueden agregar productos relevantes a sus pedidos o seleccionar productos similares como opciones de inventario para las opciones agotadas.

Las recomendaciones de productos complementarios son productos que combinan bien como complementos.

Shopify utiliza información sobre descripciones y categorizaciones de productos, historial de pedidos e interacciones con la tienda online para generar las recomendaciones más relevantes. Obtén más información sobre los datos utilizados para las recomendaciones de productos en la documentación de desarrollo de temas de Shopify.

Configuración de la sección Productos relacionados

La configuración de la sección Productos relacionados
Configuración	Descripción
Encabezado	El título de la sección
Tamaño del título	El tamaño del texto del título. Elige entre Pequeño, Mediano, Grande, Extra grande, or Extra extra grande.
Máximo de productos para mostrar	Establece la cantidad máxima de productos relacionados que se mostrarán. Elige un número entre 2 y 10.
Número de columnas en la versión para computadora	Establece el número de columnas que deben mostrar los productos en las computadoras de escritorio. Elige un número entre uno y seis.
Esquema de colores	Un conjunto de colores que puedes aplicar a esta sección. Obtén más información sobre los esquemas de colores.
Relación de aspecto de imagen	Establece la relación de aspecto para las imágenes destacadas de los productos relacionados que se muestran. Elige entre las siguientes opciones: Adaptar a la imagen: utiliza la relación de aspecto de las imágenes. Esto impide que las imágenes se recorten. Retrato - Recorta las imágenes para usar una proporción de 2:3. Cuadrado - Recorta las imágenes para usar una proporción de 1:1.
Forma de la imagen	Elige una de las siguientes formas para las imágenes del producto relacionado: Predeterminada: cambia la imagen del producto a una forma de rectángulo. Arco: le da una forma curva a la parte superior de la imagen del producto. Gota: cambia la imagen del producto a una de las seis formas aleatorias de gota que muestra una animación única al pasar el cursor. Comillas angulares hacia la izquierda: cambia la imagen del producto a una forma de comilla angular que tiene una curva cerrada hacia la izquierda. Comillas angulares hacia la derecha: cambia la imagen del producto a una forma de comilla angular que tiene una curva cerrada hacia la derecha. Diamante: cambia la imagen del producto a una forma de diamante con cuatro lados. Paralelogramo: cambia la imagen del producto a una forma que tiene dos pares de líneas paralelas. Redonda: cambia la imagen del producto a una forma de círculo u óvalo que muestra una animación única al pasar el cursor.
Mostrar segunda imagen al pasar el cursor	Cuando el cliente pasa el cursor sobre las imágenes del producto en una computadora de escritorio, esta opción muestra la segunda imagen del producto, si es que la hay.
Mostrar proveedor	Muestra el proveedor de cada producto.
Mostrar calificación de productos	Muestra la calificación promedio del producto en estrellas con la cantidad de reseñas entre paréntesis, por ejemplo: ★★★★★ (8). También requiere una aplicación de reseñas de productos y definiciones de metacampo para `reviews.rating_count` y `reviews.rating`.
Número de columnas en la versión para móviles	Establece el número de columnas que deben mostrar los productos en los dispositivos móviles. Elige una o dos columnas.
Relleno superior	Establece la cantidad de espacio en la parte superior de la sección.
Relleno inferior	Establece la cantidad de espacio en la parte inferior de la sección.