Agency Figma Turned Into a Live WooCommerce Store

2024-02-01

Built from Figma. Live and selling on day one.

Agency provided the Figma design. I built it. Hello theme fully rebuilt with Elementor, custom code per product, FunnelKit side cart, and a zero-downtime staging migration.

The challenge

The live site had to stay up while the new one was built. The agency's Figma had a CRO-optimized design with specific interactions per product. A standard theme template couldn't handle it. The migration had to be flawless: a single planned window, ready to sell immediately when it went live.

Approach

• Hello theme chosen for its minimal footprint, then fully rebuilt with Elementor and custom CSS
• Global typography and color overridden via CSS variables to match the Figma precisely
• Each product's add-to-cart section coded individually with custom snippets. No shared template.
• FunnelKit side cart customized within the plugin's own layer, not at theme level
• Complete build done on staging while the live site continued running
• Migration executed in a single planned window, timed to a marketing pause, zero downtime

Results

• 6 — individually coded product add-to-cart sections
• 0 — downtime during migration
• 1 — planned migration window, half-day execution
• 100% — Figma fidelity. No design decisions on my side.

Tools used

WordPress, Elementor, Hello Theme, FunnelKit, WooCommerce, Custom Code