Buy Button JS

You can use the Shopify Buy Button JS library to embed customizable Shopify UI components, such as product listings and shopping carts, directly into any website. The library uses the JS Buy SDK to connect to a Shopify store, giving you access to its products and collections.

Anchor to RequirementsRequirements

You've created a development store or have a production store.
You've created products or collections in your store.
You have a website and want to add ecommerce functionality to it.

Anchor to Step 1: Generate an access tokenStep 1: Generate an access token

To generate an access token, you can generate one in the Shopify admin. Alternatively, you can create a custom app and use authorization code grant.

Anchor to Step 2: Make your products and collections availableStep 2: Make your products and collections available

After you've generated an access token, you need to make products and collections available to your custom app to access them from your app. After the products and collections are available, you can retrieve them using their respective IDs.

Tip

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

Anchor to Make a product availableMake a product available

From your Shopify admin, go to Products.
From the Products page, click the product you want to make available.
Next to SALES CHANNELS AND APPS click Manage.
In the Sales channels and apps dialog box, select the box next to the name of your custom app.

Anchor to Make a collection availableMake a collection available

From your Shopify admin, go to Products and click Collections.
From the Collections page, click the collection you want to make available.
Next to SALES CHANNELS AND APPS click Manage.
In the Sales channels and apps dialog box, select the box next to the name of your custom app.

Anchor to Step 3: Access the Buy Button JSStep 3: Access the Buy Button JS

Using the Buy Button JS, you can add the following components to your website:

Product listings and Buy Now buttons
Collections of products
A shopping cart
View BuyButton.js on GitHub

Anchor to Using the latest versionUsing the latest version

Last year, we announced the deprecation of the Checkout APIs, which Buy Button JS was dependent on. To maintain functionality, you must update to the latest version.

Anchor to What do I need to do?What do I need to do?

Find the code where you are using Buy Button JS
Check the code to determine how you’re using Buy Button JS:
- If you're using a package.json file to use Buy Button JS (@shopify/buy-button-js):
  - Change the version of @shopify/buy-button-js to ^3.0.4
- If you're using a Buy Button JS CDN script:
  - If you see http://sdks.shopifycdn.com/buy-button/[version_number]/buybutton.js, then replace it with http://sdks.shopifycdn.com/buy-button/latest/buybutton.js
  - If you see http://sdks.shopifycdn.com/buy-button/[version_number]/buybutton.min.js, then replace it with http://sdks.shopifycdn.com/buy-button/latest/buybutton.min.js
- If you’re using a Buy Button Storefront CDN script:
  - If you see https://sdks.shopifycdn.com/buy-button/[version_number]/buy-button-storefront.js, then replace with https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.js
  - If you see https://sdks.shopifycdn.com/buy-button/[version_number]/buy-button-storefront.min.js, then replace with https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js
Alternatively, you can make a new Buy Button from the Buy Button channel and replace your existing code with the new code. Please ensure no manual changes are made to the code generated by the Buy Button channel.

Anchor to Where to get helpWhere to get help

This SDK isn't supported by Shopify support, but there are other places where you can get help.