Cart engineering & personalization
Honest Wolf
A personalised cart drawer where qualifying products can be badged or embossed, with per-product attribution, validation rules, gift wrapping and in-drawer discounts.
- Context
- WebContrive · agency-side engineering
- Discipline
- Theme Engineering · Shopify Plus
- Core tech
- Liquid · JavaScript · AJAX Cart API · Metafields
What I worked on
- Cart drawer personalization widget, validation, cart attributes, gift-wrap flow and discount entry.
The challenge
Personalization had to appear only for products carrying a specific metafield value, and the entered values had to be attached to the correct line item — including when several qualifying products sit in the same cart.
Implementation
- 01Metafield-driven conditional UI: the personalization widget renders in the cart drawer only when a cart item qualifies.
- 02When multiple qualifying products are in the cart, a product-selection dropdown lets the customer choose which item the personalization belongs to.
- 03Customer inputs: badge, emboss, custom text and colour, written to the correct line item as cart attributes on add.
- 04Validation: standard badge limited to 7 characters with no special characters; emboss limited to 3 characters, letters and numbers only.
- 05Gift wrapping as a $7 product with a checkbox near the bottom of the drawer — checking adds the product, unchecking removes it.
- 06Cart requests use abort control and debounce/timeout handling so rapid interactions don't race each other.
- 07Discount code entry moved into the cart drawer instead of leaving it until checkout.
Engineering details
- Primarily Liquid, with Shopify Cart API calls only where required
- Line-item attributes rather than a parallel data store
- Conditional rendering driven by product metafields
- Async cart state handled with abort controllers
Technology
- Liquid
- JavaScript
- AJAX Cart API
- Metafields
- Cart attributes
- Shopify Plus