According to Shopify: The GraphQL Admin API lets you build apps and other integrations for the Shopify admin using GraphQL. With the API, you can create apps that offer functionality at every stage of a store’s operation, including shipping, fulfillment and product management.

Although it is still a BETA version, but you can take advantage of this new approach to integrate Shopify to your applications. In this post, I will show you some examples when using Storefront API with plain JavaScript.

Before starting, you need to get some information:

The GraphQL Endpoint

https://my-store-name.myshopify.com/admin/api/graphql

2. Getting the Storefront Access Token

You need to create a Private app inside your store and allow this app to access your storefront data using the Storefront API

Image from Shopify

3. Testing your Storefront API GraphQL endpoint

It’s best to test the GraphQL by using the GraphiQL app. Make sure that every works before we implement it to real application.

Add access token header

Shopify query testing

4. Using JavaScript with Storefront API GraphQL

There are many methods that we can use, and you can take a look at those on Shopify. In this example, I will create a checkout URL by using JavaScript.

First we need to create a mutation:

let mutation = `

mutation {

checkoutCreate(input: {

email: "dale@dalenguyen.me"

lineItems: [

{

quantity: 1

variantId: "variant-id"

customAttributes: {

key: "key"

value: "value"

}

}

]

shippingAddress: {

address1: "address"

city: "Toronto"

province: "ON"

zip: "zip"

country: "Canada"

firstName: "Dale"

lastName: "Nguyen"

}

}){

checkout{

webUrl

}

}

}

`;

Then we send the mutation through GraphQL

let settings = {

'async': true,

'crossDomain': true,

'url': ' https://my-store-name.myshopify.com/api/graphql ',

'method': 'POST',

'headers': {

'X-Shopify-Storefront-Access-Token': 'your-access-token',

'Content-Type': 'application/graphql',

},

'data': mutation

}; // Get checkout URL from shopify

return $.ajax(settings).done(function (response) {

console.log(response);

});

After sending the mutation, you will the checkout URL inside the console log. You can do anything with the URL.

From this example, you know to send an AJAX request by using JavaScript in your app.

Hope this helps ;)