# Banner para tienda Shopify: tamaños, imágenes de producto y rebajas [Canonical HTML page](https://gradiently.design/es/guide/shopify-store-design) Una tienda inspira confianza cuando el banner, la cuadrícula de productos, los gráficos de rebajas y los emails parecen salidos del mismo sitio. Así se consigue con los tamaños que usa de verdad Shopify. ## The short version - Un banner de tienda Shopify, la imagen principal en lo alto de la página de inicio, funciona bien a 1920×1080 píxeles. - Las imágenes de producto de Shopify conviene subirlas como cuadrados de 2048×2048 píxeles para que la cuadrícula quede uniforme y el zoom siga nítido. - La mayoría de los temas de Shopify recortan la imagen principal de otra forma en el móvil, así que los titulares y los botones van en una columna central de unos 1080 píxeles de ancho. - Las fotos de producto parecen de una misma tienda cuando comparten fondo, dirección de la luz y el mismo espacio alrededor del producto. - Los banners de rebajas, los emails y las publicaciones en redes deben reutilizar el fondo y la tipografía de la tienda para que el cliente la reconozca antes de leer una palabra. Un buen **banner para tienda Shopify** mide 1920×1080 píxeles, lleva un titular corto y un botón, y mantiene ambos en el centro del formato, porque la mayoría de los temas recortan los laterales en el móvil. Combínalo con imágenes de producto subidas como cuadrados de 2048×2048 sobre el mismo fondo, y la tienda empezará a parecer una marca en lugar de un catálogo. El resto de esta página trata los tamaños, los diseños que aguantan en cualquier pantalla y cómo hacer banners de rebajas que sigan pareciéndose a ti. ## Tamaños de banners e imágenes de Shopify Shopify no te impone un tamaño de banner: cada tema decide qué altura tiene la imagen principal y cómo se recorta. Trabajar con un original 16:9 es la costumbre más segura, porque llena la pantalla de un portátil y deja altura suficiente para recortar para el móvil. | Dónde aparece | Tamaño de diseño | Proporción | | --- | --- | --- | | Banner principal de la página de inicio | 1920×1080 px | 16:9 | | Imagen de producto | 2048×2048 px | 1:1 | | Banner de entrada de blog | 1200×600 px | 2:1 | | Cabecera de email | 1200×600 px | 2:1 | | Vista previa de enlace al compartir la tienda | 1200×630 px | 1,91:1 | | Publicación del feed de Instagram | 1080×1350 px | 4:5 | | Story de Instagram | 1080×1920 px | 9:16 | El conjunto básico para una tienda pequeña. Diseña cada tamaño a propósito en lugar de estirar una imagen para que sirva para todos. - Principal 16:9: 1920 × 1080 - Producto 1:1: 2048 × 2048 - Banner de blog 2:1: 1200 × 600 - Story 9:16: 1080 × 1920 Las cuatro formas en las que vive una tienda, dibujadas a escala. La imagen principal y la story son opuestas, por eso un solo archivo nunca cubre las dos. Las imágenes de producto cuadradas importan más de lo que parece. Cuando todas las fotos de una colección tienen la misma forma, la cuadrícula se alinea y el ojo compara productos en lugar de fijarse en bordes irregulares. Los 2048 píxeles también dan al zoom de la página de producto detalle suficiente para que merezca la pena tocarlo. El tamaño de la vista previa de enlace se explica en [tamaño de imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size). ## Cómo diseñar un banner principal que aguante en el móvil En un portátil, la imagen principal es ancha y baja. En un móvil, la misma imagen a menudo se recorta casi en cuadrado, o el tema coloca el texto debajo. En cualquier caso los bordes desaparecen, y con ellos todo lo importante que estuviera en los bordes. 1. **Empieza en 1920×1080** Diseña a todo el ancho y luego marca una columna central de unos 1080 píxeles. Esa columna es lo que más probablemente conservará un móvil. 2. **Escribe una línea, no tres** “Ya está aquí la colección de otoño.” gana a un titular, un subtítulo y un código de descuento peleándose por el espacio. El detalle va en la página de la colección. 3. **Usa un solo botón con un verbo** Compra la colección, Ver velas, Descubre las novedades. La mayoría de los temas añaden el botón por ti, así que deja una zona tranquila donde vaya a ir. 4. **Deja que el fondo lleve la marca** Una foto de producto con una habitación recargada detrás compite con el texto. Un campo de color o un material constante detrás de un producto recortado se lee con cualquier recorte. 5. **Compruébalo en tu propio móvil** Las vistas previas del tema ayudan, pero abre la tienda en vivo en un móvil de verdad antes de darla por terminada. Un banner principal ancho de Shopify con el texto Ya está aquí la colección de otoño, centrado sobre un fondo degradado suave Una imagen principal con el texto en la columna central, para que el recorte del móvil conserve todo el mensaje. ## Imágenes de producto que parecen de una misma tienda Los clientes juzgan una tienda por su cuadrícula mucho antes de leer una descripción. Si un producto está sobre un fondo blanco, el siguiente en la encimera de una cocina y el tercero sobre una sábana, la tienda parece improvisada aunque los productos sean excelentes. Elige un fondo y una forma de iluminar, y repítelos. ### Parece improvisada - Un fondo distinto para cada producto - Luz desde la izquierda en una foto y cenital en la siguiente - Productos que llenan el encuadre en unas fotos y diminutos en otras - Formas mezcladas: unas verticales, otras cuadradas - Texto e insignias incrustados en la foto ### Parece una marca - Un color o degradado de fondo para toda la gama - Luz desde el mismo lado siempre - El producto ocupando entre un 70 y un 80 % del encuadre - Todas las imágenes en cuadrado de 2048×2048 - Insignias añadidas por el tema, para que las fotos queden limpias Un degradado suave detrás de un producto recortado funciona bien porque da profundidad sin necesidad de un decorado real. Mantenlo con poco contraste para que el producto siga siendo lo más luminoso del encuadre. Hay más montajes en [fondos para fotos de producto](https://gradiently.design/es/guide/product-photo-backgrounds). Piedra de estudio cálida: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)` Un blanco roto cálido que cae hacia piedra en los bordes, como una luz recogida sobre una mesa. Favorece a cerámica, velas, cosmética y textiles. ## Banners de rebajas en Shopify que siguen pareciéndose a ti Las rebajas son el momento en que casi todas las tiendas pierden su look. El reflejo habitual es rojo, una explosión de estrella y la palabra REBAJAS en mayúsculas, que se parece a todas las demás tiendas ese mismo fin de semana. Conserva tu propio fondo y tu tipografía, y cambia solo las palabras y quizá la intensidad del color. Un banner de rebajas ancho para una tienda Shopify con el texto Rebajas de invierno, 30 % menos, hasta el domingo La imagen principal de rebajas conserva el fondo y la tipografía de la tienda. Una versión en Story vertical de Instagram del mismo banner de rebajas de invierno, con el fondo y el texto a juego El mismo mensaje como story de 1080×1920, para que las rebajas se lean como una sola campaña. - Di la oferta en menos de seis palabras: “Rebajas de invierno. 30 % menos.” - Pon la fecha de fin en la línea superior para que la urgencia sea honesta. - Usa las mismas palabras en la imagen principal, la cabecera del email y la story, y mantén el texto de la story dentro de la [zona segura](https://gradiently.design/es/guide/social-media-safe-zones) central. - Quita el banner cuando terminen las rebajas. Una imagen de rebajas caducada dice a los visitantes que nadie cuida la tienda. Para los fines de semana fuertes, [publicaciones de Black Friday para redes sociales](https://gradiently.design/es/guide/black-friday-post-ideas) y [diseño de publicaciones de rebajas](https://gradiently.design/es/guide/sale-post-design) tienen diseños y textos que puedes tomar prestados. ## Un solo look en la tienda, el email y las redes La imagen principal, la cuadrícula de productos, la cabecera del email y la publicación de Instagram las ve el mismo cliente con pocos días de diferencia. Cuando comparten fondo, fuente de titulares y una paleta pequeña, cada una le recuerda a la anterior. Eso es lo que significa en la práctica la [coherencia de marca](https://gradiently.design/es/guide/brand-consistency) para una tienda. - Blanco estantería: #f7f3ee - Piedra: #d9cdbf - Nogal: #8a6f5a - Tinta: #2f2a26 - Acento terracota: #c8553d Una paleta tranquila para una tienda: dos fondos, un tono medio, una tinta para el texto y un acento reservado para botones y palabras de rebajas. Aquí es donde Gradiently ayuda a una tienda pequeña. Diseña la imagen principal una vez sobre un Mark, un fondo degradado vivo con el que solo tú puedes exportar una vez lo reservas, y Pro la adapta a la story, la cabecera del email y la vista previa de enlace en un solo paso. La creación en lote, también en Pro, rellena una plantilla de ficha de producto a partir de una hoja de cálculo de nombres y precios, para que los gráficos de una colección nueva salgan a juego. [Un look, todos los tamaños](https://gradiently.design/es/guide/one-look-every-size) muestra el método. > **Escribe el texto alternativo al subir** Shopify te permite añadir texto alternativo a cada imagen de producto y a cada banner. Describe con palabras sencillas lo que hay en la imagen. Ayuda a quien usa lector de pantalla y da a los buscadores algo que entender. ## FAQ ### ¿Qué tamaño debe tener el banner de una tienda Shopify? Diseña la imagen principal de la página de inicio a 1920×1080 píxeles y mantén el titular y el botón en una columna central de unos 1080 píxeles de ancho, porque la mayoría de los temas recortan los laterales en el móvil. ### ¿Cuál es el mejor tamaño de imagen de producto para Shopify? Un cuadrado de 2048×2048 píxeles. Mantiene uniforme la cuadrícula de la colección y da al zoom del producto detalle suficiente. ### ¿Por qué mi banner de Shopify se ve recortado en el móvil? Los temas encajan un banner ancho en una pantalla de móvil más estrecha cortando los laterales o cambiando su altura. Mantén las palabras y los productos importantes en el centro de la imagen. ### ¿Debo poner texto en la imagen del banner de Shopify? Un texto corto está bien si va centrado, pero muchos temas permiten añadir el titular y el botón como texto real sobre la imagen, que se mantiene nítido y es más fácil de cambiar. ### ¿Cómo consigo que mis fotos de producto sean coherentes? Usa un solo fondo, luz desde el mismo lado, imágenes cuadradas de 2048×2048 y el producto ocupando una proporción parecida en cada encuadre.