
- Checkout UI extension
- React
- Storefront API
- Metaobjects
- Metafields
- Shop Pay
Situation
Free gifts were added by the EG Auto Add to Cart app, which does its work in the cart. Shop Pay and the other express checkout buttons skip the cart and go straight to checkout, so anyone who used them bought into the offer and never received the gift. Nothing errored, so the leak was silent.
What I built
A checkout UI extension that runs inside Shopify checkout, so it sees the order however the buyer got there. Each offer is an entry in the Shopify admin: a funnel name that matches the EG Auto Add to Cart funnel, so both apps describe the same offer, the products that trigger it, and the gifts it gives. When checkout loads, the extension checks the cart against every offer and adds any gift that is missing, tagged so a gift is never counted as a trigger itself. Quantities come from settings on each gift product: one gift per unit bought, a fixed multiple, or tiers such as two gifts for one bottle. A gift is added on its subscription plan where the product is sold on one.
Holding payment until gifts land
Adding a gift takes a moment, and a buyer on an express path can reach Pay before it arrives. The extension blocks payment while it is still checking or adding, and shows a short message naming the gift being added, which clears as soon as the cart settles. Gifts are added one at a time and skipped when they are already there, so a gift is never doubled when the cart changes mid-check.