Las imágenes son un aspecto fundamental de tu tienda. Recuerda que al tratarse de una tienda online para el cliente es como el equivalente de tener el objeto en la mano y será la vidriera de tu producto para que puedan conocerlo y desearlo.
En esta sección podrás ver:
- Agregar Imágenes
- Agregar un texto y/o botón a una imagen
- Imagen alternativa y encolumnado para versión mobile
- Formatos y medidas recomendadas
- Crear un slideshow
- Agregar un video a tu sitio
- Agregar un video a los productos
- Agregar un GIF a tu tienda
Agregar Imágenes
Puedes agregar todas las imágenes que quieras en las páginas de tu sitio. Aprovecha esta herramienta para crear slideshows de imágenes, galerías, y resaltar los aspectos más importantes de tu tienda.
Las imágenes son un elemento clave para que tu sitio tenga un buen diseño y sea atractivo. Por eso te recomendamos utilizar imágenes con alta resolución para que los clientes puedan visualizar mejor las terminaciones del producto.
Imágenes de Producto
Las medidas recomendadas para los productos es de 500 x 500 píxeles y hasta 20 megapíxeles. Respecto a la cantidad de imágenes, puedes subir hasta 30 por producto, pero te recomendamos que utilices las convenientes para que se pueda apreciar el producto desde diferentes ángulos o se vean detalles que quieras resaltar.
Para agregar una imagen a un producto:
Dirígete a la sección Productos y luego al Listado de productos.
Selecciona el producto que quieres agregar la imágen y haz clic en el nombre resaltado en azul.
Localiza la sección multimedia y selecciona la opción Subir Fotos.
4. Selecciona los archivos de tu computadora que quieres subir y haz clic en Abrir.
Si agregas más de una imagen, la primera que se muestra es la imagen principal de tu producto. Puedes establecer una nueva imagen como principal arrastrando una imagen diferente al lugar de la imagen principal. También puedes cambiar el orden de otras imágenes arrastrándolas.
Agregar Imágenes a las variantes de producto
Si quieres agregar una imagen a las variantes debes hacerlo dentro de las características de variantes.
Dirígete a la sección Productos del módulo Stock.
Selecciona el producto que quieres agregar la imagen y haz clic en el nombre resaltado en azul.
Al final de la página localiza las variantes. Selecciona la imagen de la cámara y carga las fotos desde la computadora.
Podrás editar y ubicar las imágenes en el lugar de la página que quieras, modificar el tamaño, ordenarlas, agregarle textos, botones, links, etc.
Para agregar una imágen en la página:
Haz clic en el menú agregar un elemento imagen.
Haz un clic sobre el elemento para agregar una imagen.
Selecciona la opción Seleccionar imagen. Se abrirá una librería de imágenes con todas las imágenes que fueron subidas en algún momento. Si la imagen que desea agregar no está en la librería, debe hacer clic en Agregar imágenes nuevas y seleccionar de su computadora las imágenes que desea agregar a la librería.
Agregar un texto y/o botón a una imagen
Si agregaste una imagen y quieres que tenga un texto para hacerla más atractiva debes seguir los siguientes pasos:
Haz clic sobre la imagen y selecciona el ítem Opciones de Imagen.
En la opción Texto / botón podrás agregar un título, un párrafo y un botón a la imagen.
Puedes definir la ubicación de esta información, los colores y tamaños de los textos y botones. También podrás seleccionar si quieres que el texto aparezca con efecto mouseover (sin embargo no recomendamos esta práctica para el uso mobile)
4.También podrás agregar un enlace hacia otras páginas de tu sitio o un sitio externo y agregarle borde a las imágenes para que tengan un estilo personalizado.
Imagen alternativa y encolumnado para versión mobile
Una función muy útil para asegurar que tu sitio se vea bien sin importar desde donde navegue tu cliente es la opción de imagen alternativa para mobile, ya que las proporciones tienden a modificarse, para escritorio más rectangular y para mobile más cuadradas.
Para poder seleccionar una imagen diferente en versión mobile:
1. Deberás situarte arriba de la imagen que quieres realizar la diferenciación y hacer clic para desplegar el menú con las opciones.
2. Selecciona la opción Cambiar imagen mobile.
3. Agrega la imagen que quieres que se visualicen en la opción mobile.
4. Una vez que publiques podrás visualizar como queda.
Otra funcionalidad muy recomendable para acomodar el sitio es utilizar dos columnas para un elemento que se encuentra en una en la versión de escritorio.
1. Ubica el módulo que quieres dividir en dos columnas.
2. Selecciona el dibujo del celular
3. A continuación se desplegará el siguiente menú para visualizar la cantidad de columnas del elemento.
4. Publica los cambios en el sitio
Formatos y medidas recomendadas
Dimensiones para banners: ¡Este es nuestro ABC para los banners de tu ecommerce!
Ten en cuenta que son a modo orientativo y podrán variar de acuerdo al tipo de imágenes con las que cuentes o el look&feel que busques para tu tienda.
Banner principal desktop: La dimensión ideal es de 1920 x 700 px como alto máximo.
Nuestra recomendación es que en un primer pantallazo se vea el inicio del siguiente elemento debajo del banner principal.
Banner principal mobile: La dimensión ideal es de 1080 x 1080 px como alto mínimo recomendado. Lo ideal es que este tipo de banners sean cuadrados o un poco más alargados, pero dependerá del tipo de imágenes que hayas tomado y cuánto puedas recortarlas sin que se pierda el producto. Si juegas con ilustraciones o gráficas como el caso de este ejemplo podrás adaptarlo fácilmente a cualquier dimensión.
También aplica a la versión mobile nuestra recomendación de que en un primer pantallazo se vea el inicio del siguiente elemento debajo del banner principal.
Banners de categorías: La dimensión ideal es de 960 px como ancho recomendado. El alto de la imagen variará en función de la orientación de la misma. Los banners de categorías pueden ser tanto verticales, horizontales o cuadrados. Es importante corroborar que el texto se vea bien en la versión mobile y adaptar la imagen recortándola en caso que no sea legible.
Banner de categoría vertical:
Banner de categoría horizontal:
Banner de categoría cuadrado:
Banners de páginas internas: La dimensión ideal es de 1920x400 px como alto máximo. Corrobora que el título o texto sea legible en la versión mobile y si no es el caso adaptarla recortando el ancho banner.
En diseños con el contenedor del banner al 100% de ancho de pantalla recomendamos no excederse de los 300 px de alto máximo:
En diseños con el ancho de contenedor más angosto pueden utilizarse banners un poco más altos, hasta 400 px:
Dimensiones para slideshow: La dimensión ideal es de 1920x700 px como alto mínimo. Corrobora que en mobile se lean los textos ya que el elemento de slideshow mostrará una única imagen en la versión de escritorio y la versión de celular.
Slideshow mobile: La dimensión ideal es de 1080 x 1080 px como alto mínimo recomendado. Lo ideal es que este tipo de banners sean cuadrados o un poco más alargados, pero dependerá del tipo de imágenes que hayas tomado y cuánto puedas recortarlas sin que se pierda el producto.
Tamaño de imágenes:
El tamaño máximo recomendado es de 1 MB por cada banner, cualquiera de ellos. Recuerda que cuanto más optimizadas estén tus imágenes la tienda cargará más rápido.
Si tienes imágenes muy pesadas te recomendamos este compresor que le bajará el tamaño o peso a las imágenes sin perder calidad ni alterar los colores de la fotografía:
- Para comprimir imágenes .png: https://tinypng.com/
- Para comprimir imágenes .jpg https://tinyjpg.com/
Ten esta recomendación muy en cuenta ya que si subes imágenes más livianas en tu tienda mejorarán el tiempo de carga de la misma!
Resolución al exportar tus imágenes:
Si estás trabajando tus imágenes en programas como Photoshop o Illustrator te recomendamos exportar las mismas en resolución 72 dpi, ya que es ideal para imágenes que se subirán a una Web.
Bancos de imágenes recomendados:
Si no cuentas con fotografías propias para los banners de tu tienda puedes tomarlas de bancos de imágenes, siempre que cuenten con imágenes que tengan licencia CC0 - Creative Commons Zero (Esto significa que la imagen no tiene ningún derecho reservado y puedes usarlas libremente)
¡Aquí te dejamos algunos bancos de imágenes que amamos para que te inspires!
¿Quieres saber cómo tomar fotografías como un experto con tu móvil? ¡No te pierdas la nota del Blog!
Crear un slideshow
El Slideshow de imágenes es un elemento que te permite mostrar varias imágenes que van rotando en un mismo lugar. Puedes utilizar este tipo de elementos para promocionar tus productos, servicios, colecciones, promociones o cualquier aspecto de tu negocio, de forma atractiva.
Para agregar un Elemento Slideshow de imagen:
Haz clic en Agregar del menú lateral.
Selecciona la opción
.Se agregará en la parte inferior de tu página y luego podrás ordenar el elemento con las opciones de edición del box.
4. Agrega y organiza tus imágenes haciendo clic en Organizar imágenes.
5. Define el orden en el que aparecerán, agrega un título y párrafo a cada imagen, e incorpora un enlace a cada una de ellas.
6. Para editar los colores y tamaños de los textos, deberás ingresar a Opciones haciendo clic nuevamente sobre el elemento.
7. Si creaste un slideshow de productos, al hacer clic en Organizar productos, podrás definir qué productos destacar, modificar la imagen de cada uno e incluir una etiqueta de descuento.
8. Edita las opciones del slideshow, donde puedes configurar el efecto de transición, la pausa entre cada imagen, los colores de cada elemento y si deseas agregar un borde a las imágenes.
Usa un mínimo de 4 segundos en la pausa entre imágenes así el usuario podrá leer la información. Te recomendamos utilizar o flechas o círculos de desplazamiento, una de las dos opciones para que no sea redundante.
Agregar un video a tu sitio
Si tienes videos sobre tu negocio o productos no olvides mostrarlos en tu sitio, para que tus visitantes tengan una mejor idea sobre tu marca y puedas mostrar de forma más atractiva tus productos.
Desde la plataforma podrás subir videos a partir del link de YouTube o Vimeo, por lo tanto previamente necesitarás subir los videos a alguna de estas plataformas.
Importante: Tu visitante no será redireccionado a otra página, sino que el video se verá en tu sitio y con el tamaño que hayas determinado.
Haz clic en
dentro del editor de diseño de tu tienda.
2. Ingresa a las opciones del video, haciendo clic en el elemento.
3. Debes agregar la URL (dirección web) de Youtube o Vimeo del video para poder mostrarlo. Si quieres que el video se reproduzca de forma automática debes activar el botón.
Agregar un video a los productos
Los videos son una herramienta muy útil para mostrar el funcionamiento del producto o mostrarlo en acción. Es muy simple subir un video a nuestra plataforma, sólo deberás pegar la URL del video previamente subido a YouTube o Vimeo.
Ingresa en la sección Productos del módulo Stock y ubica la opción Agregar Producto o Editar Producto.
Localiza la sección Multimedia
Allí deberás pegar el enlace del video de YouTube o Vimeo.
Agregar un GIF a tu tienda
Los GIF son una herramienta muy útil para sumarle movimiento y dinamismo al diseño de tu tienda. ¿Cómo agregarlos?
Ingresa en el editor y luego en el símbolo + del menú de la izquierda.
Agregar un elemento imagen.
Allí deberás elegir qué archivo subes. Elige un archivo que sea .gif y listo :)
Puedes editar todas las configuraciones como si fuera una imagen: ancho, alto, dimensiones, espacios, etc.
¿Le ha sido útil este artículo?
¡Qué bien!
Gracias por sus comentarios
¡Sentimos mucho no haber sido de ayuda!
Gracias por sus comentarios
Sus comentarios se han enviado
Agradecemos su esfuerzo e intentaremos corregir el artículo