Así que quieres construir una tienda de merchandising para tu empresa

Durante años, nos preguntaron cómo podían conseguir artículos con la marca Webflow. No somos la primera marca en esta situación. Slack marcó la tendencia moderna con sus icónicos calcetines, Fast ha utilizado su tienda para animar a la gente a probar su botón de compra en un clic para adquirir sudaderas nuevas, y Square fue un paso más allá con su propia línea de moda con Cash by Cash App.

Hace poco lanzamos nuestra Tienda de Merchandising y ayudó a recaudar miles de dólares para obras benéficas solo en la primera semana. Aunque ya compartimos un poco sobre por qué abrimos la tienda, queríamos hablar más sobre nuestro enfoque para intentar guiar a otras marcas que puedan encontrarse en esta misma situación en el futuro.

Antes de empezar, aquí tienes algunas preguntas clave que debes considerar:

• ¿Los clientes piden merchandising? Si no hay interés, la gente no comprará los productos, así de simple. Intenta detectar si hay peticiones en redes sociales o comentarios informales antes de embarcarte en esta aventura. Lo último que quieres es invertir mucha energía en crear una tienda que apenas genera interés.
• ¿Cómo puedes simplificar la logística? Gestionar el inventario y los pedidos por tu cuenta requiere tiempo, espacio y recursos. Intenta determinar si es algo que podéis asumir vosotros mismos o si preferís trabajar con un socio que se encargue de toda la impresión y el envío, como hicimos nosotros con Printful. La capacidad de Printful para gestionar el inventario, la impresión y el envío nos facilitó las cosas y nos dio la confianza necesaria para gestionar la tienda.
  

Una vez que hayas respondido a estas preguntas, tendrás que averiguar la mejor manera de representar tu marca de forma auténtica.

Cómo abordamos la tienda de merchandising de Webflow

La idea de crear una tienda de merchandising de Webflow llevaba mucho tiempo sobre la mesa. Una vez que lanzamos la integración con Printful, pensamos que sería una gran oportunidad para ofrecer artículos a nuestra comunidad y, al mismo tiempo, construir una excelente tienda de comercio electrónico.

Los productos

Elegimos los productos basándonos en las peticiones más populares de nuestra comunidad, el diseño de los artículos y su calidad. También tuvimos que tener en cuenta algunas limitaciones, como la calidad de impresión sobre los materiales.

Abastecimiento

Uno de nuestros objetivos es tener tantos productos ecológicos como sea posible. Afortunadamente, pudimos encontrar versiones sostenibles de algunos artículos a través de Printful.

Diseño de los productos

Una vez que tuvimos la lista definitiva de productos, empezamos a crear paneles de inspiración. Se nos ocurrieron varias direcciones, desde algo más ilustrativo hasta un enfoque más minimalista. Tras investigar y hacer una lluvia de ideas, llegamos a la conclusión de que la mayoría de la gente prefiere llevar prendas más minimalistas. También estaba el hecho de que, con Printful, no podíamos controlar totalmente la producción ni la calidad de impresión. Además, nuestra marca Webflow está evolucionando y pensamos que sería mejor mantener un estilo sencillo, así que decidimos apostar por una tipografía simple y bloques de color con un toque de personalidad.

Tras definir el estilo, trabajamos con el equipo de contenido en los posibles textos que aparecerían en los productos. En esta fase de exploración, nuestro objetivo era encontrar el equilibrio entre lo que se sentía como Webflow y algo divertido. Incorporamos elementos de marca como nuestra tipografía, algunos gráficos existentes y nuestros colores corporativos, pero también introdujimos nuevos estilos, tratamientos y elementos en toda la colección.

Después, los redujimos a unos pocos conjuntos. A partir de ahí, mezclamos y combinamos para formar nuestra primera colección de productos. Las decisiones en esta etapa se basaron en las limitaciones de las áreas de impresión y en la coherencia dentro de la colección.

Colaboraciones

También nos asociamos con diseñadores de nuestra comunidad de no code (ThreeSixtyEight, Finsweet y Mackenzie Child) para diseñar algunas versiones especiales de productos. Establecimos pautas para asegurarnos de que entendieran cómo representamos nuestra marca y los diseños en nuestra tienda de merchandising, con el fin de reducir las idas y vueltas en las ediciones. Nuestro objetivo era que las colaboraciones fueran originales, creativas y reflejaran el estilo de nuestros socios, por lo que nuestras pautas se centraron más en nuestra audiencia, la diversidad, equidad e inclusión (DEI), la accesibilidad y las limitaciones en cuanto a colores e impresión.

La construcción del sitio

Queríamos crear un sitio muy minimalista que permitiera que los productos fueran los protagonistas, mientras que la interfaz y las interacciones son intencionalmente simples y monocromáticas. Un par de sitios web que tomamos como referencia al diseñar la estructura fueron Everpress y Actual Source.

Dar vida a la tienda de merchandising requirió el uso del ecosistema de Webflow, incluyendo nuestra integración con Printful, Monto y NoCodelytics. Esta es solo una pequeña muestra de algunos productos excelentes que se integran sobre la plataforma de Webflow y que pueden ser útiles al crear tu propia tienda.

Nuestra esperanza es también contar con una base sencilla sobre la cual podamos iterar. En el futuro, esperamos ofrecer más funcionalidad y un diseño más lúdico a medida que aumente nuestra cantidad de productos y colaboraciones.

Una vez que tuvimos una dirección para el sitio, llegó el momento de entrar en los detalles. Iteramos sobre una nomenclatura coherente para los productos que fuera a la vez descriptiva y concisa. Por ejemplo: “Camiseta I make websites” en lugar de “Camiseta tipográfica”.

También tuvimos que organizar opciones como las variantes de producto, ya sea por color o diseño, mientras decidíamos la cantidad de variantes a ofrecer. Entre nuestras preguntas: ¿Debería cada producto ofrecer una caja de crayones llena de colores, o lo mantenemos simple con tonos mayormente neutros?

Queríamos asegurar cierto ciclo de compra dentro de la tienda para animar a los usuarios a adquirir productos mientras estuvieran disponibles y comunicar a los posibles clientes que todas las ganancias se donarían a una organización benéfica. Una forma de hacerlo fue implementar correos electrónicos de recuperación de carritos abandonados usando Monto.

Dos semanas antes del lanzamiento público, realizamos un lanzamiento interno de prueba con empleados, lo cual fue fundamental para perfeccionar la experiencia de usuario (UX) y solucionar cualquier error antes de que llegara a nuestra comunidad.

Haciéndolo accesible

Diseñamos la tienda de merchandising teniendo en mente una estructura de página semántica y un orden de elementos específico. Por ejemplo, lo que parece una interfaz simple para cada tarjeta de producto es, en realidad, una jerarquía estratégica de elementos, visibilidad condicional y flexbox para asegurar que cada uno se lea en un orden ideal para lectores de pantalla, manteniendo la coherencia con el diseño visual.

Garantizar una experiencia consistente tanto para usuarios de ratón como de teclado también era importante para nosotros. Lo logramos añadiendo un toque de CSS y JS personalizado aquí y allá para elementos como indicadores visuales de estado de enfoque y animaciones en las tarjetas de producto.

Todos los elementos utilizan su propiedad HTML adecuada siempre que es posible, y cuando no, utilizamos roles ARIA y etiquetas para identificarlos como tales. Por ejemplo, aunque no podemos crear elementos HTML <table> tradicionales dentro del Webflow Designer, usamos CSS Grid para crear las tablas de tallas de productos a continuación, junto con roles ARIA para etiquetar los encabezados, filas y columnas en beneficio de diversas tecnologías de asistencia.

Donación de los fondos

Antes incluso de configurar nuestra cuenta de Stripe para recaudar fondos, nos preguntamos qué haríamos con el dinero generado por las ventas. Una tienda de merchandising es divertida, pero no es el núcleo de nuestro negocio. No estamos vendiendo camisetas en la parte trasera de un concierto (uf, ¿recuerdan los conciertos?) para financiar la gira. Planeamos donar nuestras ganancias a una buena causa y, dada la naturaleza global de nuestra comunidad, queríamos que fuera una organización benéfica que apoyara un problema mundial. Elegir 350.org nos pareció una opción natural, dado su importante trabajo en la lucha contra el cambio climático. Planeamos donar los fondos trimestralmente.

Esperamos que esta publicación haya sido útil para guiarte a través de cómo construimos nuestra tienda de merchandising en Webflow. Asegúrate de explorar nuestros productos, comprar algunos y compartir fotos de tu botín.