In this video we will see how to create Customer Account UI Extensions for Shopify. Through these extensions we will be able to add UI Elements to the New Customer Accounts Pages.
Throughout this video we will see how to get data for these extensions using the Graphql Customer Account API and the Storefront API.
🟢 My links
- Website - https://stackingcontext.com
- Support This Project - https://stackingcontext.com/support
- Let's work together - https://stackingcontext.com#contact
- Get Early Access To New Videos - https://www.youtube.com/@stackingcontext/join
Resources
- Learn to build Checkout UI Extensions - https://youtu.be/L-Kyx-pRoYI
- Shopify UI Extensions Responsive Tutorial - https://youtu.be/UIE2CHN0oWg
- Customer Account UI Extensions Documentation -https://shopify.dev/docs/api/customer-account-ui-extensions
- Customer Account UI Extensions Components - https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/components
- GraphQL Customer Account API Reference - https://shopify.dev/docs/api/customer
- Storefront API Reference - https://shopify.dev/docs/api/storefront
Timestamps
00:00 - Introduction
03:27 - Describing the extension
04:30 - Getting The Order Id
05:50 - Sending Data Between The Menu Action and Full Page Targets
06:30 - Getting The Order Information in Customer Account UI Extension
10:00 - Requesting Access To Customer Data
11:15 - Updating The App's Scope
12:47 - Using The Storefront API in Customer Account UI Extensions
19:30 - Building The UI
25:04 - Getting The Shop URL
27:02 - Fixing The Variant Id
27:38 - Adding a Loading Indicator
28:05 - Making the UI Responsive
29:13 - Final Improvements
