Páginas de marca: qué poner en tu tienda online

Hay tres tipos de página de marca, y en las tiendas que revisamos suelen ser de las páginas más descuidadas: una plantilla reutilizada y los bloques de siempre.

Como hicimos con la página de inicio y la de categoría, te contamos cómo las trabajamos nosotros, franja a franja. Es nuestro punto de partida; en cada tienda, el detalle se decide según su catálogo y sus clientes.

Tres páginas, un recorrido

Cada una tiene su trabajo, y juntas forman un recorrido: del índice a la marca, y de la marca al producto.

Ampliar

• El índice de marcas, para encontrar la marca entre todas.

• El listado de marca, la página de la mayoría de marcas, para llegar al producto.

• El hub de marca, para las que lo abarcan casi todo: enseña sus secciones, y cada una acaba en un listado.

El índice de marcas

En una tienda con cien o doscientas marcas, la página que las reúne suele acabar siendo una lista larguísima. Quien busca una marca concreta tiene que recorrerla entera, y eso si recuerda cómo se escribe. Es una página sencilla, pero tiene más que mejorar de lo que parece.

Qué tiene que conseguir

Su objetivo es uno: que el cliente llegue rápido a la marca que busca. Para eso le bastan dos franjas: la orientación, que es el título de la página (con las migas de pan y la URL, no necesita más), y el núcleo, las marcas, donde está todo el trabajo.

Si tu tienda vende dos o tres marcas, o es de una sola, el índice pesa poco, y quizá no compense ni enlazarlo desde el menú principal. Todo lo que sigue cobra sentido cuando las marcas se cuentan por decenas o por cientos.

El índice típico

La mayoría de tiendas lo resuelven igual: un enlace «Marcas» en el menú que lleva a una página con todos los logos en una rejilla. Si tienes pocas marcas, no necesitas más.

Los errores que más vemos son de logos: pixelados o, peor, uno que no es de esa marca. Si te falta el logo, enséñala al menos con su nombre. Nos han llegado índices con la imagen equivocada y sin el nombre: así no hay forma de encontrar nada.

Muchas marcas: agruparlas por inicial

Cuando las marcas se cuentan por cientos, la rejilla sin más se hace difícil de recorrer. Lo más eficiente es agruparlas por su inicial: las de la A juntas, las de la B juntas y las que empiezan por número, en su grupo. Quien recuerda cómo empieza el nombre va directo.

Encima, una fila de letras para saltar a cada grupo: pulsas la M y ves las de la M. Las letras sin marcas, nosotros no las quitamos: las dejamos apagadas, para que se vea que no hay y nadie se quede buscándolas.

Volver a las letras sin subir del todo

Si has bajado hasta la S y quieres ir a la E, no deberías tener que subir hasta arriba. En estos detalles se nota una página bien pensada.

Atida | Mifarma, una tienda que hace muy bien muchas cosas y de la que se aprende navegándola, ya agrupa sus marcas por letra. Pero con tantas, volver a la fila de letras cuesta mucho scroll, y eso en ordenador.

Nosotros tratamos la fila de letras como un índice que aparece cuando hace falta. Al bajar, deja todo el espacio a las marcas, que es a lo que has venido: ni cabecera ni menú. En cuanto subes un poco, reaparece fija arriba y saltas a la letra que quieras.

Con logos o solo con el nombre

Una marca se reconoce antes por su logo que por su nombre. Haz la prueba: encontrar Fila, Hero o Intel entre logos es casi inmediato; encontrar Roku, Napapijri o Samsung en una lista de nombres cuesta bastante más. Con los nombres hay que ir a la letra exacta y leer; los logos, la vista los encuentra sola.

Pasa sobre todo con quien no recuerda bien cómo se escribe la marca, que es más gente de la que parece. Y quien acaba de ver su logo, por ejemplo en una respuesta de Google, lo reconoce a la primera.

Por eso, cuando hay muchas marcas, nosotros acompañamos cada nombre con su logo, bien visible en ordenador y en móvil. Y pensamos de antemano cómo se ve una marca sin logo, porque alguna habrá.

Marcas destacadas encima del índice

Encima del índice completo cabe un bloque de marcas destacadas: las más representativas o las que más le interesan a tu negocio. No sustituye al índice; lo acompaña.

El índice en el móvil

En el móvil el problema se multiplica. Una fila de letras que hay que arrastrar de lado deja la Z muy lejos. Ponerlas en varias columnas ayuda, pero vuelves a tener que subir hasta arriba cada vez que cambias de letra.

Nuestra propuesta: cuando la fila de letras sale de la pantalla, una barra fija abajo te dice en qué letra estás. Al pulsarla, se abre un panel desde abajo con todas las letras, y al elegir una vas directo a su grupo. Eso sí, los elementos fijos, con cabeza: no cargamos la tienda de ellos porque sí.

Con esto, el índice sirve igual para una tienda con pocas marcas que para una con cientos.

El listado de marca

Quien entra en la página de una marca, por ejemplo Logitech, ya sabe qué marca quiere: le falta llegar al producto. Se parece mucho a la página de categoría: el mismo objetivo, las mismas cuatro franjas y bloques muy parecidos. Lo que cambia es la lógica que decide qué sale en cada bloque: los más vendidos de una categoría son productos de esa categoría; los de una marca, productos de esa marca, sean de la categoría que sean.

Hay marcas que lo abarcan casi todo y piden un hub, que vemos más abajo. La mayoría se resuelven con un listado, que es lo que contamos aquí.

1. Orientación

Lo que sitúa al cliente es la cabecera de la marca: el nombre, el logo y una descripción corta. Aquí el logo pesa más que en una categoría, porque la marca se reconoce antes por él.

Subsecciones dentro de una marca

Que en Apple quieras ir directo a los MacBook o a los iPad tiene todo el sentido. Pero casi ningún CMS lo resuelve: ni WooCommerce, ni Shopify, ni Magento entienden que una marca tenga subsecciones.

Ante eso se suele hacer una de tres cosas: olvidarse de ellas, meterlas en los filtros o crearlas como categorías. Lo último es lo que más daño hace: la marca de un producto y su categoría tienen que ser campos independientes, y si los mezclas se rompe la relación entre producto, marca y categoría.

Tampoco son submarcas. Son el cruce de una marca con un tipo de producto: «Ratones Logitech» no es una marca nueva ni una categoría; son los ratones de Logitech.

Ampliar

Para tenerlas sin romper nada, la tienda tiene que poder ir más allá de lo que da la plataforma. Es una de las razones por las que trabajamos tanto en headless: en un PrestaShop headless, la tienda que ve el cliente la programamos aparte, así que podemos crear páginas que PrestaShop no tiene, como estas subsecciones, sin tocar cómo se guardan los productos.

Como pasaba con las subcategorías, en la fila de atajos de la marca pueden ir subsecciones y filtros, y los dos llevan a los mismos productos. Cambia adónde te llevan: «Ratones» como subsección abre su propia página, con su texto, que se puede posicionar o usar en campañas; como filtro, te deja en la página de Logitech con el filtro puesto.

2. Núcleo

Es el listado de productos, con los mismos bloques que en una categoría. Lo que cambia está en los filtros.

Filtros generales en una barra fija

Los que sirven para cualquier marca, como la disponibilidad, el precio o la valoración, van en una barra fija arriba, también en el móvil. Y tiene que ser fácil quitarlos y volver al listado completo.

Filtrar por categoría dentro de la marca

En una categoría, la marca es uno de los filtros generales. En una marca, el que más se usa es el de categoría: «Ratones y trackpads» filtra lo mismo que su atajo de arriba.

Ampliar

Conociendo bien el catálogo y lo que busca el cliente, esos atajos se eligen bien y le ahorran clics y tiempo. Es lo que hace que esta página convierta.

Filtros propios de cada marca

En la columna van los filtros propios de la marca. Si los productos de Logitech tienen el dato de conexión, se puede filtrar por inalámbrico a 2,4 GHz, un filtro que no tiene por qué servir en otra marca.

Compra con un experto al acabar el listado

Cuando el cliente ha pasado el listado sin encontrar lo que buscaba, la barra de filtros desaparece y le ofrecemos comprar con una persona. Como en la categoría: después del listado, no antes.

3. Descubrimiento

Es para quien ha llegado al final sin encontrar el producto. Nosotros ponemos:

• Los más vendidos de la marca. Si se venden, probablemente se sigan vendiendo, y les das exposición. Con cuidado: si el listado tiene tres productos, no repitas esos tres debajo.

• Las categorías principales de sus productos. Si en Logitech no has encontrado lo que buscabas, te llevamos a otros teclados o a otras cámaras.

Artículos del blog: mejor en el hub

En el listado, el cliente ya está cerca del producto, y un artículo del blog puede distraerle. En el hub la intención es más general (quien busca «Apple» puede querer muchas cosas), y ahí sí los ponemos. Eso sí: si no tienes una buena guía, mejor no ponerla en ninguno de los dos.

4. Ayuda

Una descripción larga y las preguntas frecuentes, como en la categoría, sustanciales y sobre la marca entera.

Si en la página de Logitech hablas de un tipo de producto que tiene su propia página, como sus ratones, las dos acaban compitiendo por lo mismo.

Una marca no siempre es igual

Como en la categoría, no es lo mismo una marca con cientos de productos que una con tres. Si todo cabe en una página, sobran el «cargar más» y la paginación; si hay muy pocos, quitamos el bloque de filtros para dar más sitio a los productos.

También cambian los atajos de arriba: hay marcas con solo filtros destacados y otras que mezclan filtros con tipos de producto o gamas. Cada marca es un mundo: Apple pone nombre propio hasta a sus tipos de producto, como MacBook o iPad.

Las marcas también se buscan

Cuando analizamos la demanda de una tienda en los buscadores, las categorías y las marcas son las páginas que más búsquedas concentran. No son las que más convierten, porque quien busca un producto concreto sabe muy bien lo que quiere, pero sí las de más volumen.

En una tienda de informática, a cualquiera le vienen a la cabeza «ordenadores» o «portátiles» antes que un modelo. Con las marcas pasa igual: posicionar por «Logitech» te pone delante de todo el que busca la marca, aunque esté menos decidido que quien busca un producto.

El hub de marca

Hay marcas que lo abarcan casi todo. LG, en una tienda de electrónica, va desde frigoríficos hasta monitores; Apple tiene ordenadores, teléfonos, relojes y accesorios. Si todo eso se pone encima de la rejilla de productos, salen demasiados atajos y demasiados filtros, y el cliente tiene que ordenar el catálogo antes de empezar a ver productos. Para esas marcas, la página enseña primero sus grandes secciones.

Cuándo una marca necesita un hub

Un hub es una portada: en vez de productos, enseña las grandes puertas de la marca. Pueden ser tipos de producto, como lavadoras o monitores en LG, o gamas, como Mac, iPhone o Apple Watch en Apple. Lo que pide un hub no es que la marca tenga gamas, sino que abarque muchos tipos de producto. En Apple coincide, porque cada gama es un tipo de producto.

El criterio es sencillo. Si los productos de la marca se ordenan con pocos atajos y filtros, basta un listado; si salen demasiados o confunden, toca un hub. En nuestra tienda de ejemplo, Logitech es un listado y Apple, un hub.

Tiene que ser la página de marca

Hub o listado, en la administración es la misma página: la de la marca, con sus productos asociados y de la que cuelga cada sección. Si la portada se monta como una página del CMS, no puede llevar productos ni páginas hijas, y las migas de pan se rompen. Y si las secciones se crean como categorías, se rompe la relación entre producto, marca y categoría.

1. Orientación

Arriba van las migas y la presentación de la marca: el logo, el nombre, una descripción corta y, si encaja, una fotografía. El logo nos parece importante, como en el listado, por el reconocimiento.

Lo que no ponemos aquí son atajos a las secciones, porque son justo las puertas del núcleo. En la página de Samsung de MediaMarkt, en escritorio, se ve el efecto: sin saber qué hay detrás de esa decisión, las mismas categorías salen arriba como atajos y abajo como accesos, y se enseña dos veces lo mismo.

2. Núcleo

Donde el listado tenía la rejilla de productos, el hub tiene las puertas: las secciones de la marca y, en cada una, sus subsecciones, lo que en el hub de categorías eran las hijas y las nietas. En Apple, Mac, iPhone, iPad o Apple Watch; y dentro de Mac, el MacBook Air o el MacBook Pro.

Maquetamos para el caso real, no para el ejemplo bonito: Mac puede tener siete subsecciones y Apple TV, ninguna. Para que se vea bien en escritorio y en móvil, las que tienen muchas se recogen en un desplegable.

Ampliar

Al entrar en una sección, como Mac, la página ya es un listado: su foto, sus atajos y sus productos.

Ofertas y novedades sin salir del hub

¿Y quien solo quiere ver lo que Apple tiene en oferta? Debajo de las puertas, con un formato más discreto, van unos atajos que actúan como filtro: ofertas, novedades, mejor valorados y todo el catálogo. Al pulsar uno, sigues en Apple: la presentación no cambia y el núcleo pasa a ser un listado con ese filtro. Al quitarlo, vuelves al hub, sin llevar al cliente de un sitio a otro.

Nombres que se entiendan solos

En la web de Apple, la sección se puede llamar «Watch», porque todo es Apple. En tu tienda, ese nombre es el título de una página y aparece en el buscador, en el blog o en las migas, lejos de la marca. Ahí se entiende mejor «Apple Watch», y lo mismo «Logitech MX» en vez de «MX».

Compra con un experto

Si con las puertas y los atajos aún no ha encontrado lo que busca, al final del núcleo va la compra con un experto, que compara opciones con él.

3. Descubrimiento

Para quien no ha entrado por ninguna puerta, nosotros ponemos, de arriba abajo:

• Un escaparate de una sección, como el iPhone del momento con sus productos.

• Los más vendidos y las novedades de la marca, raíles que sirven para cualquier marca.

• Artículos del blog sobre la marca: qué portátil elegir entre el Air y el Pro, o si el iPhone trae cargador. Cada uno enlaza a sus secciones y productos, así que la portada, los artículos y las secciones quedan conectados. Si no tienes artículos bien trabajados, mejor no los pongas.

• Las categorías relacionadas, casi al final. Sacan al cliente de la marca: más arriba, junto a las puertas, parecerían una puerta más.

Lo que no ponemos en el hub de marca

Algunos bloques de la página de inicio o del hub de categorías no los ponemos aquí, porque sacan al cliente de la marca: el recomendador de compra, que recomienda entre todo el catálogo (para eso ya está la compra con un experto); los banners de promoción, salvo que sean de la propia marca; y un carrusel de marcas, que en la página de una sola no tiene sentido.

4. Ayuda

Una descripción y unas preguntas frecuentes sobre la marca en general, no sobre el MacBook: esas dudas van en su sección, que es donde está quien las tiene.

Cómo llevarlo más lejos

Si quieres llevar el hub un paso más allá, hay dos frentes. Un recomendador de la propia marca, que ayude a elegir entre un MacBook Air y un Pro sin salir de Apple. Y la base de todo: decidir qué producto va en cada sección y cuidar cada una, con su imagen y su texto. Un hub montado deprisa, con puertas vacías o páginas mal escritas, es una mala experiencia para quien entra.

Tres páginas con más recorrido del que parece

Las páginas de marca suelen resolverse con una plantilla reutilizada y los bloques de siempre. Nosotros creemos que dan mucho más de sí: el índice, para encontrar la marca en segundos; el listado, para llegar al producto; y el hub, para las marcas que lo abarcan casi todo. En algunas tiendas las marcas pesan poco, pero en la mayoría tienen mucho recorrido.

Diseñarlas así, cada una con su trabajo, es parte de lo que hacemos en conversión.