Trabajando en una plantilla personalizada para una tienda de Shopify

Client
Ginjan es una empresa de bebidas con sede en Harlem fundada por los hermanos Mohammed y Rahim Diallo, que llevan las bebidas tradicionales de África Occidental a una audiencia mundial. Inspirándose en el zumo «ginjan» a base de jengibre de su infancia en Guinea, han creado una célebre línea de zumos y cafés prensados en frío que dicen «Nacidos de África, hechos en Nueva York». La marca está profundamente arraigada en la cultura y la comunidad, y ha pasado de ser una tienda ambulante a abastecer las estanterías de Whole Foods y abrir sus propios cafés en Harlem.
Description
Para Ginjan, ejecutamos una integración completa y personalizada de temas de Shopify basada en un diseño de The Bright Republic. El proyecto se centró en crear una experiencia de usuario altamente flexible y editable para el equipo del cliente. Desarrollamos el tema usando el lenguaje Liquid de Shopify y las plantillas JSON, y lo diseñamos con el marco CSS Tailwind. Esta poderosa combinación estableció una base versátil, que permitió al equipo de marketing de Ginjan administrar y evolucionar fácilmente el contenido de su sitio web para satisfacer sus demandas únicas de flujo de trabajo.
Ginjan - Cuadrícula de productos de mercadería
Ginjan - Línea de productos de comercio electrónico
Ginjan: detalle del producto y venta cruzada
Ginjan: interfaz de usuario de la página del producto
Ginjan - Sección de narración «Acerca de nosotros»
Ginjan: historia de la marca y cronología
Ginjan - CTA y pie de página de la página principal
Ginjan - Blog y artículos destacados
Ginjan - Centro de contenido y boletín CTA
Ginjan - Diseño de página de artículo
Página de inicio de Ginjan - Café
No items found.
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.

The brief

Ginjan Bros came to atQuo with a design already in hand — created by The Bright Republic — and needed a development partner to bring it to life in Shopify. The scope covered the full site: ecommerce pages, brand content, a café section, and a blog. The build had to be flexible enough for a marketing team to manage independently, which meant the architecture decisions mattered as much as the visual output.

The technical approach

The theme was built using Shopify's Liquid templating language and JSON templates, styled with Tailwind CSS. This combination gave the site a clean separation between structure and content — sections are modular, content is editable through the Shopify admin, and adding or rearranging pages doesn't require touching code.

For a brand that moves as fast as Ginjan — new products, seasonal campaigns, café updates, editorial content — that kind of autonomy isn't optional. It's the difference between a site that keeps pace with the brand and one that creates a bottleneck.

What we built

The product catalog covers both beverages and merchandise, each with consistent grid layouts that make browsing easy without flattening the brand. Product detail pages include subscription and one-time purchase options, nutritional information, and cross-sell sections that keep customers moving through the catalog.

The About Us section was built to carry the full weight of the Ginjan origin story — the brothers, Guinea, Harlem, the street cart, the growth. A timeline layout organizes the milestones without making them feel like a press release. The design uses photography and typography to let the story do the work.

The blog and content hub was built with a featured article format and a card grid below it, structured for both editorial content and cocktail recipes. A newsletter signup with a distinctly Ginjan visual treatment sits within the content section rather than as an afterthought.

The café landing page is built around action: an immediate bar with delivery, menu, and directions CTAs, supported by food photography. For a physical location, the page's job is to move people from screen to door as quickly as possible.

The homepage closes with a CTA section anchored by "World, meet Africa. Again." — the brand's voice at its clearest — leading into a footer with social links and newsletter capture.

The outcome

A fully functional Shopify store that executes the original design faithfully and gives Ginjan's team the tools to keep the site alive without outside help. The brand story, the commerce, and the café experience all live under the same system — and the team can update any of it on their own.

Keep| reading, browsing, paging

Our case studies unite high-performance design and tangible results.
Ready to get started?

Deploy your stack

Whether you need to invent the future (Human Layer) or scale the present (Efficiency Layer), the infrastructure is ready.
[ Let's talk → ]

Need something else from the atQuo infrastructure?

Enter frontier layer
(You are here)
Relia
Integrated Teams