Build a Shopify checkout UI extension in under 25 minutes!

Video Description

Gadget v1.0 has been released! The product has been updated and this tutorial may not work without some modifications. Find the latest version here: https://docs.gadget.dev/guides/tutorials/checkout-ui-extension Try out Gadget: https://ggt.link/build-shopify In this Shopify tutorial, Riley builds a pre-purchase offer app using Shopify's checkout UI extensions and a fullstack admin embedded app. Fork this app: https://app.gadget.dev/auth/fork?domain=pre-purchase-template.gadget.app Shopify's pre-purchase offer tutorial: https://shopify.dev/docs/apps/checkout/product-offers/pre-purchase/build?framework=react Shopify checkout UI extension docs: https://shopify.dev/docs/api/checkout-ui-extensions Shopify Polaris docs: https://polaris.shopify.com/components Chapters 00:00 - Intro + create new Gadget app 00:49 - Connect to Shopify + sync data 05:47 - Add metafield 07:00 - Add save action 10:45 - Build an admin-embedded frontend 18:15 - Build a checkout UI extension 24:20 - Test the extension 25:08 - Outro