Merchandising visual ecommerce: guía de presentación en Shopify

El merchandising visual ecommerce es la práctica de presentar productos online para que el comprador juzgue aspecto, escala, textura y calidad sin tocar el artículo. En una tienda Shopify ese trabajo vive en los medios del producto, los banners y cuadrículas de colección, las fotos de variante y las secciones de la portada.

Empieza por una colección con mucho tráfico. Fotografía cada miniatura con el mismo recorte y la misma luz, y da a cada producto al menos tres vistas útiles (frente, detalle, en uso). Esa es la corrección de presentación más rápida que la mayoría de comercios puede publicar esta semana.

Qué cubre el merchandising visual ecommerce

El merchandising de surtido decide qué SKUs aparecen y en qué orden. El merchandising visual decide cómo se ven esos SKUs una vez están en la página. Si necesitas el flujo de promocionar y degradar el orden de una colección, usa la guía de merchandising ecommerce. Este artículo es la capa de presentación: fotos, galerías y coherencia de cuadrícula.

Trata estas cinco superficies como un solo sistema. Quien ve un hero de portada limpio y después una cuadrícula de colección desordenada no confiará en la página de producto.

• Fotografía de producto y la galería de medios en la página de producto
• Imagen destacada de la colección y las miniaturas de la cuadrícula
• Imágenes de variante que coinciden con la opción que eligió el comprador
• Hero de portada, colección destacada y secciones tipo lookbook
• Resultados de búsqueda, que reutilizan las mismas imágenes de producto que la cuadrícula

Dónde ocurre el merchandising visual en Shopify

No hace falta un tema a medida para empezar. La mayor parte del trabajo es medios en el admin más unas plantillas del editor de temas.

Páginas de producto

Los medios de producto de Shopify pueden incluir imágenes, modelos 3D y vídeos. Todos los temas admiten imágenes de producto. Los vídeos y los modelos 3D solo se muestran si el tema admite ese tipo de medio. Los temas Online Store 2.0 creados por Shopify y la familia de temas Horizon admiten modelos 3D o vídeos.

Páginas de colección

En el editor de temas, las páginas de colección suelen incluir un banner de colección y una cuadrícula de productos. En el admin puedes editar el nombre de la colección, la descripción, la imagen destacada y el orden de los productos. El orden es trabajo de surtido. El trabajo visual es un banner que encaje con los productos de debajo y una cuadrícula de miniaturas coherentes.

Portada y plantillas

La portada es el escaparate digital. Mantén el hero, la primera colección destacada y las primeras ocho fichas de producto en un mismo sistema visual (recorte, fondo, tipografía). Puedes crear plantillas alternativas de producto o de colección en el editor de temas cuando una landing de campaña necesita una galería más densa o un banner distinto al del catálogo por defecto.

Estándares de medios de producto que sostienen una cuadrícula

Los recortes inconsistentes rompen una colección antes que un banner flojo. Las proporciones mezcladas hacen que algunos productos parezcan más grandes, recortan etiquetas y el comprador recorre menos.

Según el Centro de ayuda de Shopify sobre tipos de medios de producto, las imágenes de producto y de colección pueden ser de cualquier tamaño hasta 5000 x 5000 px (o 25 megapíxeles) y deben pesar menos de 20 MB. Para imágenes de producto cuadradas, Shopify indica que 2048 x 2048 px suele verse mejor. Shopify genera después tamaños adicionales para las páginas de producto frente a las plantillas de colección.

La guía de formatos de imagen para temas de Shopify distingue los formatos según el uso. JPEG es la elección habitual para fotografía de producto, banners y otras imágenes fijas con color complejo. PNG encaja mejor en logos, iconos y gráficos que necesitan transparencia o color plano sin degradados. El servicio Imagery de Shopify muestra después el archivo en un formato que el navegador del comprador admite.

La guía de fotografía de Shopify también sugiere comprimir las imágenes web para que el archivo no supere 200 KB cuando puedas, porque los archivos más pesados ralentizan la página. Dispara a alta resolución y exporta después una versión web. No subas un original de 20 MB a cada SKU si un cuadrado comprimido de 2048 px ya se ve nítido.

Añade texto alternativo a cada imagen de producto. Ayuda a quien no puede ver la foto y describe la vista (frente, espalda, primer plano del tejido) para la búsqueda.

Monta una galería de producto que se pueda usar de verdad

Una foto hero no es una galería. El comprador usa vistas extra para decidir si abre la ficha y, después, si añade al carrito.

Las pruebas del Baymard Institute en listados de moda y hogar encontraron que 1 o 2 imágenes a menudo no bastan para comunicar información visual suficiente, y recomienda acceso a al menos 3 miniaturas por artículo del listado.

Ese hallazgo sale de la investigación del Baymard Institute sobre miniaturas en listados de producto (publicada el 5 de noviembre de 2024). La moda puede necesitar un juego de vistas más amplio. Pon primero las tomas extra en la página de producto. Si tu tema puede mostrar miniaturas extra en la cuadrícula de colección o en los resultados de búsqueda, úsalo a continuación.

Usa esta lista de tomas en todos los SKU principales. Salta una toma solo cuando no aplique (una tarjeta regalo digital no necesita un primer plano de tejido).

1. Vista frontal recortada o con fondo limpio, el mismo recorte que el resto de SKUs de la colección
2. Primer plano de detalle o textura (costura, material, herrajes, estampado)
3. Vista en cuerpo, en mano o en estancia para que el comprador juzgue la escala
4. Vista de espalda, lateral o reverso si el artículo tiene una segunda cara
5. Contenido del pack o referencia de tamaño si el anuncio incluye varias piezas

Asigna una imagen a cada variante. Shopify admite solo una imagen por variante y no asocia modelos 3D ni vídeos a las variantes. Pon las tomas extra de color o de ángulo en la galería del producto, en secuencia, para que quien elige Navy siga viendo detalles Navy al hacer scroll.

Trata la página de colección como un escaparate digital

Una página de colección tiene dos trabajos visuales: nombrar el mundo al que acaba de entrar el comprador y dejarle comparar productos sin ruido visual.

• Imagen destacada: una escena que coincida con los productos de la cuadrícula, no una foto lifestyle de otra temporada
• Copy del banner: título corto más una línea que diga para quién es la colección
• Cuadrícula: misma proporción, iluminación parecida y ninguna ficha agotada dominando las dos primeras filas
• Densidad: productos suficientes para explorar, no un muro de recortes que no coinciden

No uses el merchandising visual como sustituto del orden de la colección. Una cuadrícula bonita de productos que convierten poco sigue desperdiciando la primera pantalla. Cuando las fotos coincidan, prioriza qué productos ocupan las primeras filas con conversión y stock, no con recencia.

Jerarquía de portada que se recorre en tres segundos

La portada debe responder tres preguntas en la primera pantalla: qué vendes, para quién es y dónde hacer clic después. Un hero, una colección principal y una fila de apoyo bastan.

Reutiliza las mismas fichas de producto que aparecen en la colección. Una portada con recortes lifestyle mientras la colección usa recortes de fondo blanco enseña al comprador a desconfiar de las dos. Deja los módulos de campaña en estacional. Mantén el sistema de fotografía de producto todo el año.

Lista de comprobación de merchandising visual en Shopify

Ejecútala en una colección antes de tocar todo el catálogo.

1. Elige la colección con más sesiones este mes, no el drop más nuevo.
2. Exporta o captura las primeras 16 fichas de producto en móvil. Rodea cada ficha que use un recorte, un fondo o una luz distinta.
3. Escribe una especificación de medios de una página: cuadrado 2048 px, blanco o set coherente, vista frontal como imagen 1, detalle como imagen 2, en uso como imagen 3.
4. Vuelve a fotografiar o recortar solo esos 16 SKUs según la especificación. Súbelos al producto y asigna la vista frontal coincidente a cada variante.
5. Pon una imagen destacada de colección que use la misma luz que la cuadrícula.
6. Añade texto alternativo que nombre el producto y la vista.
7. Si el tema admite vídeo, añade un clip corto al SKU más difícil de entender en estático (caída, talla o montaje).
8. Revisa las mismas 16 fichas en el teléfono. Si una etiqueta o un rostro queda recortado, corrige la imagen de origen en lugar de estirar el tema.

Cómo saber si la presentación te está costando ventas

El merchandising visual funciona cuando el comprador puede evaluar el producto en la cuadrícula y aun así elige abrir la ficha. Falla cuando un SKU recibe tráfico y pocos pedidos, o cuando el comprador se va después de una sola imagen.

Mira la tasa de conversión de la página de producto (pedidos divididos entre sesiones de ficha) en los SKUs que has vuelto a fotografiar. Un producto con muchas sesiones y poca conversión tras un pico de tráfico suele ser un problema de creatividades o de información, no de inversión en clics. Da a esos SKUs la lista completa de tomas antes de comprarles más tráfico.

Vuelve a fotografiar primero a los ganadores. Los altos conversores con galerías pobres dejan dinero sobre la mesa porque quien habría comprado no llega a tener pruebas suficientes. La optimización de colecciones sirve aquí cuando necesitas una lista ordenada de qué productos ayudan a convertir una colección y cuáles solo ocupan la primera fila.

Errores de merchandising visual que gravan la conversión en silencio

• Mezclar miniaturas verticales, horizontales y cuadradas en una misma cuadrícula, de modo que algunos productos parecen más pequeños de lo que son
• Usar un recorte lifestyle como imagen 1 cuando el resto de SKUs es un recorte de fondo limpio
• Dejar el color equivocado como imagen de variante, de modo que Navy muestra una miniatura Black
• Subir una sola foto para un producto con cinco detalles de venta (talla, forro, escala, contenido del pack, vista trasera)
• Poner un banner de oferta encima del producto de forma que el comprador no ve el artículo
• Cambiar secciones del tema cada semana mientras las fotos de base siguen sin coincidir

Corrige primero la colección de 16 fichas. Cuando esas miniaturas coincidan y cada producto tenga tres vistas claras, copia la especificación de medios a la siguiente colección. No rediseñes el tema entero hasta que las fotos ya coincidan entre sí.

Haz esto ahora

Abre tu colección más vendida en el teléfono, captura las dos primeras filas y recorta cada ficha que rompa la especificación. Después añade una toma de detalle y una toma en uso a cada uno de esos productos antes de tocar las secciones de la portada.