Your safety is important to us. If you notice any suspicious emails that appear to come from Shopify, please forward them to safety@shopify.com. Visit the Help Center page on phishing for more information.

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

To generate your JavaScript Buy SDK credentials:

  1. From your Shopify admin, click Buy Button. If Buy Button is not already installed, click the + button beside Sales channels:
Add a Sales Channel
  1. Click Create Token in the JavaScript Buy SDK section:
Javascript Buy SDK

Your Storefront access token for Buy Button is displayed on the Storefront Access Tokens page, as well as the App ID which will be required in later steps.

Note

You can't generate API credentials for the JavaScript Buy SDK from the Partner Dashboard. Instead, you will need a staff account on the store you're building for.

Create additional tokens

You can create additional Buy Button App tokens from this page by clicking Create token. You are prompted to provide a title for the new App token.

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.

  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'
});

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