Ora
Shopify PlusSubscription Commerce2024
Ora Organic is a plant-based nutrition brand known for their "Performance Enhancing Plants" philosophy: organic supplements, probiotics, and protein powders trusted by hundreds of thousands of customers and featured in Vogue, Healthline, and Men's Journal. Running on Shopify Plus, the brand's growth had outpaced what standard Liquid themes could deliver: image galleries broke on variant changes, subscription flows couldn't support their pack-based pricing model, and Replo-powered landing pages needed deep integration with custom subscription logic. I architected an Angular-based custom theme with Vue.js reactive components to eliminate rendering issues, paired with a deeply customized Recharge subscription system that pushed well beyond what the platform natively supports.
The custom theme was developed using Angular-based architecture for all custom components, from navigation to collection grids and promotional modules. For the core storefront elements that handle real-time user interaction, including the buy box, product cards, and cart, I introduced Vue.js reactive components. This solved a critical UX issue the store was suffering from: the image gallery was breaking on variant changes. When customers selected a different size, flavour, or pack, the gallery would flicker and misrender due to image loading delays during state transitions. Vue.js's reactivity system eliminated this entirely, managing DOM updates in perfect sync with variant data changes, delivering seamless visual transitions without flickering, layout shifts, or content jumps.
The subscription model required a pricing strategy that Recharge didn't natively support: pack-based pricing combined with flexible delivery frequency. Customers needed to choose different pack sizes (1-pack, 2-pack, 3-pack) at tiered price points, each combinable with its own delivery schedule: weekly, bi-weekly, or monthly. Recharge treats each as a separate subscription plan, but the business logic required them to work as a unified pricing matrix. I developed a custom solution on top of the Recharge API to unlock this hybrid model, dynamically calculating prices and managing plan switching without disrupting existing subscriber data.
The most technically demanding challenge was making the custom subscription widget work seamlessly within pages built on Replo, a visual page builder that injects its own component layer and rendering pipeline into the Shopify storefront. Replo pages operate in an isolated context, meaning standard theme JavaScript and Shopify section patterns break. I engineered a bridge layer that maintained reactive state across both systems, with the Vue.js subscription widget communicating with Replo's component tree while preserving cart state, price calculations, and variant selections in real time.
- Gallery Stability Vue.js reactive components eliminated variant-change image breaking Zero Breaks
- Architecture Angular + Vue.js hybrid theme on Shopify Plus 2 Frameworks
- Subscription Custom pack-based pricing with frequency options via Recharge 3 Pricing Tiers
- Integration Full subscription logic embedded inside Replo-powered pages Replo + Recharge
- UX Fix Image gallery variant change flicker eliminated Resolved