Shopify Hydrogen theme 'ada ÉLAN' open-sourced for fashion brands

From Repetitive Tasks to Reusable Code: The Genesis of ada ÉLAN

Building a Shopify storefront from scratch often involves a recurring set of tasks. For fashion brands, this typically means setting up a cart, developing a product detail page (PDP), implementing filters, and then dedicating significant time to features that, while not core to initial launch, are crucial for user engagement and conversion. These often include wishlists, comparison tools, quick view modals, robust internationalization (i18n), and right-to-left (RTL) language support. Developer Özgür Sağiroğlu, after repeatedly navigating these development cycles, decided to consolidate this effort into a single, polished, and reusable solution.

The result is ada ÉLAN, a Shopify Hydrogen storefront theme specifically designed for fashion brands. It’s not just a boilerplate; it’s a production-ready theme that aims to accelerate development by providing a solid foundation with many of these essential, yet time-consuming, features already implemented. The decision to open-source ada ÉLAN democratizes access to these advanced functionalities, allowing more brands to leverage a high-quality, well-tested starting point.

Core Features and Design Philosophy

ada ÉLAN is built on the latest Shopify Hydrogen stack (version 2025.7) and incorporates modern web development practices and libraries. Its feature set is extensive, addressing both aesthetic and functional requirements critical for fashion e-commerce.

Editorial Design System

The theme features an editorial design system, employing Cormorant Garamond for headings and Plus Jakarta Sans for body text. This combination aims to provide a sophisticated and visually appealing aesthetic suitable for fashion brands. Beyond just font choices, the design system includes documented design tokens, ensuring consistency and facilitating easier customization. This structured approach to design allows brands to maintain a cohesive visual identity across their storefront.

Comprehensive Internationalization and RTL Support

A standout feature is the theme’s real i18n implementation. It supports English, French, and Arabic out of the box. Crucially, it includes full RTL layout support for Arabic, a complex requirement that is often overlooked or poorly implemented in generic themes. This ensures a seamless browsing experience for users regardless of their language or reading direction, expanding the potential market reach for brands using the theme.

Advanced Merchandising Surfaces

Beyond basic product display, ada ÉLAN integrates several advanced merchandising surfaces designed to enhance product discovery and engagement. These include:

• Lookbook: Curated collections of products presented in an editorial style.
• Shop-the-Look: Allows customers to purchase entire outfits or styled ensembles.
• Compare: Enables users to compare multiple products side-by-side based on key attributes.
• Wishlist: A standard feature allowing users to save products for later.
• Quick View: A modal that displays product details without leaving the current page, speeding up browsing.
• Reviews: Integration for customer product reviews, building social proof.

These features collectively contribute to a richer shopping experience, encouraging longer user sessions and potentially higher conversion rates.

Development Stack and Quality Assurance

The technical foundation of ada ÉLAN is robust, utilizing a modern stack that prioritizes performance, developer experience, and maintainability:

• Hydrogen 2025.7: Shopify's framework for building custom storefronts.
• React Router 7: For efficient client-side routing.
• Tailwind CSS 4: A utility-first CSS framework for rapid UI development.
• TypeScript (Strict Mode): Enhances code quality and reduces runtime errors.
• Zustand: A small, fast, and scalable state management solution for React.
• Framer Motion: A powerful animation library for React.

Quality assurance is deeply embedded in the development process. The theme includes unit tests powered by Vitest and end-to-end (E2E) tests covering five different browsers using Playwright. Component documentation is managed via Storybook, providing clear examples and usage guidelines for each UI component. This rigorous testing and documentation strategy ensures the theme is stable, reliable, and easy for other developers to work with.