Sodasan — German Organic Detergents E-Commerce Store from Figma
Turnkey e-commerce development on OpenCart implementing a custom pixel-perfect Figma design system, eco-certified product specifications, and advanced attribute filtering.
Client and business
Sodasan is the Ukrainian authorized distributor of premium certified organic detergents, eco-friendly cleaning agents, and hypoallergenic laundry products manufactured in Germany. The brand emphasizes sustainability, vegan formulations, and zero synthetic additives.
Starting point and brief
The brand needed an e-commerce platform that communicated pure eco-minimalism while providing powerful e-commerce functionality. A custom Figma UI/UX design had been drafted, requiring pixel-perfect translation into responsive OpenCart Twig templates, along with intuitive filtering by certification (Ecocert, Vegan Society) and product volume.
OCStudio solution
OCStudio implemented the store frontend and backend architecture: handcrafted semantic Twig templates replicating the Figma component library with precision, built custom multi-attribute selectors allowing customers to choose between volume options (500ml, 1L, 5L) with instant price recalculation via AJAX, integrated eco-badge certification labeling, and tuned Core Web Vitals performance.
Project overview
Work delivered
- Full-stack frontend development based on Figma designs using modern CSS and Twig templating.
- Developed dynamic packaging volume selector with real-time price updates.
- Configured advanced faceted filtering by product category, scent, volume, and eco-certifications.
- Integrated LiqPay, Apple Pay, Google Pay, and Nova Poshta automated locker/branch picker.
- Optimized mobile user experience and Core Web Vitals performance.
What the business gained
The online store perfectly aligned with Sodasan global brand guidelines, resulting in a 58% increase in average time on page and a 37% improvement in mobile conversion. The automated packaging switcher reduced duplicate product listings by 65%.
Business context: Sodasan. Delivery details supplied by the project team.
Tell us about your project
Send a URL, catalogue sample and required integrations. We will outline the work and refine the estimate.
Get a store estimate