> ## Documentation Index > Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Diseños de medios en la página de detalles del producto > Elige cómo se muestran las imágenes de tus productos, configura el zoom y la navegación con teclado. Los diseños de medios de producto controlan cómo se muestran las imágenes, los videos y las galerías en la página de detalles del producto de tu tienda. Puedes elegir entre carrusel, cuadrícula, imágenes apiladas o una sola imagen, decidir cómo funciona el zoom y ofrecer navegación con teclado. Elegir bien el diseño ayuda a vender más: el cliente ve el producto desde varios ángulos, amplía los detalles y recorre las fotos con rapidez desde el mouse, la pantalla táctil o el teclado. ## Dónde se configuran Todo se ajusta desde el elemento **Detalles del producto** en el creador de páginas de tu tienda. La configuración se aplica tanto a la página de detalles del producto predeterminada como a las páginas de detalles personalizadas. ## Diseños disponibles | Diseño | Cómo se ve | Cuándo usarlo | | - | - | - | | **Carrusel con miniaturas** | Una imagen grande con una tira de miniaturas debajo o al lado. Se cambia de imagen con las miniaturas o con flechas. | Productos con varias vistas o fotos de estilo de vida. | | **Galería en cuadrícula** | Todas las imágenes en una cuadrícula, visibles a la vez. | Productos con 3 a 6 imágenes donde compararlas lado a lado ayuda, como variantes de color. | | **Apiladas en vertical** | Las imágenes en una columna que se recorre con el scroll. | Tiendas con mucho tráfico móvil o productos con muchas fotos de detalle o instrucciones. | | **Imagen única** | Una sola imagen principal con zoom opcional. | Productos sencillos, productos digitales o tiendas minimalistas. | > [!NOTE] > > Los diseños disponibles y sus nombres pueden variar según el tema de tu tienda. Revisa la configuración del elemento **Detalles del producto** para ver las opciones exactas de tu cuenta. ## Opciones de zoom de imagen El ajuste **Zoom de imagen** define qué pasa cuando el cliente quiere ver más detalle. Funciona con cualquiera de los diseños. | Opción | Qué hace | Ideal para | | - | - | - | | **Abrir en visor** (Open Lightbox) | Al hacer clic en la imagen se abre un visor a pantalla completa con controles de zoom, flechas y tira de miniaturas. Es la única opción con atajos de teclado. | Moda, joyería, electrónica y cualquier producto donde ver el detalle da confianza al comprador. | | **Zoom al hacer clic o pasar el cursor** | Amplía la imagen dentro de la misma página, sin abrir una ventana aparte. | Tiendas que quieren zoom sin interrumpir al cliente con una ventana emergente. | | **Sin zoom** | Las imágenes se muestran a su tamaño normal, sin interacción. | Productos digitales, servicios o imágenes simples donde el zoom no aporta. | ## Navegación con teclado en el visor Cuando el zoom está en **Abrir en visor**, tus clientes pueden recorrer las imágenes con el teclado. Es más rápido para quien compra desde computadora y mejora la accesibilidad para quien navega solo con teclado. | Tecla | Acción | | - | - | | **Esc** | Cierra el visor y vuelve a la página del producto. | | **Flecha derecha** | Pasa a la siguiente imagen. | | **Flecha izquierda** | Vuelve a la imagen anterior. | Así se comporta el visor: * **Foco automático:** al abrirse, el visor recibe el foco del teclado. El cliente puede usar las teclas sin hacer clic dentro primero. * **Navegación circular:** desde la última imagen, la flecha derecha lleva a la primera; desde la primera, la flecha izquierda lleva a la última. * **Sin desplazamiento de la página:** mientras el visor está abierto, las flechas no mueven la página de fondo. * **Miniaturas sincronizadas:** la tira de miniaturas se desplaza sola para mostrar la imagen activa, que aparece resaltada. Los controles de siempre siguen funcionando: flechas en pantalla, clic en miniaturas, icono para cerrar, botones de acercar, alejar y restablecer, y el cambio de vista. ## Cómo configurar los medios del producto **1. Abre tu tienda** Ve a **Sitios → Tiendas** y selecciona la tienda que quieres configurar. **2. Edita la página de detalles del producto** En la lista de páginas, edita la **Página de detalles del producto** o tu página de detalles personalizada. Se abrirá en el creador de páginas. **3. Selecciona el elemento Detalles del producto** Haz clic en el elemento que muestra las imágenes y la información del producto. Desde él se controlan el diseño de medios y el zoom. **4. Elige el diseño de medios** En el panel de configuración, busca la sección **Diseño de medios del producto** o **Medios en escritorio** y elige el diseño que prefieras. **5. Elige el zoom de imagen** En el menú **Zoom de imagen**, selecciona **Abrir en visor**, **Zoom al hacer clic o pasar el cursor** o **Sin zoom**. Para ofrecer atajos de teclado, elige **Abrir en visor**. **6. Guarda y publica** Haz clic en **Guardar** y después en **Publicar**. La configuración se aplica a todos los productos que usan esa página de detalles. **7. Prueba la navegación (opcional)** Abre la vista previa o tu tienda publicada, haz clic en una imagen para abrir el visor y prueba las flechas y la tecla **Esc**. Comprueba también que las flechas no desplacen la página mientras el visor está abierto. ## Buenas prácticas * **Usa imágenes de alta resolución:** al menos 1200 a 1500 píxeles en el lado más largo si el detalle importa, para que el zoom no se vea pixelado. * **Muestra varios ángulos:** frente, espalda, lados y detalles. Más fotos dan más confianza y reducen las preguntas de tus clientes. * **Comprime los archivos:** equilibra calidad y velocidad. Las imágenes pesadas ralentizan la página, sobre todo en celulares. * **Escribe texto alternativo:** describe cada imagen para mejorar la accesibilidad y el SEO. * **Prueba en varios dispositivos:** revisa la página en computadora, tableta y celular. * **Adapta el diseño al producto:** carrusel para muchos ángulos, cuadrícula para comparar variantes, imagen única para productos simples o digitales. * **Usa el visor en productos de alto valor:** artículos de lujo, equipos técnicos o productos a medida se benefician de una inspección detallada. ## Preguntas frecuentes > **¿Los atajos de teclado funcionan con cualquier opción de zoom?** > > No. Solo con **Abrir en visor**. Las otras opciones no abren el visor a pantalla completa. > **¿Funcionan en celulares?** > > Los atajos están pensados para computadoras con teclado. En el celular, el visor sigue funcionando con toques y gestos. > **¿Por qué las flechas no mueven la página cuando el visor está abierto?** > > Es el comportamiento esperado. Mientras el visor está abierto, las flechas se reservan para cambiar de imagen y evitar movimientos accidentales. > **¿Funcionan en páginas de detalles personalizadas?** > > Sí. Usan el mismo elemento **Detalles del producto**, así que si activas **Abrir en visor** los atajos estarán disponibles. > **¿Necesito código personalizado?** > > No. La navegación con teclado viene incluida en el visor. Basta con elegir **Abrir en visor** y publicar. > **¿Puedo cambiar las teclas?** > > No. Las teclas son fijas: **Esc** para cerrar y las flechas izquierda y derecha para navegar. > **¿Qué pasa si el producto tiene una sola imagen?** > > **Esc** sigue cerrando el visor. Las flechas están activas, pero no hay otra imagen a la que pasar. ## Artículos relacionados > **[Crea productos y véndelos con embudos](https://help.chateea.com/docs/pagos/productos-y-embudos.md)** > > Crea tu catálogo y empieza a vender. > **[Tamaño de imágenes en móvil y escritorio](https://help.chateea.com/docs/sitios/tamano-de-imagenes-movil-y-escritorio.md)** > > Ajusta cómo se ven tus imágenes en cada dispositivo. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.