Acerca del Elemento de Imágenes de Producto
El elemento de Imágenes de Producto, parte del Módulo de Producto, le permite mostrar imágenes de un producto específico directamente desde su Administrador de Shopify.
Este elemento incluye:
- Imagen destacada: La imagen principal, extraída de la primera imagen de la sección Medios de su Administración de Shopify > Producto.
- Lista de imágenes: Una colección de imágenes de la misma sección de Medios, mostradas como una galería visual.
Para utilizar el elemento de Imágenes de Producto, asegúrese de tener un producto con imágenes en la sección de medios en su Administrador de Shopify.
Cómo Agregar un Elemento de Imagen de Producto a Su Página
Nota: Para un funcionamiento adecuado, el Elemento de Imágenes de Productos debe estar posicionado dentro de un módulo de producto.
Paso 1: Acceda al Panel de Control de GemPages > Páginas, y haga clic en la página de destino para abrir el editor.
Paso 2: Si no tiene ningún módulo de producto en su página, arrastre y suelte a Elemento Producto a su posición deseada.
El elemento Producto contiene varios elementos secundarios, incluido el Elemento de Imagen de Producto .
Paso 3: AAsigne un producto al elemento en el Fuente del producto .
Consulte este artículo para más detalles sobre asignación de productos en GemPages.
Paso 4: Haga clic en la imagen principal para acceder al elemento de imagen del producto
Configurar la Pestaña de Configuración
Diseño
GemPages actualmente ofrece 9 diseños prediseñados para ayudarle a mostrar tanto la Imagen Destacada como la Lista de Imágenes de manera efectiva.
Nota:
- Puede ajustar el espaciado entre imágenes en la Lista de imágenes.
- Asegúrese de verificar cómo aparece el diseño en diferentes dispositivos.
Fuente del producto
Existen dos formas de seleccionar un producto para el módulo de producto: Mostrar por producto asignado or Selección Manual.
- Mostrar por producto asignado
Al seleccionar la opción mostrar por producto asignado, la plantilla actual se aplicará dinámicamente a todos los productos asignados. El producto se seleccionará aleatoriamente para mostrarse en la página actual del editor.
Pase el cursor sobre la fuente del producto actual y haga clic en el ícono de edición para abrir el cuadro de diálogo Seleccionar producto . Desde allí, puede seleccionar otros productos asignados disponibles.
- Selección Manual
Esta opción le permite mostrar múltiples módulos de producto en la misma plantilla y opciones de variantes específicas.
Para hacer una selección, haga clic en Selección Manual, y se abrirá una ventana que muestra una lista de productos para que usted elija.
Imagen Destacada
La imagen destacada sirve como representación visual principal de su producto.
Esta sección incluye:
| Configuración | Descripción |
| Marco | Elija entre: Cuadrado, Vertical, Horizontal, Original y Personalizado. |
| Ancho y Alto | Disponible al seleccionar marco Personalizado . |
| Navegación | Seleccione el diseño: Interior o Exterior. Elija el icono de navegación y ajuste el tamaño, el color, el ancho, la altura, el relleno, el fondo del botón y las opciones de forma, como el borde, las esquinas y la sombra.
|
| Esquina: | Ajuste el radio de las esquinas (por ejemplo, 10 px, 30 px). |
| Acción al pasar el cursor | Agregue efectos al pasar el cursor, como el zoom. También puede personalizar: → Tipo de zoom: Predeterminado / Gafas → Valor de zoom: Establezca porcentaje de zoom
|
| Haga clic en acción | Elija qué sucede cuando los clientes hacen clic en la imagen: → Abrir producto → Zoom → Abrir en nueva pestaña: Sí/No |
| Velocidad de diapositiva | Ajuste la velocidad de transición entre imágenes (por ejemplo, 500 ms). |
| Animación | Elija el efecto de transición: Entrada suave, Salida suave, Entrada y salida suave.
|
| Arrastrar/Pasar | Habilite deslizamiento para dispositivos móviles o computadoras de escritorio. |
| Bucle infinito: | Habilite el bucle continuo que regresa a la primera imagen al deslizar el dedo. |
Lista de imágenes
Esta sección le permite controlar cómo se muestran sus imágenes adicionales del producto (miniaturas) debajo o al lado de la imagen destacada.
Configure:
| Configuración | Descripción |
| Mostrar | Escoger entre:
– Diapositiva: Muestra imágenes en un control deslizante de carrusel – Todo: Muestra todas las imágenes a la vez |
| Marco | Seleccione la forma de la miniatura: Cuadrada, Vertical, Horizontal, Original o Personalizada |
| Ancho y Alto | Solo disponible si se selecciona Personalizado. Defina las dimensiones exactas de las miniaturas. |
| Brecha de imagen | Establezca el espaciado entre miniaturas (en px). . |
| Escala la imagen | Ajuste cuánto se agranda la imagen al pasar el cursor. Excelente para claridad visual. |
| Navegación | Habilite flechas para la navegación del control deslizante (si se selecciona Diapositiva).
Elija el diseño (interior/exterior), seleccione el ícono, ajuste el tamaño, el color, el ancho, la altura, el relleno, el fondo del botón y las opciones de forma, incluidos el borde, la esquina y la sombra. |
| Esquina: | Establezca el radio de las esquinas para crear miniaturas de imágenes redondeadas. |
| Frontera activa | Resalte la imagen seleccionada con un borde visible. |
| Haga clic en acción | Establezca lo que sucede cuando un usuario hace clic en una miniatura (por ejemplo, mostrar en la vista principal). |
| Arrastrar/Pasar | Habilite la interacción compatible con dispositivos móviles para cambiar entre imágenes. |
| Bucle infinito | Permita que el carrusel vuelva a la primera imagen después de llegar a la última. |
Espaciado de elementos
Condición de visualización:
En la sección Condición de visualización: , puede seleccionar una condición para el elemento de imagen predeterminado del menú desplegable, que incluye:
| 1ª variante disponible | Muestra la primera imagen de variante asociada a la primera variante activa del producto en Shopify. Ideal para tiendas con imágenes basadas en variantes (p. ej., diferentes colores o estilos). |
| Primera imagen | Muestra la primera imagen de la lista multimedia del producto. Ideal para productos estándar que usan una sola imagen principal. |
| 1er video | Muestra el primer video subido a la sección multimedia del producto. Ideal para destacar videos promocionales o de demostración. |
| Primer modelo 1D | Muestra el primer modelo 3D (formato GLB/GLTF) añadido a la sección de Medios de Shopify. Úsalo para vistas interactivas de productos donde los clientes pueden rotarlos e inspeccionarlos en 3D. |
Optimizar LCP
Si prefiere que la imagen se precargue una vez que los visitantes accedan a su página, elija Sí para esta sección.
Alineación
Este parámetro le permite determinar cómo se posiciona la imagen en su página. Hay tres opciones para elegir: alineada a la izquierda, centrada y alineada a la derecha.
Configurar la pestaña Avanzada
Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.
Preguntas frecuentes sobre el elemento de imagen del producto
1. ¿Por qué no aparecen las imágenes de mis productos en la página?
Si las imágenes de sus productos no se muestran, podría deberse a:
- El elemento Imágenes del producto no se coloca dentro de un módulo de producto.
- Al producto asignado en el Módulo de Producto le falta contenido multimedia en el Administrador de Shopify.
Comprobar este artículo para una solución de problemas detallada.
2. ¿Por qué las imágenes de mis productos se cargan lentamente?
La carga lenta puede deberse a:
- Las imágenes de alta resolución no están optimizadas para la web.
- Se cargan demasiadas imágenes a la vez sin carga diferida.
Consulte esta guía para optimizar la velocidad de la imagen.
3. ¿Puedo utilizar el elemento Imágenes de producto en páginas que no sean de productos?
Sí. El elemento Imágenes del producto se puede utilizar en cualquier página siempre que se coloque dentro de un Módulo Producto.
4. ¿Puedo reorganizar el orden de las imágenes dentro de GemPages?
No. El orden de las imágenes se obtiene de la sección de multimedia del producto en el panel de control de Shopify. Para cambiar el orden de visualización, deberá reorganizar la multimedia en Shopify.
5. ¿Puedo agregar un vídeo al elemento Imágenes del producto?
- Ve a Productos en su administrador de Shopify.
- Seleccione el producto al cual desea agregar un vídeo.
- En la pantalla Medios de Comunicación sección, haga clic en + Botón y sube tu vídeo.
- Haga clic en Guardar para aplicar los cambios.
- Regrese a la página de su producto en GemPages y haga clic en Sincronizar. El vídeo aparecerá entonces en el Imágenes de Producto. .
6. ¿Cómo puedo hacer que una página muestre un producto específico con sus imágenes?
Paso 1: Arrastrar un Módulo Producto en su diseño.
Paso 2: Asignar un producto al módulo mediante:
- Visualización por producto asignado: Aplicar la plantilla actual dinámicamente a todos los productos asignados.
- Selección manual: Seleccione un producto directamente de su catálogo de Shopify.
Paso 3: Una vez asignado el producto, el Imágenes de Producto. El elemento dentro del módulo extraerá y mostrará automáticamente las imágenes del producto desde el administrador de Shopify.
Para obtener más información, consulte este artículo.
7. ¿Por qué no se sincroniza la imagen de mi producto con mi producto de Shopify?
El elemento Imagen del producto solo carga imágenes dinámicamente cuando se encuentra dentro de un Módulo de producto y se le ha asignado un producto.
Si la foto de tu producto no se actualiza, comprueba que el producto tenga contenido multimedia en Shopify; haz clic aquí. Sincronizar en GemPages, y asegúrese de que la Condición de visualización coincida con su contenido multimedia disponible (por ejemplo, primera imagen, primera variante).
8. ¿Cómo crear una presentación de diapositivas con imágenes de productos?
Si quieres crear un Presentación de diapositivas de imágenes personalizadas donde puedes controlar manualmente cada imagen, puedes crear tu propio control deslizante usando el Elemento Carrusel y Elementos de la imagen.
Sigue estos pasos para crear y cambiar imágenes en una presentación de diapositivas de imágenes de producto personalizada:
Paso 1: En el Editor de GemPages, arrastre y suelte un Elemento Carrusel en la posición donde deseas mostrar el carrusel de imágenes del producto en tu página.
Paso 2: Dentro del carrusel, arrastre un elemento Imagen en el control deslizante.
Paso 3: Seleccione el elemento Imagen y, a continuación, suba la imagen de su producto.
Paso 4: Repita el mismo proceso para las diapositivas restantes dentro del carrusel:
- Agregue un elemento Imagen a cada diapositiva
- Sube la imagen del producto que deseas mostrar.
- Organiza las diapositivas en el orden que desees.
Paso 5: Para cambiar una imagen existente más adelante, simplemente seleccione el elemento Imagen dentro de la diapositiva y cargue una nueva imagen para reemplazar la anterior.
gracias por tus comentarios