Discuss a project
Home
  • Screenshot of Adega Paradiso, image 1 of 10
  • Screenshot of Adega Paradiso, image 2 of 10
  • Screenshot of Adega Paradiso, image 3 of 10
  • Screenshot of Adega Paradiso, image 4 of 10
  • Screenshot of Adega Paradiso, image 5 of 10
  • Screenshot of Adega Paradiso, image 6 of 10
  • Screenshot of Adega Paradiso, image 7 of 10
  • Screenshot of Adega Paradiso, image 8 of 10
  • Screenshot of Adega Paradiso, image 9 of 10
  • Screenshot of Adega Paradiso, image 10 of 10

Adega Paradiso

Shopify e-commerce | Figma UI implementation + Liquid, HTML, CSS, JavaScript and JSON

Platform
Shopify
Period
Jan to Feb 2025
Stack
  • Shopify
  • HTML
  • CSS
  • JavaScript
  • JSON
This store is no longer available. Discuss a similar project

Overview

Adega Paradiso was an important milestone in my freelance journey, as my second professional project. The client brought a bold Figma layout, featuring ticket-style cards, which increased complexity and made the project a strong execution challenge.

Context and objective

The objective was to translate the Figma design into a Shopify store with maximum fidelity, preserving identity, hierarchy, and visual polish. The experience needed to perform equally well on desktop and mobile, delivering a sophisticated, scan-friendly, and commercially effective storefront for a wine catalog.

The challenge

The core challenge was implementing a layout that initially seemed difficult to reproduce inside Shopify, especially due to the ticket-style cards and the need to maintain consistency across sections. In addition, the product page had to be information-rich without feeling heavy, organizing technical wine details in a visual, easy-to-consume format.

The strategy

The strategy was to treat the UI as a system and implement each component with precision, ensuring the Figma visual standard remained consistent throughout the journey. In parallel, the product page was structured to transform technical wine information into scan-friendly content, using icons and metafields as visual support, increasing perceived quality and supporting purchase decisions.

What was implemented

High-fidelity Figma implementation:

  • Ticket-style cards: component built with custom structure and CSS, preserving the look and finish of the original layout.
  • Full responsiveness: grids and sections adapted to maintain readability and visual consistency on desktop and mobile.
  • Hierarchy and consistency: standardized spacing, typography, and colors to sustain a sophisticated look across the store.

Rich and scan-friendly product page:

  • Detailed metafields: structured data such as origin, profile, and aging potential to enrich product content.
  • Illustrative icons: iconography applied to transform technical information into fast, readable insights and reinforce perceived value.
  • Well-distributed content: blocks organized so the page stays informative without feeling overloaded.

Applied technical stack:

  • Liquid and JSON: theme customization and configuration of sections and data to support the UI and metafields.
  • HTML and CSS: component development and visual refinement with attention to detail.
  • JavaScript: interaction and behavior adjustments to keep the experience dynamic and smooth.

Professional delivery and validation:

  • Workana project: negotiation and delivery with professional alignment, ensuring a complex design was executed with quality.

Result

The result was a visually sophisticated and consistent online store, with an optimized experience for desktop and mobile. The product page became a key differentiator, turning wine information into a clear and premium presentation through metafields and iconography. Adega Paradiso further consolidated my skills in front-end execution, high-fidelity UI implementation, and advanced Shopify customization.