Suklaaf
Una tienda que vende indulgencia sin culpa: diseño editorial, jerarquía clara de beneficios y un flujo de compra que explica el producto mientras lo vende.
Versión mobile
- 01Shopify (fork de Savor)
- 02Liquid + JSON templates
- 03Sistema de diseño (tokens)
- 04Secciones editables
- 05Página de producto modular
- 06Bundles con descuentos nativos
- 07Judge.me reviews
- 08Mobile-first
Sobre el proyecto
Suklaaf es una marca de chocolate funcional —alto en proteína, con fibra y sin azúcar agregada— que necesitaba una tienda a la altura del producto. Construí el e-commerce sobre Shopify, partiendo del tema Savor y convirtiéndolo en una experiencia de marca: home con storytelling, página de producto modular y un sistema de tokens compartido por todas las secciones. La home se compone de bloques independientes —hero, intro, guilt-free, productos, ingredientes, taste, comparativa, story y footer— y cada uno es configurable desde el editor. La página de producto se dividió en secciones atómicas con galería, selector de packs, beneficios, reviews de Judge.me y recomendaciones. Todo el copy es editable y el layout se pensó mobile-first.
El problema
El chocolate funcional compite contra dos categorías a la vez: el chocolate tradicional (placer) y los suplementos (función). La tienda tenía que resolver esa tensión: sentirse indulgencia, no un frasco de proteína, y a la vez comunicar los números —12g de proteína, 9g de fibra, 0 azúcar agregada— sin perder elegancia. El segundo desafío era operativo: la marca necesitaba editar contenido sin tocar código. Cada sección del sitio debía ser configurable desde el editor de Shopify, con settings para copy, links, colores y productos.
El enfoque
Forkeé el tema Savor y construí las secciones de marca en Liquid puro, sin build pipeline ni apps externas. Un archivo de tokens (--skp-*) define tinta, cocoa, crema, papel y azul, cargado globalmente para que todas las secciones hablen el mismo idioma visual. Cada sección declara su propio schema de settings en el theme editor, así el equipo de Suklaaf puede reordenar, ocultar o reescribir cualquier bloque sin desarrollo. La página de producto se dividió en cuatro secciones independientes: hero con galería y selector de sabores, beneficios, reviews y recomendaciones. Los bundles se apoyan en descuentos nativos de Shopify —sin apps de suscripción ni scripts frágiles— y el preview de precio se calcula en el cliente y se mantiene sincronizado con las reglas reales. Todo el QA se hizo mobile-first, con estados de foco, contraste y accesibilidad siguiendo los estándares de temas de Shopify.