Arauma Coffee

Arauma Coffee es una marca de café de especialidad 100% costarricense con tres referencias de origen único: Latido del Bosque de Monteverde, Espíritu Carmesí de Tarrazú y Alma Serena de Naranjo. Cada bolsa cuenta una historia de terroir específico, proceso y altitud. El reto era trasladar esa identidad premium al mundo digital sin perder la autenticidad de la marca.

El reto

Arauma nació sin presencia digital. El reto era construir desde cero una tienda en Shopify que comunicara el nivel del producto desde el primer segundo: una marca de café de especialidad a precio premium necesita que el sitio venda la experiencia antes de que el usuario lea una sola descripción de producto.

El segundo reto era técnico: Shopify tiene limitaciones inherentes en rendimiento que no son controlables desde el tema. Hay CSS y JS de plataforma que Lighthouse siempre va a marcar como render-blocking, sin importar qué tan limpio sea el código propio. Trabajar dentro de esas restricciones y aun así lograr Core Web Vitals excelentes requería decisiones muy precisas en cada elemento controlable.

La tienda tenía que ser bilingüe desde el día uno. El mercado objetivo incluye consumidores costarricenses y compradores internacionales. Eso implicaba arquitectura de URL correcta, hreflang bien implementado y meta tags independientes por idioma, no traducciones literales.

La solución

Se construyó un tema Shopify completamente personalizado. El resultado es un estilo "blanco mineral premium": fondos blancos puros en secciones de contenido, tipografía Bricolage Grotesque para los títulos y Jost para el cuerpo del texto, ambas self-hosted para eliminar la dependencia de Google Fonts y reducir el número de conexiones de red al cargar la página.

El hero section usa un slider tipo Bonsai: pantalla completa, fondo saturado por café, con las tres bolsas de producto rotando automáticamente. El slider es JavaScript vanilla con soporte para swipe táctil en móvil y teclado para accesibilidad. No hay librerías externas para el carrusel: cada línea de código tiene un propósito.

Para la página de producto, se implementó un radar de perfil de taza que muestra visualmente los atributos del café (intensidad, aroma, acidez, cuerpo, dulzor, equilibrio) usando SVG puro dibujado desde metafields de Shopify. La región de origen se lee de un metafield personalizado y se muestra como eyebrow encima del nombre del producto.

Proceso de diseño

La paleta de colores es deliberadamente simple: blanco puro, negro casi total para el footer y tipografía, y un acento muy sutil. No hay colores "de café" (marrones, dorados) porque ese cliché contradice el posicionamiento premium de la marca. La elegancia viene del espacio, la tipografía y la fotografía del producto.

Bricolage Grotesque fue la elección tipográfica clave. Es una fuente que comunica artesanía y modernidad al mismo tiempo, sin caer en lo genérico de las sans-serif de siempre. Funciona especialmente bien en tamaños grandes donde el detalle de sus trazados se vuelve visible.

Rendimiento

Lograr CLS 0 y TBT 0 en una tienda Shopify requiere entender exactamente qué genera layout shift y qué bloquea el hilo principal. El CLS se eliminó con dimensiones explícitas en las imágenes del hero y usando fuentes self-hosted con font-display swap junto con los valores correctos de ascent-override y descent-override.

El TBT se resolvió moviendo todo el JavaScript no crítico a carga diferida y reemplazando las dependencias externas por código vanilla. El slider del hero en JavaScript vanilla pesa una fracción de lo que pesaría con una librería como Swiper, y hace exactamente lo que necesita sin código muerto.

SEO y estructura de datos

El schema JSON-LD implementado incluye cinco tipos: Organization, WebSite con SearchAction, Product con ProductGroup, Offer con precio en CRC y disponibilidad, y FAQPage con cinco preguntas frecuentes. Esto le da a Google toda la información estructurada para potenciales rich results y para que los modelos de IA puedan responder preguntas sobre la marca con información precisa.

GA4 se integró a través de la app oficial de Google & YouTube de Shopify, que es el método correcto para tiendas Shopify sin plan Plus: garantiza tracking de checkout completo que GTM no puede dar en ese plan.

Aprendizaje

Este proyecto confirmó que el trabajo más valioso al construir una tienda nueva no es el que se ve, sino el que se resuelve. El radar de perfil de taza en SVG desde metafields, el sistema de fuentes self-hosted con override correcto, la estrategia de carga de imágenes por viewport: ninguno de esos detalles es obvio a primera vista, pero todos suman a una experiencia que funciona bien en métricas y en percepción.