Getting started

To get started using the JS Buy SDK, you'll need to create a private app, get a storefront access token, and make your products and collections available for your custom storefront. Once products and collections are available, you can retrieve them using their respective IDs.

Generate an access token for the JavaScript Buy SDK

To generate your JavaScript Buy SDK access token, see private authentication.

When creating a private app, make sure to enable Allow this app to access your storefront data using the Storefront API. The access token is generated when you save the private app, and you include this access token with any calls made from the JS Buy SDK to Shopify.

Make your products and collections visible

You'll need to make products and collections available to your private app to access them from JS Buy SDK.

To make products available:

  1. From Shopify admin navigate to Products.
  2. Click the product's name to open its details.
  3. In Sales channels click Manage.
  4. Make sure to check the box next to the name of your private app.

To make collections available:

  1. From Shopify admin navigate to Products>Collections.
  2. Click the collection's name to open its details.
  3. In Sales channels click Manage.
  4. Make sure to check the box next to the name of your private app.

If you have many products and/or collections, you can use bulk actions to make them available in one step.

Retrieve a product or collection

Before you can retrieve a product or collection, you need to query for a Storefront ID. After you've obtained either a product ID or collection ID, you can fetch the product or collection using the SDK.

To fetch a product:

// Fetch a single product by ID
const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';

client.product.fetch(productId).then((product) => {
  // Do something with the product
  console.log(product);
});

To fetch a collection:

// Fetch a single collection by ID, including its products
const collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA==';

client.collection.fetchWithProducts(collectionId).then((collection) => {
  // Do something with the collection
  console.log(collection);
  console.log(collection.products);
});

Next steps

If you've completed the tasks above, then you're ready to start building with the JS Buy SDK:

View the JS Buy SDK on GitHub

Sign up for a Partner account to get started.

Sign up