Trabajando en una plantilla personalizada para una tienda de Shopify

Cliente
Ginjan es una compañía de bebidas de Harlem fundada por los hermanos Mohammed y Rahim Diallo, que llevan bebidas tradicionales de África Occidental a una audiencia global. Inspirados en el jugo de jengibre “ginjan” de su infancia en Guinea, crearon una línea de jugos cold-pressed y cafés “Born of Africa, Made in New York”. La marca está arraigada en cultura y comunidad: de un carrito en la calle a Whole Foods y a sus propios cafés en Harlem.
Descripción
Ginjan Bros es una compañía de bebidas de Harlem fundada por hermanos que trajeron bebidas tradicionales de jengibre de Guinea a Nueva York: de un carrito a los estantes de Whole Foods y a sus propios cafés. La marca tiene identidad clara, una historia de origen real y una línea que cubre jugos cold-pressed, cafés y merch. El trabajo era tomar un diseño de The Bright Republic y convertirlo en una tienda Shopify funcionando, construida con Liquid y Tailwind CSS, lo bastante flexible para que marketing la gestione sin depender de un developer.
Una red de productos limpia y moderna que muestra la mercancía de Ginjan. El diseño utiliza amplios espacios en blanco y botones de llamada a la acción «Más información» y «Caja» coherentes para crear una experiencia de compra limpia y de primera calidad que sea fácil de navegar.
La sección principal de comercio electrónico para los productos de bebidas y café de Ginjan tiene un diseño de interfaz de usuario que destaca toda la familia de productos con imágenes vibrantes y precios claros, utilizando diseños consistentes para cada artículo a fin de garantizar una experiencia de compra coherente y escaneable.
La página de detalles del vaso Kakoulima tiene un diseño que presenta una imagen destacada del producto, opciones de compra claras y una sección que dice «También te puede gustar» que vende de forma cruzada productos relacionados, lo que genera una mayor participación y ventas.
La interfaz de usuario de la página de producto de un paquete de 12 bebidas de Ginjan's tiene un diseño que prioriza las conversiones con opciones claras de compra única y «Suscríbete y ahorra», respaldadas por íconos orientados a los beneficios e información nutricional detallada para fomentar la confianza de los clientes.
La página «Acerca de nosotros» creada utiliza imágenes y tipografías poderosas para contar la historia del origen de la marca: el diseño transmite una conexión emocional al tejer una narrativa convincente con un diseño visualmente atractivo al estilo de una línea de tiempo.
Codificamos el diseño para crear una maquetación única de la historia de la marca, combinando una narración detallada con una cronología limpia y minimalista de los hitos de la empresa. Este diseño comunica de manera eficaz la trayectoria y los logros de Ginjan, creando autenticidad y confianza en la marca.
Como punto culminante de los pequeños detalles: la mitad inferior de la página de inicio está diseñada para impulsar la acción: «El mundo, conoce a África. Una vez más, el encabezado va acompañado de un claro llamado a la acción «Da tu primer sorbo >», que conduce a un pie de página completo y bien organizado con enlaces a redes sociales y suscripciones a boletines. ‍
El diseño del blog y centro de contenido de Ginjan utiliza una sólida jerarquía visual con un gran artículo destacado y una cuadrícula de tarjetas más pequeñas en la parte inferior, lo que crea una experiencia atractiva y fácil de navegar para los lectores.
Una sección rica en contenido del sitio web muestra recetas de cócteles e historias destacadas con un diseño que utiliza un diseño visualmente atractivo basado en tarjetas e incorpora un formulario de suscripción a boletines con estampado llamativo para captar clientes potenciales de manera efectiva.
Un diseño de página de artículos limpio e inmersivo prioriza la legibilidad con una imagen de héroe fuerte, una tipografía clara e íconos para compartir en redes sociales, creando una experiencia perfecta para los usuarios que interactúan con el contenido de la marca.
La página de inicio del Ginjan Café está diseñada para clientes locales: la interfaz de usuario presenta inmediatamente las tres acciones más importantes del usuario (entrega de pedidos, visualización del menú y Obtener indicaciones) en una barra de acciones prominente. Este enfoque centrado en el usuario, combinado con una fotografía atractiva de la comida, tiene como objetivo impulsar los pedidos en línea y el tráfico peatonal.

El encargo

Ginjan Bros llegó a atQuo con un diseño ya terminado —creado por The Bright Republic— y necesitaba un socio de desarrollo para darle vida en Shopify. El alcance cubría todo el sitio: páginas de comercio electrónico, contenido de marca, una sección de cafetería y un blog. La construcción debía ser lo suficientemente flexible para que un equipo de marketing pudiera gestionarla de forma independiente, lo que significaba que las decisiones de arquitectura eran tan importantes como el resultado visual.

El enfoque técnico

El tema se construyó utilizando el lenguaje de plantillas Liquid de Shopify y plantillas JSON, con estilos de Tailwind CSS. Esta combinación proporcionó al sitio una clara separación entre estructura y contenido: las secciones son modulares, el contenido es editable a través del panel de administración de Shopify, y añadir o reorganizar páginas no requiere tocar código.

Para una marca que se mueve tan rápido como Ginjan —nuevos productos, campañas estacionales, actualizaciones de la cafetería, contenido editorial—, ese tipo de autonomía no es opcional. Es la diferencia entre un sitio que sigue el ritmo de la marca y uno que crea un cuello de botella.

Lo que construimos

El catálogo de productos abarca tanto bebidas como artículos de marca, cada uno con diseños de cuadrícula coherentes que facilitan la navegación sin restar valor a la marca. Las páginas de detalle de producto incluyen opciones de suscripción y compra única, información nutricional y secciones de venta cruzada que mantienen a los clientes recorriendo el catálogo.

La sección "Sobre nosotros" se diseñó para transmitir todo el peso de la historia de origen de Ginjan: los hermanos, Guinea, Harlem, el carrito callejero, el crecimiento. Un diseño de línea de tiempo organiza los hitos sin que parezcan un comunicado de prensa. El diseño utiliza fotografía y tipografía para dejar que la historia hable por sí misma.

El blog y el centro de contenidos se construyeron con un formato de artículo destacado y una cuadrícula de tarjetas debajo, estructurados tanto para contenido editorial como para recetas de cócteles. Un registro para boletines con un tratamiento visual distintivo de Ginjan se integra dentro de la sección de contenido en lugar de ser un añadido posterior.

La página de aterrizaje de la cafetería está diseñada para la acción: una barra inmediata con llamadas a la acción para entrega, menú y direcciones, apoyada por fotografía gastronómica. Para un local físico, el objetivo de la página es llevar a las personas de la pantalla a la puerta lo más rápido posible.

La página de inicio cierra con una sección de llamada a la acción anclada por "World, meet Africa. Again." —la voz de la marca en su máxima expresión—, que conduce a un pie de página con enlaces a redes sociales y captura de boletines.

El resultado

Una tienda Shopify totalmente funcional que ejecuta fielmente el diseño original y brinda al equipo de Ginjan las herramientas para mantener el sitio activo sin ayuda externa. La historia de la marca, el comercio y la experiencia de la cafetería conviven bajo el mismo sistema, y el equipo puede actualizar cualquiera de ellos por su cuenta.

Si algo de esto suena a que podemos construir juntos, conversemos.

Qué hacemos