GR/Gilriel Rodriguez
←Shopify Lab

Storefront API

Query Shopify.
Build the experience.

Run live GraphQL queries against Shopify, inspect the response and render the same data as a custom interface.

Launch playground↓

Connection

Live

Backend

Shopify

API

Storefront API

Query

GraphQL

Live workspace

Query it. Inspect it. Render it.

Use the working environment below to query live commerce data and inspect the result.

Connected to Shopify
Active query

Products

GraphQL/Editable/Shopify connected

GraphQL query

Products

Query

Variables

JSON

Optional
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.

Live source

The store behind the query.

A compact snapshot of the Shopify environment powering the experiment.

Store

01

gil-portfolio

Domain

02
gil-portfolio.myshopify.com↗

SSL enabled

Shipping

03

29 markets

Ae · At · Au · Be

Payments

04

PHP

Configured

Store policies

4 configured

Privacy↗Refund↗Shipping↗Terms↗

Architecture

Shopify stays the source of truth.

Source01

Shopify

Access02

Storefront API

Application03

Next.js

Output04

React UI

Interface→Next.js→GraphQL→Shopify→JSON
Connected

Next experiment

Inspect Shopify's product model.

Product Data Explorer→
←All experiments01 / 05