Lab
Storefront API
Query Shopify. Build the interface.
Live Storefront GraphQL → typed data → frontend state.
Open workspaceShopgil-portfolio
Domaingil-portfolio.myshopify.com
CurrencyPhp
Policies4
What this proves
Reliable UI starts with reliable data.
Contract
Query typed Storefront fields instead of hard-coded assumptions.
State
Turn API responses into predictable frontend states.
Live workspace
Query → state → UI.
Inspect the response and the interface state it produces.
Active query
Products
GraphQL/Editable/Shopify connected
GraphQL query
Products
Variables
JSON
Connected endpoint
Shopify Storefront API
Request path
Client→Next.js→Shopify
Result
From response to interface.
Raw response
Shopify JSON
Waiting
Awaiting request
Run a query to inspect Shopify's response.
01 / Query
Choose the Shopify fields the frontend actually needs.
02 / Response
Inspect the raw GraphQL result exactly as the application receives it.
03 / Experience
Render that same response into working interface components.
Shopify→Storefront GraphQL→Server logic→React UI
Next experiment