Learning
Training in web development. Motion, interaction, and the crossover with design.
Overview
The store owner was running paid ads and tracking conversions closely. Traffic was coming in, but most visitors left the product page without adding to cart, and many who opened the cart drawer left before checking out. I was first brought on to build a loyalty rewards component for the product pages. As the project went on, the scope grew to include reward messaging in the cart drawer and a "Save Your Cart" feature connected to Klaviyo.
The Challenge
Visitors were dropping off at two points: on the product page before adding to cart, and in the cart drawer before checkout. Each feature was built to address one of those points, either by showing customers what they'd earn by buying, or by giving them a way to come back to their cart later.
The store needed to
Loyalty visibility
Communicate program benefits to shoppers
Rewards in view
Surface customer rewards before purchase
Cart recovery
Capture shoppers before they abandon carts
Klaviyo sync
Send saved carts into email follow-up flows
Every screen
One seamless experience on desktop and mobile
Repeat purchases
Support retention and long-term customer value
{ Product page }
Club LaLa Loyalty Program
I designed and developed a custom loyalty program section integrated directly into Shopify product pages. The goal was to clearly communicate the value of joining the loyalty program before customers reached checkout.
- Rewards calculated from the product's own value
- Savings message placed beside the buy button
- Responsive across desktop and mobile
{ Cart drawer }
Dynamic Cart Rewards Experience
To reinforce loyalty incentives during checkout, I developed a custom cart drawer experience that displayed real-time reward earnings based on cart value. For example, a customer with a CAD $2,158 order would automatically see a reward value of CAD $215.80 displayed throughout the checkout journey.
- Reward total recalculated as the cart changes
- Loyalty and free-shipping messaging in the drawer
- Mobile-first drawer layout
{ Cart recovery }
Save Your Cart + Klaviyo Integration
I built a custom cart recovery feature allowing customers to save their carts before leaving the store. This created an additional opportunity to recover customers who were not yet ready to complete their purchase.
- Custom modal with an email capture step
- Direct Klaviyo API integration
- Feeds the cart recovery and remarketing flows
From saved cart to recovery email
Saving a cart is only the first step. The real value comes from what happens after the customer leaves. Submitting an email creates a Klaviyo profile with the cart attached, drops the shopper into a recovery segment, and triggers a follow-up flow that brings them back to the exact cart they left behind.
Technical Highlights
Liquid components
Custom Shopify sections built from scratch
Dynamic rewards
Reward values calculated live in JavaScript
AJAX cart
Cart updates without a page reload
Klaviyo API
Email submissions posted straight to Klaviyo
Responsive layouts
Built for desktop and mobile from the start
Reusable components
Modular pieces the store can scale
Results
From the project start in June 2026 to October 2026, Shopify Analytics reports:
BeforeJune 2026
$9–10K
Total sales (CAD)
~9
Orders per month
AfterOctober 2026
$60K+
Total sales (CAD)
300+
Orders per month
The store was also running paid advertising campaigns during this period. These results reflect overall business growth and marketing efforts in addition to the features developed for this project.
Key Takeaways
This project pulled together everything I do: Shopify code, UX design, and API integrations, all aimed at getting people to actually buy. By connecting loyalty rewards, cart recovery, and customer engagement into one experience, I made the buying journey work better on both desktop and mobile.
