Getting started

There are a few settings to configure in Shopify before you can use the JS Buy SDK. You'll need to generate your API credentials, make your products and collections visible for the Buy Button sales channel, and learn how to retrieve product IDs.

Generate JavaScript Buy SDK credentials

  1. From your Shopify admin, click Buy Button.

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

    Create extensions

  3. On the Storefront Access Tokens page, click Create token.

  4. In the API Client drop-down menu, select Buy Button, and give it a Title.

  5. Click Create token.

Your Acccess Token and App ID are displayed in the Buy Button tokens section.

API Credentials for the JavaScript Buy SDK cannot be generated from the Partner Dashboard. You will need a staff account on the store you're building for.

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

Make your products and collections visible for the Buy Button sales channel

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.

Retrieve product IDs

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 getting a store's products and collections using the Product listings AI:

Retrieve one product ID

To retrieve the product ID of a single product:

  1. From your Shopify admin, click Products (or press G P P):

    Products

  2. Click the name of a product to view it.

  3. Inspect the page URL.

    The product ID will be at the end of the URL. For example, in the URL https://your-store.myshopify.com/admin/products/12345, the product ID is 12345.

  4. Use the product listing API to retrieve the product:

shopClient.fetchProduct('12345').then(product => {
  // the product with an ID of '12345'
});

is to find it in the Shopify admin and inspect its URL. For example, in the URL https://your-store.myshopify.com/admin/products/12345, the product ID is 12345.

Retrieve many product IDs at once

To retrieve the product IDs using the product listings API:

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

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

    The collection ID will be at the end 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) {
  // an array of the products in the collection
});

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