Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Imágenes de productos

Las buenas imágenes de los productos son un componente importante de una tienda en línea. Puedes usar imágenes para representar los productos en todo tu sitio, destacar las características clave y ofrecer una mirada a los detalles y las texturas. Esta guía indica los diversos modos de usar las imágenes de los productos.

Consejo: Para aprovechar esta guía al máximo, primero crea una Página de Productos y añade productos a tu tienda.

Mira el video

Antes de subir imágenes

Revisa nuestras guías sobre el formato de las imágenes para verificar que tus imágenes tengan el tamaño y la calidad adecuados para aparecer en pantalla.

La relación de aspecto de la imagen afecta cómo aparece la imagen con eltamaño de tu producto y las opciones de recorte automático. Te recomendamos editar tus imágenes para que se adapten a la relación deseada antes de subirlas. También puedes ajustar el foco de una imagen recortada antes de subirla empleando su punto focal.

Consejo: Empieza por subir algunas imágenes de prueba para ver cómo lucen y experimenta con las opciones de estilo.

Página de productos versus páginas de detalles del producto

Antes de referirnos a las imágenes de los productos, es útil comprender cómo Squarespace estructura los productos en todos los sitios. Los productos se organizan en dos partes:

  • Las Páginas de productos son páginas de aterrizaje para varios productos. En la versión 7.1, se las denomina Páginas de tienda.
  • Las páginas de detalles muestran los detalles para un producto.

Por ejemplo, en esta Página de Productos, los que visitan el sitio pueden ver varios productos.

Galapagos__.jpg

Hacer clic en cualquiera de los productos dirige a quienes visitan el sitio a la página de detalles de ese producto, donde pueden ver más imágenes e información sobre este producto.

Teresa_Jacket___Galapagos.jpg

Tipos de imágenes de productos

Cuando añades o editas un producto, puedes agregar estas imágenes:

  • Imagen principal
  • Additional images
  • Thumbnail image
  • Imágenes de las variantes

Cómo se verán depende de la versión en la que esté tu sitio.

Imágenes en miniatura

Las imágenes en miniatura representan al producto en la mayoría de las áreas de tu sitio, por lo que es mejor usar la imagen que quieres que los clientes vean en primer lugar. La imagen aparece en estas áreas: 

  • Páginas de Productos. Los compradores hacen clic en la imagen en miniatura de un producto para acceder a la página de detalles del producto.
  • Product Blocks
  • Bloques de resumen
  • La Página de productos y los paneles del Inventario.

Como opción preconfigurada, la primera imagen que se añade a la pestaña Elemento del editor del producto pasa a ser su imagen en miniatura. Para seleccionar otra imagen en miniatura:

  1. En el editor de productos, haz clic en la pestaña Opciones.
  2. En la casilla de Imagen en miniatura, haz clic en el icono de la Papelera.
  3. Agrega una imagen en miniatura.
  4. Haz clic en Guardar.

Si borras la imagen en miniatura sin seleccionar un reemplazo, aparecerá la imagen principal.

Imagen principal

La imagen principal aparece como la primera imagen en las páginas de detalles del producto.

La imagen principal es la imagen en la esquina superior izquierda de la pestaña Elemento del editor del producto. Haz clic y arrastra las imágenes para cambiar su orden.

product_primary_image.png

Additional images

Otras imágenes les dan a los compradores un panorama completo de tus productos. Usa otras imágenes para mostrar detalles, tu producto desde diferentes ángulos o fotos escenográficas. Las demás imágenes aparecen en las páginas de detalles del producto. En la pestaña Elemento del editor del producto, todas las imágenes después de la primera imagen son imágenes adicionales. Haz clic y arrastra las imágenes para cambiar su orden. 

Additional_Image.png 

Imágenes de las variantes

En las páginas de detalles del producto, las imágenes de las variantes les muestran a los compradores cómo luce cada producto. Por ejemplo, puedes usar las imágenes de las variantes para presentar los productos en diferentes talles y colores. Por defecto, la imagen en miniatura del producto aparece hasta que los compradores seleccionen otra variante en el menú desplegable.

Para personalizar una imagen de las variantes:

  1. En el editor de Productos, presiona Precios y variantes.
  2. En la última columna de la izquierda, presiona el campo de la imagen para editarla.

En la versión 7.0, la forma en la que se ven las imágenes depende del tipo de Página de productos de la plantilla que estás utilizando.

Imagen principal

La imagen principal representa al producto en la mayoría de las áreas de tu sitio. Por ese motivo, es mejor usar una imagen que quieras que la mayoría de los clientes vean en primer lugar. La imagen aparece en estas áreas:

  • En las Páginas de productos Classic o Unique
  • Como la primera imagen en las páginas de detalles del producto.
  • En el panel de Página de Productos o en el panel de Inventario.

La imagen principal es la imagen en la esquina superior izquierda de la pestaña Elemento del editor del producto. Haz clic y arrastra las imágenes para cambiar su orden.

product_primary_image.png

Additional images

Otras imágenes les dan a los compradores un panorama completo de sus productos. Usa otras imágenes para mostrar detalles, tu producto desde diferentes ángulos o fotos escenográficas. Otras imágenes aparecen en estos sitios:

En la pestaña Elemento del editor del producto, todas las imágenes después de la primera imagen son imágenes adicionales. Haz clic y arrastra las imágenes para cambiar su orden.

Additional_Image.png

Imágenes en miniatura

Las imágenes en miniatura muestran una vista previa de tus productos en diferentes áreas de tu sitio. En las plantillas compatibles con la página Productos avanzados, los compradores hacen clic en la imagen en miniatura de un producto para acceder a la página Detalles del producto. Las imágenes en miniatura también se muestran en estas áreas: 

Como opción preconfigurada, la primera imagen que se añade a la pestaña Elemento del editor del producto pasa a ser su imagen en miniatura. Para seleccionar otra imagen en miniatura:

  1. En el editor de productos, haz clic en la pestaña Opciones.
  2. En la casilla de Imagen en miniatura, haz clic en el icono de la Papelera.
  3. Agrega una imagen en miniatura.
  4. Haz clic en Guardar.

Si borras la imagen en miniatura sin seleccionar un reemplazo, aparecerá la imagen principal.

Imágenes de las variantes

En las páginas de detalles del producto, las imágenes de las variantes les muestran a los compradores cómo luce cada producto. Por ejemplo, puedes usar las imágenes de las variantes para presentar los productos en diferentes talles y colores. Por defecto, la imagen en miniatura del producto aparece hasta que los compradores seleccionen otra variante en el menú desplegable.

Para personalizar una imagen de las variantes:

  1. En el editor de Productos, presiona Precios y variantes.
  2. En la última columna de la izquierda, presiona el campo de la imagen para editarla.

Cambiar el estilo de las imágenes de productos

La forma en la que modifiques el estilo de las imágenes de los productos depende de en qué versión de Squarespace esté tu sitio.

Personaliza cómo aparecen las imágenes de los productos con los ajustes estilos de sección y Elemento del producto en el panel de Diseño.

Secciones de productos

Para cambiar cómo aparecen las imágenes en miniatura del producto en las secciones de Producto, posiciona el cursor sobre la sección y haz clic en el icono del lápiz.

Puedes cambiar el espaciado, las columnas, la relación de aspecto y la alineación del texto. También puedes mostrar u ocultar los precios de los productos. Para cambiar los colores, haz clic en Colores.

Páginas de detalles del producto

Para cambiar cómo aparecen los productos en la página de detalles del producto:

  1. En el Menú de inicio, haz clic en Diseño y, a continuación, presiona Elementos del producto.
  2. Introduce cambios y, luego, haz clic en Guardar.

Puedes modificar el estilo de elementos como la relación de aspecto de la imagen, la alineación del texto y el diseño de la galería de productos.

Usa el panel de Estilos del sitio para personalizar cómo aparecerán las imágenes del producto. Los diseños y las opciones de estilo disponibles dependen del tipo de Página de Productos de tu familia de plantillas:

Ajustes de Classic

Son los ajustes específicos para las imágenes de las Páginas de Productos de Classic:

  • Páginas de productos: Usan  los ajustes de Tamaño del elemento del productoRecorte automático de imágenes del producto,  y Color de fondo del producto para seleccionar el estilo como las imágenes del producto aparecen en la Página de productos.
  • Páginas de elemento: Usa los ajustes de Tamaño de la galería del productoRecorte automático de la galería del producto para configurar el tamaño de la imagen y el recorte en las páginas de detalles.

Ajustes avanzados

Estos son los ajustes específicos de las imágenes en las Páginas Avanzadas de Productos:

  • Páginas de productos: Usa el ajuste Relación de aspecto de la imagen en la sección de Productos: Diseño para seleccionar la forma de las imágenes en la página de productos. Las imágenes se recortan automáticamente para adaptarse a la forma.
  • Páginas de elementos: Usan los ajustes de Productos: Sección de galería, como Diseño, Relación de aspecto, Alineación de la imagen en miniatura y Ancho de la imagen en miniatura para seleccionar el estilo de las imágenes en las páginas de detalles.

Ajustes exclusivos

Si necesitas ayuda para modificar el estilo de las imágenes de los productos en estas plantillas, consulta las guías de cada plantilla:

Opciones especiales para las imágenes

Algunas Páginas de Productos ofrecen funciones especiales que te permiten mostrar las imágenes en modos dinámicos. 

  • Vista rápida del producto - Los clientes pueden hacer clic en un botón para ver información detallada sobe el producto en una caja de luz sin salirse de la página actual.  En la versión 7.1, esta funcionalidad está disponible únicamente en la página Detalles del producto.
  • Ampliar la imagen del producto : Los clientes pueden ampliar las imágenes del producto para ver más de cerca el material, la textura y detalles más finos. En la versión 7.1, esta funcionalidad está disponible únicamente en la página Detalles del producto.
  • Imagen alternativa al desplazar el cursor - Esta funcionalidad es excelente para mostrar una característica especial, otro ángulo o un detalle clave de cada producto. Solo está disponible en la versión 7.0.

Si necesitas ayuda con alguno de estos ajustes, consulta funciones especiales de la Página de Productos.

Añadir texto alternativo

Añadir texto alternativo a las imágenes de productos identifica el contenido de tus imágenes para los navegadores y los motores de búsqueda. Esto ayuda a que tus imágenes aparezcan en los resultados de búsqueda de imágenes y hace que tu sitio sea más accesible para los visitantes que usan lectores de pantalla.

Cuando agregues texto alternativo, usa términos breves que describan la imagen específica y el producto. Por ejemplo, "Primer plano de un gancho de bronce" y "Espalda de un vestido floreado".

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 14 de 62
Imágenes de productos