All Tutorials

Using the Shopify Ajax API

All Tutorials

Using the Shopify Ajax API

Using the Shopify Ajax API

Shopify provides shop-owners with an Ajax API that returns JSON-encoded responses.

This Ajax API makes it possible to add items to the cart, update quantities in the cart, and fetch information about the cart, without a page refresh. With this API, you can also fetch information about a particular product using its handle.

Wrapper library: use one or not

You can use a jQuery wrapper library to submit your requests to Shopify.

To use our own jQuery wrapper library, include it like so:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

Take note that you don't need a wrapper library at all when using our Ajax API with jQuery. The code you need to write is simple enough that you don't require an additional abstraction layer.

Laboratory page

If you're using the jQuery wrapper library, head over to the laboratory page at http://mayert-douglas4935.myshopify.com/pages/api. This page serves as documentation for our jQuery wrapper library.

You're building a quick order form?

You can add multiple items to a cart with a single request using the items parameter.

jQuery.post('/cart/add.js', {
  items: [
    {
      quantity: 1,
      id: 794864229,
      properties: {
        'First name': 'Caroline'
      }
    },
    {
      quantity: 2,
      id: 826203268,
      properties: {
        'First name': 'Mike'
      }
    }
  ]
});