Shopify
Connect your Shopify app for OAuth in Paragon
You'll need the following information to set up your Shopify App with Paragon:
Paragon provides a redirect URL to send information to your Shopify app. To add the redirect URL to your Shopify app:
- 1.
- 2.Navigate to App setup > URLs > Allowed redirection URL(s)
- 3.Add your app's Initial Redirect URL to "App URL". While testing your integration, you can use your app's root URL. Once you set up an Initial Redirect to go live, you will need to change this to the URL of your Initial Redirect.
- 4.Add your app's Redirect Callback URL to "Allowed redirection URL(s)". While testing your integration, you can use
https://passport.useparagon.com/oauth
. Once you set up a Redirect Callback to go live, you will need to change this to the URL of your Redirect Callback. - 5.Press the Save button at the top of the page to save your changes.
Note: You'll need a Shopify application to connect your application to Paragon. Learn more about creating a Shopify application here.

2. Click Apps on the sidebar.
3. Select your Shopify application.
4. In the Test your app section, press the Select store button.
5. Choose the development store you'd like to connect to.
Note: You'll need to create a development store if you don't already have one. Learn more about creating a Shopify development store here.
1. Select Shopify from the Integrations Catalog.
2. Under Integrations > Connected Integrations > {YOUR_APP} > Settings, fill out your credentials from the end of Step 1 in their respective sections:
- API Key: Found under Apps > App setup > App credentials > API key on your Shopify app page.
- API Secret Key: Found under Apps > App setup > App credentials > API secret key on your Shopify app page.
- Permissions: Select the scopes you've requested for your application. A complete list of Shopify's scopes is here.
Press the blue "Connect" button to save your credentials.
Note: You should only add the scopes you've requested in your application page to Paragon.

Once your users have connected their Shopify account, you can use the Paragon SDK to access the Shopify API on behalf of connected users.
Any Shopify API endpoints can be accessed with the Paragon SDK as shown in this example.
// You can find your project ID in the Overview tab of any Integration
// Authenticate the user
paragon.authenticate(<ProjectId>, <UserToken>);
// Create Customer
await paragon.request("shopify", "/admin/api/2020-10/customers.json", {
method: "POST",
body: {
"first_name": "John",
"last_name": "Norman",
"email": "[email protected]",
"phone": "+16135551111",
"note": "Creating customer for testing",
"tags": ["tag1","tag2"]
}
});
// Query Customers
await paragon.request("shopify", "/admin/api/2020-10/customers.json", {
method: "GET"
});
Once your Shopify account is connected, you can add steps to perform the following actions:
- Get customers
- Search customers
- Create customer
- Update customer
- Get orders
- Create order
- Update order
- Get products
- Create product
- Update product
When creating or updating records in Shopify, you can reference data from previous steps by typing
{{
to invoke the variable menu.
Webhook triggers can be used to run workflows based on events in your users' Shopify account. For example, you might want to trigger a workflow whenever new orders are created Shopify to sync your users' Shopify orders to your application in real-time.

You can find the full list of Webhook Triggers for Shopify below:
- New Order
- Order Updated
- New Customer
- Customer Updated
- New Product
- Product Updated
Required for publishing: Implementing Redirect Pages is a requirement for listing your app on the Shopify App Store. For more information, see Shopify's documentation.
Your Shopify integration requires two types of pages hosted in your application to support an installation flow that begins in the Shopify App Store (i.e., a user searches the Shopify App Store for your published app and clicks Add app).
Here is an annotated version of the Shopify OAuth flow diagram outlining what pages you will need to implement:

The pages you will need to implement include:
- Initial Redirect: This page will take in a
shop
query parameter and redirect to Shopify's OAuth flow. - Redirect Callback: This page will receive the OAuth authorization code after the Shopify user grants consent and call
paragon.completeInstall
to save the user's account connection.
For an example implementation of the redirect pages using React (based on our Next.js sample app), see:
The Initial Redirect should be implemented as follows:
- Accept and read the query parameter
shop
. If the query parameter is present, redirect to the following URL to start the Shopify OAuth flow:
https://{shopQueryParam}/admin/oauth/authorize?client_id={SHOPIFY_CLIENT_ID}&redirect_uri={REDIRECT_CALLBACK_URL}&scope={SHOPIFY_SCOPES}
- The
SHOPIFY_CLIENT_ID
should match the Client ID that you use in your Shopify integration settings. - The
REDIRECT_CALLBACK_URL
should be the URL of the Redirect Callback page in your app. - The
SHOPIFY_SCOPES
should match the scopes that you use in your Shopify integration settings.
The Redirect Callback should be implemented as follows:
- Import the Paragon SDK and authenticate a user.
- Note: If a user is not yet logged into your app, you can redirect to a login form, while preserving the intended URL to redirect to upon successful login. In other words, after logging in, your user should see your Redirect Page.
- Accept and read query parameters, which will be:
code
andshop
in case of a successful installationerror
in case of an unsuccessful installation or denied consent
- If the
code
query parameter is present,- Read the
shop
query parameter and capture the shop name in the pattern{shop}.myshopify.com
. See the regular expression used below. - Call
paragon.completeInstall
to complete the OAuth exchange and save a new connected Shopify account.
let params = new URLSearchParams(window.location.search);
let authorizationCode = params.get("code");
let [, shopName] = params.get("shop").match(/^([a-zA-Z0-9][a-zA-Z0-9\-]*)\.myshopify\.com/);
if (authorizationCode && shopName) {
paragon.completeInstall("shopify", {
authorizationCode: authorizationCode,
redirectUrl: "https://your-app.url/shopify-redirect",
integrationOptions: {
SHOP_NAME: shopName,
}
}).then(() => {
// Redirect to your app's integrations page
});
} else {
let error = params.get("error");
// Handle error
}
- If the
error
query parameter is present,- Show this error in your app and allow your user to retry the process.
- 1.
- 2.Navigate to App setup > URLs > Allowed redirection URL(s)
- 3.Set your App URL to your app's Initial Redirect URL.
- 4.Add your app's Redirect Callback URL to Allowed redirection URL(s).
Last modified 22d ago