Overview
Flowrs Tea is a premium, eco-conscious tea brand with a strong visual identity and a growing eCommerce business. Their existing Shopify store was running on an unstable, disorganized theme that no longer reflected the brand they had built — or the polished Figma designs their team had developed for a refresh.
They came to Figmafy to turn those Figma designs into a modern, responsive Shopify store that aligned with their brand values, worked flawlessly on every device, and could be delivered within a tight 1.5-week window.
The challenge
Flowrs Tea's situation was common but consequential: a brand that had outgrown its original Shopify setup. The old theme was unstable, hard to maintain, and out of sync with the refined designs the team had invested in. The redesign needed to solve structural problems while also elevating the shopping experience.
The requirements were clear:
- Reconstruct the Shopify theme using the Dawn theme as a stable foundation, replacing the disorganized original
- Convert Figma designs into pixel-accurate templates across all pages and breakpoints
- Build a custom feature collection slider for showcasing product ranges on the homepage
- Implement enhanced collection page interactions including hover states on product cards
- Build custom add-to-cart and quantity buttons with JavaScript functionality that matched the design specs
- Create a bespoke accordion component for product information and FAQ content
- Deliver the full build within 1.5 weeks
Flowrs Tea's existing theme wasn't just outdated — it was structurally unstable. The rebuild had to start from a clean foundation rather than patch the existing code, which is why the Dawn theme reconstruction was the right architectural call.
Our solution
We assigned a dedicated Shopify developer and structured the sprint around theme reconstruction first, then custom features, then QA — ensuring the foundation was solid before layering in the interactive elements.
- Theme reconstruction. We rebuilt the store on Shopify's Dawn theme, replacing the unstable original structure with a clean, maintainable codebase that Figma designs could be faithfully translated into.
- Figma-to-Shopify conversion. Every page template — homepage, collection page, product detail page, and supporting pages — was built to match the Figma designs across desktop, tablet, and mobile breakpoints.
- Custom collection slider. We built a feature collection slider for the homepage that showcases Flowrs Tea's product ranges with smooth transitions, matching the interaction design specified in Figma.
- Collection page interactions. Product cards on the collection page received hover states that surface key product information without requiring the user to navigate away — improving browsing flow and product discovery.
- Custom cart UI. The add-to-cart button and quantity selector were built from scratch in JavaScript to match the brand's design language precisely, replacing Dawn's default controls.
- Accordion component. We built a bespoke accordion for product detail pages and informational pages, giving the team a flexible content component that works consistently across the store.
Technologies used
- Shopify — eCommerce platform and store infrastructure
- Dawn theme — clean, stable Shopify theme foundation (rebuilt and customized)
- JavaScript — custom add-to-cart functionality, quantity controls, collection slider, and accordion behavior
- Figma — design source for all templates and components
- Custom backend coding — theme customizations beyond Dawn's out-of-the-box capabilities
Results
Figmafy delivered the full rebuilt Shopify store within the 1.5-week timeline. The store is fully responsive across all devices, navigation is smooth, and load times are fast. The custom components — slider, hover states, cart UI, and accordion — all function as designed and give Flowrs Tea a shopping experience that reflects the quality of their brand.
The project outcome exceeded the client's expectations, and Flowrs Tea's business operations are now supported by a stable, well-structured eCommerce platform they can grow with.
Ready to rebuild your Shopify store from your Figma designs? Learn more about our Figma to Shopify service or get a free quote — we'll have your store live on your timeline.
