Automatic qualification
The cart continuously evaluated whether the customer's current products met the promotional requirements.
Only eligible products contributed toward the threshold.
CUSTOM SHOPIFY CART EXPERIENCE
Creating a Flexible Free-Gift Experience for Metalbird
Metalbird needed more than a basic free-product promotion. The experience had to recognize qualifying customers, add the correct gift automatically, allow customers to change their selection, and stay synchronized as the cart changed.
I designed and developed a custom Shopify cart experience that managed the promotion from qualification through gift selection, then later collaborated with the Kefi development team to transition the experience into Metalbird's new cart system.
- Client
- Metalbird
- Role
- Shopify Developer
- Focus
- Promotional Cart Experience
- Platform
- Shopify
- Services
- Custom Development, Cart UX, Third-Party Integration
01/The Challenge
More than simply adding a free product.
At first glance, the requirement sounded straightforward:
Give customers a free product when their cart qualifies.
- Qualify customers based on minimum cart quantity or spend.
- Exclude ineligible products and gift cards from qualification.
- Automatically add a default free gift.
- Allow customers to choose from multiple gift options.
- Prevent duplicate promotional products.
- Respond correctly to quantity and product changes.
- Remove the promotion when the cart no longer qualifies.
The main challenge wasn't adding the gift.
It was maintaining a predictable customer experience across every cart state.
02/The Approach
Treating the promotion as a cart system.
Rather than spreading promotion-specific logic throughout the theme, I encapsulated the experience in a reusable cart component.
The component listened for cart changes and re-evaluated the promotion whenever products or quantities changed.
That made the behaviour easier to manage:
Cart changes ↓ Check eligibility ↓ Qualified? ↙ ↘ Yes No ↓ ↓ Manage Remove free gift promotion
This separation also made the experience easier to migrate when Metalbird later changed its cart architecture.
03/The Solution
A cart experience that responds to every state.
Automatic gift management
Once the requirements were reached, the default promotional product could be added automatically.
Customers didn't need to manually activate the promotion.
Gift selection
Instead of locking customers into the automatically selected product, the interface presented multiple gift options.
Customers could switch gifts without manually removing and re-adding products.
Duplicate protection
Additional safeguards prevented the cart from containing multiple promotional products.
Dynamic cart behaviour
The promotion responded to products being added or removed, quantity changes, gift changes, and the cart falling below the threshold without requiring the page to reload.
04/Evolving the Solution
Evolving the solution
Later, Metalbird adopted Kefi as part of a new theme and cart experience.
Rather than maintaining two separate implementations, I worked alongside the Kefi developer to transfer the existing interface and promotional logic into the new system.
This preserved the customer experience while allowing Metalbird to move the promotion into its new cart infrastructure without rebuilding the interaction from scratch.
05/Outcome
A promotion that remained predictable as the cart changed.
The project transformed a potentially fragile promotion into a structured customer experience.
For customers
- Eligible customers received the promotion automatically.
- Gift choices were presented directly within the cart.
- Customers could switch gifts without disrupting their cart.
- The experience remained predictable as the cart changed.
For Metalbird
- Promotion rules were handled consistently across cart states.
- Safeguards prevented duplicate free gifts.
- The feature remained modular enough to evolve with the store.
- The experience was successfully carried into the later Kefi cart implementation.
06/PROJECT GALLERY
The experience in action
A closer look at how the promotional cart experience responds as customers qualify for and interact with their free gift.
07/Technical Implementation
Built to integrate naturally with Shopify.
The implementation focused on keeping the promotional experience modular, maintainable, and compatible with the existing cart.
ShopifyLiquidJavaScriptWeb ComponentsShopify AJAX Cart APIKefi Integration
I built the initial functionality as a reusable Web Component without Shadow DOM, allowing it to integrate naturally with Shopify's theme markup, styling, and existing cart behaviour.