Getting started

There are a few settings to configure in Shopify before you're able to make use of the JS Buy SDK. Make sure you have your API key and App ID, and ensure that your products are visible to the Buy Button sales channel, and you know how to retrieve product IDs.

API Key

Follow these instructions to get your API key.

The JS Buy SDK cannot be authenticated for public apps, meaning they are apps made for one merchant at a time.

App ID

Because you can build different types of sales channel apps for a store (Buy Button or Mobile App), each sales channel comes with a unique identifier called the App ID. Use it throughout your development process for example, for code that attributes sales data to the proper sales channel.

App type ID
Buy Button 6
Mobile App 8

To generate the App ID, add the Buy Button sales channel to your store.

The App IDs are also all listed in your Shopify admin:

  1. From your Shopify admin, click Buy Button.

  2. In the JavaScript Buy SDK section, click Create extension:

    Create extensions

  3. On the Extensions page, you can view your current extensions, and create new ones.

Object visibility

In order for the JS Buy SDK to be able to access your store's product and collection objects, they must be set to Visible for the Buy Button in Shopify. Follow these steps to make your objects visible:

If you have many products and/or collections, you can use bulk actions to make them all visibile at once.

Retrieving products

The JS Buy SDK is built on an API called Product listings, which it uses to retrieve products and collections. All you need to know to retrieve a product is its product_id. There are two suggested methods for retrieving a store's products and collections using the Product listings API.

Find one product ID

The simplest way to retrieve a product's ID is to find it in the Shopify admin and inspect its URL. For example, at the URL https://your-store.myshopify.com/admin/products/12345, the product ID is 12345.

Retrieve many products at once

You can also retrieve product IDs using the product listings API:

  1. In the Shopify admin, add all the products you want to retrieve to a collection.

  2. View that collection in your Shopify admin, and inspect its URL.

    The collection ID will be the tail of the URL. For example, if your collection's URL is https://your-store.myshopify.com/admin/collections/21281217, the collection ID is 21281217

  3. Use the product listing API to fetch all products in that collection:

shopClient.fetchQueryProducts({collection_id: 21281217}).then(function(products) {
  // products is an array of products in the collection
});

Moving forward

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