Skip to main content

Custom apps

You can use this package to build apps that are distributed in the Shopify Admin, also known as merchant custom apps. These apps do not Authorize by OAuth, and instead use a access token that has been generated by the Shopify Admin.

Note

Before creating a new app to be distributed with the shopify admin, you should be familiar with the limitations of the different distribution types

Anchor to config-credentialsConfigure your app

After you have created and configured your app in the Shopify Admin update your code with the API Key, API Secret Key, and the access token.

Configure your app credentials

shopify.server.ts

const shopify = shopifyApp({
apiKey: "your-api-key",
apiSecretKey: "your-api-secret-key",
adminApiAccessToken:"shpat_1234567890",
...
}

Anchor to config-settingsConfigure your app settings

Configure shopifyApp with the following values

  1. distribution - AppDistribution.ShopifyAdmin
  2. appUrl - https://localhost:3000 or other configured port

Merchant custom apps use a different authentication strategy than embedded apps and cannot be embedded in the Shopify Admin.

Configure app settings

/app/shopify.server.ts

const shopify = shopifyApp({
apiKey: "your-api-key",
apiSecretKey: "your-api-secret-key",
adminApiAccessToken:"shpat_1234567890",
distribution: AppDistribution.ShopifyAdmin,
appUrl: "https://localhost:3000",
...
}

Anchor to local-devRun your app locally

Merchant custom apps are not compatible with the Shopify CLI, so you must start your app directly. After your app is running you can access it at the following URL: http://localhost:3000/app?shop=my-shop.myshopify.com

Run your app

npm exec react-router dev

Anchor to resourcesResources

Custom apps
Create a new custom app
App distribution
Understand the different distribution types