Imágenes de productos

Consejos para agregar fotografías de productos destacados a tu tienda.

Última actualización: 3 de enero de 2025

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

Regístrate en nuestro seminario web Consejos de diseño para aumentar las ventas de tu tienda, donde presentaremos herramientas y consejos que puedes usar para ayudar a que tus productos se destaquen en tu sitio e impulsar las ventas.

Mira el video

Antes de agregar imágenes

Puedes agregar imágenes a un producto cargándolas directamente o reutilizando imágenes que ya hayas cargado en otras áreas de tu sitio.

Antes de cargar una imagen, revisa nuestras pautas de formato de imagen para asegurarte de que tus imágenes tengan el tamaño y la calidad adecuados para mostrarlas en línea.

La relación de aspecto de una imagen afecta cómo se ve con el tamaño del producto y las opciones de recorte automático. Recomendamos editar las imágenes a la proporción deseada antes de cargarlas. También puedes cambiar el enfoque de una imagen recortada después de agregarla con su punto focal.

Un producto puede tener hasta 100 imágenes. Sin embargo, la página puede cargarse lento si el producto está sobrecargado con imágenes. Recomendamos mantener las páginas de menos de 5 MB.

Consejo

Comienza agregando algunas imágenes de prueba para ver cómo aparecen y experimentar con las opciones de estilo.

Página de tienda vs. 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 Tienda son páginas de aterrizaje para varios productos.
  • Las páginas de detalles muestran los detalles para un producto.

Por ejemplo, en esta página de tienda, los visitantes pueden navegar por 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 destacada
  • Imagen principal
  • Additional images
  • Imágenes de las variantes
  • Imagen alternativa para compartir en redes sociales

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

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

  • Páginas de tienda. Los compradores hacen clic en la imagen destacada de un producto para acceder a la página de detalles del producto
  • Bloques de productos
  • Bloques de resumen
  • Los paneles de la página de tienda y de Productos

De forma predeterminada, la imagen principal del producto se convierte en la imagen destacada. Para configurar una imagen destacada diferente:

  1. En el editor de productos, haz clic en la imagen en miniatura de la imagen destacada actual.
  2. Carga una imagen.
  3. Desplaza el cursor sobre Guardar y haz clic en Guardar.

Imagen principal

La imagen principal aparece como la primera imagen en las páginas de detalles del producto. La imagen principal es la primera imagen que se muestra en el editor de productos. Haz clic y arrastra las imágenes para cambiar su orden.

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 el 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. 

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 variante del producto. Por ejemplo, puedes usar las imágenes de las variantes para presentar los productos en diferentes talles y colores. Por defecto, la imagen destacada 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, desplázate hasta la sección Variante y haz clic en Editar todo.
  2. Haz clic en el ícono de carga de imagen junto a una variante.
  3. Haz clic en el ícono + para cargar una imagen o selecciona una imagen que ya hayas cargado.
  4. Haz clic en Aplicar.

También puedes hacer clic en una variante en el editor principal de productos y, a continuación, en Agregar imágenes para agregar una imagen de variante. Las imágenes de variantes se muestran en la galería de imágenes adicionales de la página de detalles del producto. 

En la versión 7.0, la visualización de la imagen depende del tipo de página de tienda de la plantilla.

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 clásicas o únicas de la tienda.
  • Como la primera imagen en las páginas de detalles del producto.
  • En el panel de la página de tienda o en el panel de Productos.

La imagen principal es la primera imagen que se muestra en el editor de productos. 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

Las imágenes destacadas muestran una vista previa de tus productos en diferentes áreas del sitio. En las plantillas que admiten la página de tienda avanzada, los compradores hacen clic en la imagen destacada de un producto para acceder a la página de detalles del producto. Las imágenes destacadas también se muestran en estas áreas:

De forma predeterminada, la primera imagen agregada en la pestaña Elemento del editor de productos se convierte en la imagen destacada. Para configurar una imagen destacada diferente:

  1. En el editor de productos, haz clic en la pestaña Opciones.
  2. En el cuadro Imagen destacada, haz clic en el ícono de la papelera.
  3. Agregar una imagen destacada.
  4. Haz clic en Guardar.

Si eliminas la imagen destacada sin configurar un reemplazo, se muestra 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 variante del producto. Por ejemplo, puedes usar las imágenes de las variantes para presentar los productos en diferentes talles y colores. Por defecto, la imagen destacada 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.

Las imágenes de variante se muestran en la galería de imágenes adicionales en la página de detalles del producto.

Imagen alternativa para compartir en redes sociales

La imagen alternativa para compartir en redes sociales de un producto se muestra en plataformas de uso compartido en redes sociales o en aplicaciones de mensajería de texto cuando compartes la URL de la página de detalles del producto. Si no agregas esta imagen para un producto, en su lugar utilizaremos la imagen destacada del artículo.

Eliminar imágenes de productos

Para eliminar imágenes de productos:

  1. Edita el producto
  2. En la sección Imágenes, desplaza el cursor sobre la imagen y haz clic en el icono de la papelera
  3. Haz clic en Borrar

Eliminar una imagen de variante de la galería de imágenes adicionales también la elimina del editor de variantes.

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 el aspecto de las imágenes de productos con estilos de sección y los ajustes de Elementos de producto en el panel Estilos del sitio.

Secciones de productos

Para cambiar cómo se muestran las imágenes destacadas del producto en las secciones de la tienda, desplaza el cursor sobre la sección y haz clic en el ícono 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.

Si las imágenes de tus productos aparecen recortadas, visita Solución de problemas con el recorte de imágenes.

Páginas de detalles del producto

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

  1. Edita la página y haz clic en Editar diseño.
  2. Abre los estilos de sección y luego haz clic en el menú desplegable de diseño.
  3. Selecciona un diseño.
  4. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Puedes aplicar estilo a 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. Para lograr un diseño coherente, estos cambios de estilo se aplican a todos los productos de tu tienda. No es posible editar esta configuración para productos específicos.

Utiliza el panel Estilos del sitio para personalizar el aspecto de las imágenes del producto. Los diseños y opciones de estilo disponibles dependen del tipo de página de Tienda de la familia de plantillas. Para obtener más información, visita Cómo aplicar estilo a páginas de Tienda.

  • Clásico
  • Avanzado
  • Único

Ajustes de Classic

Estos son los ajustes específicos de la imagen para las páginas de tienda clásicas:

Ajustes avanzados

Estos son los ajustes específicos de la imagen para las páginas de tienda avanzadas:

  • Páginas de tienda: utiliza el ajuste Relación de aspecto de imagen en la sección Productos: Diseño para establecer la forma de las imágenes en la página de tienda. Las imágenes se recortan automáticamente para ajustarse a la forma.
  • Páginas de elementos: usa 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 Tienda ofrecen funciones especiales que te permiten mostrar imágenes de forma dinámica. La visualización de estas imágenes depende de la versión de tu sitio.

  • Vista rápida del producto: los clientes pueden presionar un botón para ver los detalles del producto en una lightbox sin salir de la página actual. En la versión 7.1, esta función está disponible únicamente en la página de 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 los detalles más finos. En la versión 7.1, esta función está disponible únicamente en la página de detalles del producto.
  • Imagen alternativa cuando se posiciona el cursor: Este es un gran modo para destacar una característica especial, otro ángulo o un detalle clave de cada producto.

Para obtener ayuda con cualquiera de estos, visita las funciones especiales de páginas de tienda.

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”. Puedes agregar texto alternativo de hasta 200 caracteres a cada imagen del producto. Visita esta guía para informarte mejor sobre cómo crear un sitio de Commerce accesible.

Mejorar las imágenes de los productos usando extensiones

Conecta a soona, un estudio de contenido virtual para fotografía y video de comercio electrónico, en el panel de Extensiones de tu sitio, para crear gráficas de calidad profesional que mejoren tu tienda online. Solo tienes que enviar tus productos a soona, compartir lo que quieres crear, hacer tu sesión de fotos o seleccionar un paquete con precios ya establecidos, y unirte a tu sesión virtualmente.

Si bien trabajamos con servicios de terceros para garantizar que Squarespace Extensions funcionen correctamente, las extensiones quedan fuera de nuestro alcance de Atención al Cliente. Podemos ayudarte a conectar o desconectar tus extensiones. Si tienes cualquier otra pregunta, ponte en contacto directamente con el proveedor de las extensiones.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.