Shopify Developer Documentation

https://shopify.dev/docs
Admin
Shopify developer documentation guides you on building apps, themes, custom storefronts, and...
Tokens:7,169,601
Snippets:40,454
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### npx shop-minis setup [options]

Source: https://shopify.dev/docs/api/shop-minis/commands/setup

Run this command after creating a project with `create` or when joining an existing Mini project. It registers your Mini with Shopify Partners, links it to your organization, generates API keys, and saves them to your .env file. Required before you can submit your Mini for review.

```zsh
npx shop-minis setup [options]
```

--------------------------------

### Response for get all pages (example)

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/page

Example JSON response for the get all pages request, showing a compact representation of the pages list.

```json
HTTP/1.1 200 OK{"pages":[{"id":108828309,"title":"Sample Page","shop_id":548380009,"handle":"sample","body_html":"<p>this is a <strong>sample</strong> page.</p>","author":"Dennis","created_at":"2008-07-15T20:00:00-04:00","updated_at":"2008-07-16T20:00:00-04:00","published_at":null,"template_suffix":null,"admin_graphql_api_id":"gid://shopify/Page/108828309"},{"id":169524623,"title":"Store hours","shop_id":548380009,"handle":"store-hours","body_html":"<p>We never close.</p>","author":"Jobs","created_at":"2013-12-31T19:00:00-05:00","updated_at":"2013-12-31T19:00:00-05:00","published_at":"2014-02-01T19:00:00-05:00","template_suffix":null,"admin_graphql_api_id":"gid://shopify/Page/169524623"},{"id":322471,"title":"Support","shop_id":548380009,"handle":"support","body_html":"<p>Come in store for support.</p>","author":"Dennis","created_at":"2009-07-15T20:00:00-04:00","updated_at":"2009-07-16T20:00:00-04:00","published_at":null,"template_suffix":null,"admin_graphql_api_id":"gid://shopify/Page/322471"},{"id":131092082,"title":"Terms of Services","shop_id":548380009,"handle":"tos","body_html":"<p>We make <strong>perfect</strong> stuff, we don't need a warranty.</p>","author":"Dennis","created_at":"2008-07-15T20:00:00-04:00","updated_at":"2008-07-16T20:00:00-04:00","published_at":"2008-07-15T20:00:00-04:00","template_suffix":null,"admin_graphql_api_id":"gid://shopify/Page/131092082"}]}
```

--------------------------------

### Product list with dialog example

Source: https://shopify.dev/docs/api/storefront-web-components/components/shopify-context

Example showing a list of products where clicking each product opens a dialog with product details.

```html
<shopify-context
  type="product"
  handle="handle-of-product"
>
  <template>
    <button
      data-shopify-dialog-trigger="product-dialog"
    >
      View product
    </button>
  </template>
</shopify-context>

<shopify-dialog id="product-dialog">
  <shopify-context
    type="product"
    handle="handle-of-product"
  >
    <template>
      <h2>
        <shopify-data
          query="product.title"
        ></shopify-data>
      </h2>
      <p>
        <shopify-data
          query="product.description"
        ></shopify-data>
      </p>
    </template>
  </shopify-context>
</shopify-dialog>
```

--------------------------------

### Create a warning banner with buttons for next steps

Source: https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/banner

Uses a warning-toned banner with secondary action buttons to highlight a problem and provide clear next steps. The example shows a shipping weight issue with links to review products and access a setup guide.

```html
<s-banner heading="127 products missing shipping weights" tone="warning">
Products without weights may show inaccurate shipping rates, leading to
checkout abandonment.
<s-button
slot="secondary-actions"
variant="secondary"
href="/admin/products?filter=missing-weights"
>
Review products
</s-button>
<s-button
slot="secondary-actions"
variant="secondary"
href="javascript:void(0)"
>
Setup guide
</s-button>
</s-banner>
```

--------------------------------

### Expandable setup guide with completion tracking

Source: https://shopify.dev/docs/api/app-home/latest/patterns/compositions/setup-guide

Interactive checklist for onboarding or setup tasks. Uses useState to manage expanded state for the guide and each step, with checkboxes for completion tracking and a progress indicator.

```tsx
// @framework-globals: useState
const [expanded, setExpanded] = useState({
  guide: true,
  step1: true,
  step2: false,
  step3: false,
});

return (
<s-section>
  <s-grid gap="base">
    <s-grid gap="small-200">
      <s-grid
        gridTemplateColumns="1fr auto auto"
        gap="small-300"
        alignItems="center"
      >
        <s-heading>Setup Guide</s-heading>
        <s-button
          accessibilityLabel="Dismiss Guide"
          variant="tertiary"
          tone="neutral"
          icon="x"
         />
        <s-button
          accessibilityLabel="Toggle setup guide"
          variant="tertiary"
          tone="neutral"
          onClick={() => setExpanded({ ...expanded, guide: !expanded.guide })}
          icon={expanded.guide ? "chevron-up" : "chevron-down"}
         />
      </s-grid>
      <s-paragraph>
        Use this personalized guide to get your store ready for sales.
      </s-paragraph>
      <s-paragraph color="subdued">0 out of 3 steps completed</s-paragraph>
    </s-grid>
    <s-box
      borderRadius="base"
      border="base"
      background="base"
      display={expanded.guide ? "auto" : "none"}
    >
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox label="Upload an image for your puzzle" />
          <s-button
            accessibilityLabel="Toggle step 1 details"
            variant="tertiary"
            onClick={() => setExpanded({ ...expanded, step1: !expanded.step1 })}
            icon={expanded.step1 ? "chevron-up" : "chevron-down"}
           />
        </s-grid>
        <s-box
          padding="small"
          paddingBlockStart="none"
          display={expanded.step1 ? "auto" : "none"}
        >
          <s-box padding="base" background="subdued" borderRadius="base">
            <s-grid
              gridTemplateColumns="1fr auto"
              gap="base"
              alignItems="center"
            >
              <s-grid gap="small-200">
                <s-paragraph>
                  Start by uploading a high-quality image that will be used to
                  create your puzzle. For best results, use images that are at
                  least 1200x1200 pixels.
                </s-paragraph>
                <s-stack direction="inline" gap="small-200">
                  <s-button variant="primary">Upload image</s-button>
                  <s-button variant="tertiary" tone="neutral">
                    {" "}
                    Image requirements{" "}
                  </s-button>
                </s-stack>
              </s-grid>
              <s-box maxBlockSize="80px" maxInlineSize="80px">
                <s-image
                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                  alt="Customize checkout illustration"
                 />
              </s-box>
            </s-grid>
          </s-box>
        </s-box>
      </s-box>
      <s-divider />
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox label="Choose a puzzle template" />
          <s-button
            accessibilityLabel="Toggle step 2 details"
            variant="tertiary"
            onClick={() => setExpanded({ ...expanded, step2: !expanded.step2 })}
            icon={expanded.step2 ? "chevron-up" : "chevron-down"}
           />
        </s-grid>
        <s-box
          padding="small"
          paddingBlockStart="none"
          display={expanded.step2 ? "auto" : "none"}
        >
          <s-box padding="base" background="subdued" borderRadius="base">
            <s-grid
              gridTemplateColumns="1fr auto"
              gap="base"
              alignItems="center"
            >
              <s-grid gap="small-200">
                <s-paragraph>
                  Choose from our library of puzzle templates including classic
                  jigsaw, hexagonal, and irregular shapes.
                </s-paragraph>
                <s-stack direction="inline" gap="small-200">
                  <s-button variant="primary">Browse templates</s-button>
                </s-stack>
              </s-grid>
              <s-box maxBlockSize="80px" maxInlineSize="80px">
                <s-image
                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                  alt="Customize checkout illustration"
                 />
              </s-box>
            </s-grid>
          </s-box>
        </s-box>
      </s-box>
      <s-divider />
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox label="Set up your store details" />
          <s-button
            accessibilityLabel="Toggle step 3 details"
            variant="tertiary"
            onClick={() => setExpanded({ ...expanded, step3: !expanded.step3 })}
            icon={expanded.step3 ? "chevron-up" : "chevron-down"}
           />
        </s-grid>
        <s-box
          padding="small"
          paddingBlockStart="none"
          display={expanded.step3 ? "auto" : "none"}
        >
          <s-box padding="base" background="subdued" borderRadius="base">
            <s-grid
              gridTemplateColumns="1fr auto"
              gap="base"
              alignItems="center"
            >
              <s-grid gap="small-200">
                <s-paragraph>
                  Add your store name, address, and contact information to
                  complete your setup.
                </s-paragraph>
                <s-stack direction="inline" gap="small-200">
                  <s-button variant="primary">Set up store details</s-button>
                </s-stack>
              </s-grid>
              <s-box maxBlockSize="80px" maxInlineSize="80px">
                <s-image
                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                  alt="Customize checkout illustration"
                 />
              </s-box>
            </s-grid>
          </s-box>
        </s-box>
      </s-box>
    </s-box>
  </s-grid>
</s-section>
);
```

--------------------------------

### Create a new Blog - Ruby

Source: https://shopify.dev/docs/api/admin-graphql/latest/mutations/blogCreate?example=create-a-new-blog

Ruby example using the ShopifyAPI admin GraphQL client. Creates a session with shop and access token, then runs the blogCreate mutation with variables.

```ruby
session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  mutation CreateBlog($blog: BlogCreateInput!) {
    blogCreate(blog: $blog) {
      blog {
        id
        title
        handle
        templateSuffix
        commentPolicy
      }
      userErrors {
        code
        field
        message
      }
    }
  }
QUERY

variables = {
  "blog": {
    "title": "New Blog Title",
    "handle": "new-blog-title",
    "templateSuffix": "standard",
    "commentPolicy": "MODERATED"
  }
}

response = client.query(query: query, variables: variables)
```

--------------------------------

### Retrieve shop configuration - PHP (Shop::all)

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/shop

Alternative PHP example using the Shop::all() method directly. Loads the current session and calls Shop::all().

```php
use Shopify\Rest\Admin2026_10\Shop;
use Shopify\Utils;

$this->test_session = Utils::loadCurrentSession(
    $requestHeaders,
    $requestCookies,
    $isOnline
);

$response = Shop::all(
);

```

--------------------------------

### Liquid capitalize filter example

Source: https://shopify.dev/docs/api/liquid/filters/capitalize

Use the capitalize filter on a string to capitalize the first word and downcase the remaining characters. The example input is 'this sentence should start with a capitalized word.' and the output is 'This sentence should start with a capitalized word.'

```liquid
{{ 'this sentence should start with a capitalized word.' | capitalize }}
```

```text
This sentence should start with a capitalized word.
```

--------------------------------

### Basic shopify-context example

Source: https://shopify.dev/docs/api/storefront-web-components/components/shopify-context

Default example showing a shopify-context bound to a shopify-store, with a template querying product.title and a loading placeholder.

```html
<shopify-store
  store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-context
  type="product"
  handle="handle-of-product"
>
  <template>
    <!-- The data component is bound to the product
     context and queries the title field -->
    <h1>
      <shopify-data
        query="product.title"
      ></shopify-data>
    </h1>
  </template>
  <!-- Render placeholder content
   until the context is loaded -->
  <div shopify-loading-placeholder>Loading...</div>
</shopify-context>
```

--------------------------------

### Setup Guide JSX with s-section and s-grid

Source: https://shopify.dev/docs/api/app-home/latest/patterns/compositions/setup-guide

Renders a setup guide panel with a header, progress text, and three checklist steps. Each step uses s-checkbox with onChange handlers that call shopify.toast.show. Includes expandable step details and template browsing UI.

```tsx
<s-section>
  <s-grid gap="base">
    <s-grid gap="small-200">
      <s-grid
        gridTemplateColumns="1fr auto auto"
        gap="small-300"
        alignItems="center"
      >
        <s-heading>Setup Guide</s-heading>
        <s-button
          accessibilityLabel="Dismiss Guide"
          variant="tertiary"
          tone="neutral"
          icon="x"
        />
        <s-button
          accessibilityLabel="Toggle setup guide"
          variant="tertiary"
          tone="neutral"
          icon="chevron-up"
        />
      </s-grid>
      <s-paragraph>
        Use this personalized guide to get your store ready for sales.
      </s-paragraph>
      <s-paragraph color="subdued">1 out of 3 steps completed</s-paragraph>
    </s-grid>
    <s-box borderRadius="base" border="base" background="base">
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox
            label="Upload an image for your puzzle"
            checked
            onChange={() => {
              shopify.toast.show('Step 1 completed!');
            }}
          />
          <s-button
            accessibilityLabel="Toggle step 1 details"
            variant="tertiary"
            icon="chevron-down"
          />
        </s-grid>
      </s-box>
      <s-divider />
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox
            label="Choose a puzzle template"
            onChange={() => {
              shopify.toast.show('Step 2 completed!');
            }}
          />
          <s-button
            accessibilityLabel="Toggle step 2 details"
            variant="tertiary"
            icon="chevron-up"
          />
        </s-grid>
        <s-box padding="small" paddingBlockStart="none">
          <s-box padding="base" background="subdued" borderRadius="base">
            <s-grid
              gridTemplateColumns="1fr auto"
              gap="base"
              alignItems="center"
            >
              <s-grid gap="small-200">
                <s-paragraph>
                  Choose from our library of puzzle templates or create your own custom layout.
                </s-paragraph>
                <s-stack direction="inline" gap="small-200">
                  <s-button variant="primary">Browse templates</s-button>
                </s-stack>
              </s-grid>
              <s-box maxBlockSize="80px" maxInlineSize="80px">
                <s-image
                  src="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                  alt="Templates illustration"
                />
              </s-box>
            </s-grid>
          </s-box>
        </s-box>
      </s-box>
      <s-divider />
      <s-box>
        <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
          <s-checkbox
            label="Customize puzzle piece shapes"
            onChange={() => {
              shopify.toast.show('Step 3 completed!');
            }}
          />
          <s-button
            accessibilityLabel="Toggle step 3 details"
            variant="tertiary"
            icon="chevron-down"
          />
        </s-grid>
      </s-box>
    </s-box>
  </s-grid>
</s-section>
```

--------------------------------

### useSecureStorage example

Source: https://shopify.dev/docs/api/shop-minis/hooks/storage/usesecurestorage

Example of using the useSecureStorage hook to get, set, and remove secrets. The hook returns getSecret, setSecret, and removeSecret functions. The example runs these operations inside a useEffect hook.

```tsx
import {useEffect} from 'react'

import {useSecureStorage} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const {getSecret, setSecret, removeSecret} = useSecureStorage()

  useEffect(() => {
    async function handleSecureStorageOperations() {
      // Get a secret from secure storage
      const secret = await getSecret()
      console.log({secret})

      // Set a secret in secure storage
      await setSecret({value: 'Sensitive Data'})

      // Remove a secret from secure storage
      await removeSecret()
    }

    handleSecureStorageOperations()
  }, [getSecret, setSecret, removeSecret])
}
```

--------------------------------

### Create a login instance with the SDK

Source: https://shopify.dev/docs/api/shop-sdk/reference/login

Initializes the Shop SDK and creates a login component, attaching it to a mount element. The onComplete handler logs the authenticated email and signed-in status.

```javascript
const sdk = window.ShopSDK.initialize({
  apiKey: 'YOUR_CLIENT_ID',
});

const login = await sdk.create('login', {
  attributes: {
    emailInputSelector: '#email',
  },
  onComplete(event) {
    console.log('Authenticated:', event.email, event.signedIn);
  },
});

document.querySelector('#login-mount').appendChild(login.element);
```

--------------------------------

### Get store-specific data using the sessionToken object

Source: https://shopify.dev/docs/api/shopify-app-react-router/latest/authenticate/public/checkout

This example shows how to use the sessionToken object to get store-specific data for the authenticated checkout request.

```ts
import { LoaderFunctionArgs, json } from "react-router";
import { authenticate } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { sessionToken } = await authenticate.public.checkout(
    request
  );
  return (await getMyAppData({shop: sessionToken.dest}));
};
```

--------------------------------

### Create a listener instance with sdk.create

Source: https://shopify.dev/docs/api/shop-sdk/reference/listener

Initializes the Shop SDK and creates a listener instance, observing an email input element and logging when a returning Shop user is detected.

```javascript
const sdk = window.ShopSDK.initialize({
  apiKey: 'YOUR_CLIENT_ID',
});
  

const listener = await sdk.create('listener', {
  inputElement: document.querySelector('#email'),
  onMatched() {
    console.log('Returning Shop user detected!');
  },
});
```

--------------------------------

### Example

Source: https://shopify.dev/docs/api/functions/reference/payment-customization/graphql/common-objects/operation

This is a placeholder. The actual code is in the source.

```javascript
export function cartPaymentMethodsTransformRun(input) {
  // ...
}
```

--------------------------------

### Get a single blog response

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/blog

Example response for the GET blog request, showing the blog object with fields such as id, handle, title, and timestamps.

```json
HTTP/1.1 200 OK
{
  "blog": {
    "id": 241253187,
    "handle": "apple-blog",
    "title": "Mah Blog",
    "updated_at": "2006-02-01T19:00:00-05:00",
    "commentable": "no",
    "feedburner": null,
    "feedburner_location": null,
    "created_at": "2026-10-01T10:19:43-04:00",
    "template_suffix": null,
    "tags": "Announcing, Mystery",
    "admin_graphql_api_id": "gid://shopify/Blog/241253187"
  }
}
```

--------------------------------

### Create a lead-capture instance

Source: https://shopify.dev/docs/api/shop-sdk/reference/lead-capture

Initializes the Shop SDK and creates a lead-capture component, attaching it to a mount element. The onComplete handler logs the captured email.

```javascript
const sdk = window.ShopSDK.initialize({
  apiKey: 'YOUR_CLIENT_ID',
});

const leadCapture = await sdk.create('lead-capture', {
  attributes: {
    emailInputSelector: '#email',
  },
  onComplete(event) {
    console.log('Lead captured:', event.email);
  },
});

document.querySelector('#lead-capture-mount').appendChild(leadCapture.element);
```

--------------------------------

### Get a single blog response (example section)

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/blog

Duplicate of the first response, presented in the examples section. Shows the blog object in compact JSON.

```json
HTTP/1.1 200 OK{"blog":{"id":241253187,"handle":"apple-blog","title":"Mah Blog","updated_at":"2006-02-01T19:00:00-05:00","commentable":"no","feedburner":null,"feedburner_location":null,"created_at":"2026-10-01T10:19:43-04:00","template_suffix":null,"tags":"Announcing, Mystery","admin_graphql_api_id":"gid://shopify/Blog/241253187"}}
```

--------------------------------

### Get a metafield attached to a location - Response

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/location?example=retrieve-a-list-of-inventory-levels-for-a-location

Example response for the LocationMetafield query.

```JSON
{
  "location": {
    "hours": {
      "value": "Open daily 9AM-5PM"
    }
  }
}
```

--------------------------------

### ProductProvider example (TypeScript)

Source: https://shopify.dev/docs/api/hydrogen-react/latest/components/productprovider

TypeScript version of the ProductProvider example, including type imports for Product.

```typescript
import {ProductProvider, useProduct} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export function Product({product}: {product: Product}) {
  return (
    <ProductProvider data={product} initialVariantId="some-id">
      <UsingProduct />
    </ProductProvider>
  );
}

function UsingProduct() {
  const {product, variants, setSelectedVariant} = useProduct();
  return (
    <>
      <h1>{product?.title}</h1>
      {variants?.map((variant) => {
        <button onClick={() => setSelectedVariant(variant)} key={variant?.id}>
          {variant?.title}
        </button>;
      })}
      ;
    </>
  );
}
```

--------------------------------

### GET /admin/api/2026-10/carrier_services/{carrier_service_id}.json

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/carrierservice

This snippet documents the GET endpoint to retrieve a single carrier service by its ID, including parameters, request example, and response structure.

```APIDOC
## GET /admin/api/2026-10/carrier_services/{carrier_service_id}.json

### Description
Receive a single carrier service by its ID.

### Method
GET

### Endpoint
/admin/api/2026-10/carrier_services/{carrier_service_id}.json

### Parameters
#### Path Parameters
- **carrier_service_id** (string) - Required - The ID of the carrier service to retrieve.

### Request Example
```
curl -X GET "https://your-development-store.myshopify.com/admin/api/2026-10/carrier_services/1036894958.json" \
-H "X-Shopify-Access-Token: {access_token}"
```

### Response
#### Success Response (200)
- **carrier_service** (object) - The carrier service object.
  - **id** (integer) - The ID of the carrier service.
  - **name** (string) - The name of the carrier service.
  - **active** (boolean) - Whether the carrier service is active.
  - **service_discovery** (boolean) - Whether service discovery is enabled.
  - **carrier_service_type** (string) - The type of carrier service.
  - **admin_graphql_api_id** (string) - The GraphQL API ID.
  - **format** (string) - The format of the carrier service.
  - **callback_url** (string) - The callback URL.

#### Response Example
```
HTTP/1.1 200 OK
{
  "carrier_service": {
    "id": 1036894958,
    "name": "Purolator",
    "active": true,
    "service_discovery": true,
    "carrier_service_type": "api",
    "admin_graphql_api_id": "gid://shopify/DeliveryCarrierService/1036894958",
    "format": "json",
    "callback_url": "https://example.com/"
  }
}
```
```

--------------------------------

### BlogList query via Ruby

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/blogs?example=retrieve-a-list-of-all-blogs

Ruby example using ShopifyAPI to create a session and client, then execute the BlogList query.

```ruby
session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query BlogList {
    blogs(first: 50) {
      nodes {
        id
        handle
        title
        updatedAt
        commentPolicy
        feed {
          path
          location
        }
        createdAt
        templateSuffix
        tags
      }
    }
  }
QUERY

response = client.query(query: query)
```

--------------------------------

### PHP (InventoryItem::find) example

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/inventoryitem

Alternative PHP example using the InventoryItem class directly. Requires a loaded session.

```php
use Shopify\Rest\Admin2026_10\InventoryItem;
use Shopify\Utils;

$this->test_session = Utils::loadCurrentSession(
    $requestHeaders,
    $requestCookies,
    $isOnline
);

$result = InventoryItem::find(
    808950810,
);
```

--------------------------------

### useShop hook usage example

Source: https://shopify.dev/docs/api/shop-minis/hooks/shop/useshop

Import useShop from @shopify/shop-minis-react and call it with a shop ID to get shop data, loading state, and error. The example logs the returned values.

```tsx
import {useShop} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const {shop, loading, error} = useShop({id: 'gid://shopify/Shop/1234567890'})

  console.log({shop, loading, error})
}
```

--------------------------------

### Balance response example

Source: https://shopify.dev/docs/api/admin-rest/latest/resources/balance

Example response for a successful GET balance request. It returns a 200 OK status with a `balance` array containing an object with `amount` and `currency` properties.

```http
HTTP/1.1 200 OK
{
  "balance": [
    {
      "amount": "53.99",
      "currency": "USD"
    }
  ]
}
```

--------------------------------

### ProductProvider example (JavaScript)

Source: https://shopify.dev/docs/api/hydrogen-react/latest/components/productprovider

Shows how to wrap a component with ProductProvider and use the useProduct hook to access product data and variants.

```javascript
import {ProductProvider, useProduct} from '@shopify/hydrogen-react';

export function Product({product}) {
  return (
    <ProductProvider data={product} initialVariantId="some-id">
      <UsingProduct />
    </ProductProvider>
  );
}

function UsingProduct() {
  const {product, variants, setSelectedVariant} = useProduct();
  return (
    <>
      <h1>{product?.title}</h1>
      {variants?.map((variant) => {
        <button onClick={() => setSelectedVariant(variant)} key={variant?.id}>
          {variant?.title}
        </button>;
      })}
      ;
    </>
  );
}
```

--------------------------------

### React Router: draftOrderDelete mutation (second example)

Source: https://shopify.dev/docs/api/admin-graphql/latest/mutations/draftOrderDelete?example=remove-an-existing-draftorder

Uses authenticate.admin to get admin client and calls admin.graphql with the draftOrderDelete mutation. This example uses id 'gid://shopify/DraftOrder/276395349'.

```javascript
import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  mutation draftOrderDelete($input: DraftOrderDeleteInput!) {
    draftOrderDelete(input: $input) {
      deletedId
      userErrors {
        field
        message
      }
    }
  }`,
  {
    variables: {
        "input": {
            "id": "gid://shopify/DraftOrder/276395349"
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}
```

--------------------------------

### Create login instance with email input and handle complete event

Source: https://shopify.dev/docs/api/shop-sdk/reference/login

Initializes the Shop SDK and creates a login component with an email input selector. The onComplete event logs the authenticated email and signed-in status. Requires a form with an email input and a mount div.

```HTML
<script type="module">
  import 'https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.sdk.esm.js';

  const sdk = window.ShopSDK.initialize({
    apiKey: 'YOUR_CLIENT_ID',
    locale: 'en',
  });

  const login = await sdk.create('login', {
    attributes: {
      emailInputSelector: '#email',
    },
    onComplete(event) {
      console.log('Authenticated:', event.email, event.signedIn);
    },
  });

  document.querySelector('#login-mount').appendChild(login.element);
</script>

<form id="login-form">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" />
</form>

<div id="login-mount"></div>
```

--------------------------------

### Ruby Client for Blog Article List

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/blog?example=retrieves-a-count-of-all-articles-from-a-blog

Ruby example using ShopifyAPI to create a session and Graphql::Admin client, then execute the BlogArticleList query with variables.

```ruby
session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query BlogArticleList($id: ID!) {
    blog(id: $id) {
      id
      articles(first: 10) {
        nodes {
          id
          handle
          author {
            firstName
            lastName
          }
          body
        }
      }
    }
  }
QUERY

variables = {
  "id": "gid://shopify/Blog/397675442"
}

response = client.query(query: query, variables: variables)
```

--------------------------------

### Ruby Product Total Inventory

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/product?example=Get+the+price+range+for+a+product+for+buyers+from+Canada

Ruby example to get total inventory for a product.

```ruby
session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query {
    product(id: "gid://shopify/Product/108828309") {
      title
      totalInventory
    }
  }
QUERY

response = client.query(query: query)
```

--------------------------------

### useAsyncStorage usage example

Source: https://shopify.dev/docs/api/shop-minis/hooks/storage/useasyncstorage

Example component that uses useAsyncStorage to get, set, remove, list, and clear items in async storage. Demonstrates the hook's methods inside a useEffect.

```tsx
import {useEffect} from 'react'

import {useAsyncStorage} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const {getItem, setItem, removeItem, getAllKeys, clear} = useAsyncStorage()

  useEffect(() => {
    async function handleStorageOperations() {
      // Get an item from storage
      const value = await getItem({key: 'myKey'})
      console.log({value})

      // Set an item in storage
      await setItem({key: 'myKey', value: 'Hello, World!'})

      // Remove an item from storage
      await removeItem({key: 'myKey'})

      // Get all keys in storage
      const keys = await getAllKeys()
      console.log({keys})

      // Clear all items from storage
      await clear()
    }

    handleStorageOperations()
  }, [getItem, removeItem, setItem, getAllKeys, clear])
}
```

--------------------------------

### Ruby client for ThemeFilesPaginated

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/theme?example=retrieves-a-list-of-assets-for-a-theme

Ruby example using ShopifyAPI to create a session and GraphQL client, then execute the query with variables.

```ruby
session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query ThemeFilesPaginated($themeId: ID!) {
    theme(id: $themeId) {
      files(first: 50) {
        edges {
          node {
            body {
              ... on OnlineStoreThemeFileBodyBase64 {
                contentBase64
              }
              ... on OnlineStoreThemeFileBodyText {
                content
              }
              ... on OnlineStoreThemeFileBodyUrl {
                url
              }
            }
            checksumMd5
            contentType
            createdAt
            filename
            size
            updatedAt
          }
          cursor
        }
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
        userErrors {
          code
          filename
        }
      }
    }
  }
QUERY

variables = {
  "themeId": "gid://shopify/OnlineStoreTheme/225007463"
}

response = client.query(query: query, variables: variables)
```

--------------------------------

### Get a metafield attached to a shop - Response

Source: https://shopify.dev/docs/api/admin-graphql/latest/queries/shop?example=receive-a-list-of-all-fulfillmentservices

Example response showing the metafield value for the shop.

```json
{
  "shop": {
    "copyrightYear": {
      "value": "2022"
    }
  }
}

```
Tokens:
Raw