Adega Paradiso
E-commerce Shopify | Implementación de UI desde Figma + Liquid, HTML, CSS, JavaScript y JSON
- Plataforma
- Shopify
- Período
- ene. a feb. de 2025
- Stack
- Shopify
- HTML
- CSS
- JavaScript
- JSON
Visión general
Adega Paradiso fue un hito importante en mi trayectoria como freelancer, siendo mi segundo proyecto profesional. El cliente presentó un layout en Figma con una propuesta visual audaz, incluyendo cards con formato de ticket, lo que aumentó la complejidad y convirtió el proyecto en un gran desafío de ejecución.
Contexto y objetivo
El objetivo fue traducir el diseño de Figma a una tienda Shopify con máxima fidelidad, preservando identidad, jerarquía y acabado visual. La experiencia debía funcionar con la misma fuerza en desktop y mobile, entregando una vitrina sofisticada, escaneable y comercialmente eficiente para un catálogo de vinos.
El desafío
El desafío principal fue implementar un layout que, a primera vista, parecía difícil de reproducir en Shopify, especialmente por los cards en formato de ticket y por la necesidad de mantener consistencia entre secciones. Además, la página de producto debía ser rica en información sin verse pesada, organizando detalles técnicos del vino de forma visual y fácil de consumir.
La estrategia
La estrategia fue tratar la UI como un sistema y ejecutar cada componente con precisión, asegurando que el estándar visual de Figma se mantuviera a lo largo de toda la experiencia. En paralelo, la página de producto fue estructurada para transformar información técnica en contenido escaneable, utilizando íconos y metafields como soporte visual, elevando la percepción de calidad y facilitando la decisión de compra.
Lo que se implementó
Implementación fiel de Figma:
- Cards con formato de ticket: construcción del componente con estructura personalizada y CSS, preservando el estilo y el acabado del layout original.
- Responsividad completa: adaptación de grids y secciones para mantener legibilidad y consistencia visual en desktop y mobile.
- Jerarquía y consistencia: estandarización de espaciados, tipografía y colores para sostener una estética sofisticada en toda la tienda.
Página de producto rica y escaneable:
- Metafields detallados: estructuración de datos como origen, perfil y potencial de envejecimiento para enriquecer el contenido del producto.
- Íconos ilustrativos: uso de iconografía para transformar información técnica en lectura rápida y reforzar valor percibido.
- Contenido bien distribuido: organización por bloques para que la página sea informativa sin verse sobrecargada.
Stack técnico aplicada:
- Liquid y JSON: personalizaciones del tema y configuración de secciones y datos para soportar la UI y los metafields.
- HTML y CSS: construcción de componentes y refinamiento visual con atención a los detalles.
- JavaScript: ajustes de interacción y comportamiento para mantener una experiencia dinámica y fluida.
Entrega profesional y validación:
- Proyecto vía Workana: negociación y entrega con alineación profesional, garantizando que una propuesta compleja fuera ejecutada con calidad.
Resultado
El resultado fue una tienda online visualmente sofisticada y consistente, con una experiencia optimizada para desktop y mobile. La página de producto se convirtió en un diferencial, transformando información del vino en una presentación clara y premium mediante metafields e iconografía. Adega Paradiso consolidó aún más mis habilidades en front-end, implementación fiel de UI y personalización avanzada en Shopify.