Quickstarts
Shopify

Deploy a Shopify App

You can deploy a custom Shopify app to Render to extend Shopify’s core capabilities for Shopify store owners. A Shopify app might add features to an existing Shopify store, introduce new admin functionality, or pull in Shopify merchant data for processing and analysis.

Getting started

You can clone our example repository if you already have your Shopify API and secret values, and you know which scopes you want to use. Otherwise, follow the steps below to create a new Shopify app and deploy it to Render.

Create your project with the Shopify CLI

Following the steps in Shopify’s App tutorial, let’s create a new app from your terminal using the Shopify CLI. Note that the steps differ slightly depending on whether you’re building an “app” or an “extension”, so make sure to create the right project for your use case. The process to deploy to Render is similar in either case.

Before you begin these steps, make sure you have recent versions of Node.js and npm installed on your system. See additional requirements.

Run npm init @shopify/app@latest

This prompts you for an app name, asks whether you want to use Remix, and asks whether to use JavaScript or TypeScript. A folder is created with the name you provide, and the app is initialized in that folder.

The final output should show you that the process succeeded:

╭─ success ──────────────────────────────────────────────────────────────╮
│                                                                        │
│  render-sample-app is ready for you to build!                          │
│                                                                        │
│  Next steps                                                            │
│    • Run `cd render-sample-app`                                        │
│    • For extensions, run `npm run generate extension`                  │
│    • To see your app, run `npm run dev`                                │
│                                                                        │
│  Reference                                                             │
│    • Shopify docs                                                      │
│    • For an overview of commands, run `npm run shopify app -- --help`  │
│                                                                        │
╰────────────────────────────────────────────────────────────────────────╯

Run npm run dev to continue building the app. (If you’re building an extension, use npm run generate extension instead.)

This command creates a local SQLite database, along with its database migration schema.

The command also prompts you to associate the project with a registered Shopify app. You can choose to create a new app, or associate the project with an existing app (Shopify displays a list of your existing apps). This step may require authentication to Shopify.

Pay close attention to the terminal output as you go through these steps. It provides helpful information about accessing your application, resetting your database, and more.
Once the app is running in development mode, press p in the terminal prompt to open the app in your browser. If this succeeds, you can press q to quit the development mode runtime and continue.

Your Shopify app uses a local SQLite database by default. On Render, locally stored files are lost with each deploy of your service. We strongly recommend that you configure your app to use PostgreSQL instead. Learn how to set up PostgreSQL on Render, and see the Shopify CLI docs for more information on connecting to a dedicated database.
Fetch your Shopify API details and scopes using npm run shopify app env show.

This outputs a few lines of text showing you your SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and SCOPES variables. You’ll need to add these values to your Render service for it to connect to Shopify successfully.

Prepare your Render deployment

Commit your code and push it to a repository on GitHub/GitLab/Bitbucket. You’ll connect this repo to your Render service.
In the Render Dashboard, click New > Web Service.
In the service creation flow, connect your project’s Git repository and give the service a name.
- Render assigns your web service an onrender.com subdomain based on its name (e.g., a name of “My App” might produce https://my-app.onrender.com). You will need this URL later.
Select Docker as your service’s runtime and choose an instance type (such as Free or Starter).
Click Create Web Service.

Render kicks off your service’s first deploy. This deploy will fail because we haven’t set some important configuration values yet! Let’s do that next.

Configure your web service

After your web service is created, go to its Environment page and define the following environment variables for it:

Variable Name	Value
`SHOPIFY_API_KEY`	Obtain by running `npm run shopify app env show`
`SHOPIFY_API_SECRET`	Obtain by running `npm run shopify app env show`
`SCOPES`	Obtain by running `npm run shopify app env show`
`SHOPIFY_APP_URL`	Provide your Render web service’s URL from above (e.g., `https://my-app.onrender.com`)
`NODE_ENV`	Set this to `production`.

After you set these variables, Render redeploys your service to incorporate the new configuration. You can also click Manual Deploy > Deploy latest commit to trigger a redeploy manually.

You’re all done on the Render side! Your Docker container successfully deploys on Render within a few minutes. From your service’s page in the Render Dashboard, click its onrender.com URL to view the running app. As you continue to build, you can push updates to your GitHub/GitLab/Bitbucket repository, and Render will automatically redeploy your service with the updated code.

Note your app’s URL (such as https://shopify-example-app.onrender.com/), because you’ll need it to configure your Shopify app below.

Finish configuration in Shopify

Log in to your Shopify developer portal and open your partner account page (it has a URL like https://partners.shopify.com/12345). You’ll perform a few different actions here to finish setting up your app.

Add callbacks to your Shopify app

From your partner account page, click Apps in the left menu and select the app you created with the Shopify CLI.

Click Configuration in the left menu and find the URLs section.

In this section, do the following:

Provide your Render service’s onrender.com URL in the App URL field.
In the Allowed redirection URL(s) field, add three entries that each start with your Render service’s onrender.com URL and end with the following paths:
- /auth/callback
- /auth/shopify/callback
- /api/auth/callback
When you’re done, the URLs section should look like this:
Click Save and release at the top of the page.

Create a development store

Next, let’s create a development store and install your app to verify that it’s working.

Return to your partner account page and click Stores in the left menu.
Click Add store > Create development store.
Select the Create a store to test and build option and give the store a helpful name.
Enable the option to Start with test data.

When you’re done, the page should look like this:
Click Create development store. You’re redirected to the new store’s dashboard.

Install your app in your development store

From your partner account page, click Apps in the left menu and select the app you created with the Shopify CLI.
You’ll see a panel that says Test your app. Click Select store and choose the development store you just created:
You’re prompted to verify some settings. Click Install to continue.
You’re redirected to the store’s admin page, which displays the following:

This indicates that your app is working as expected.

If your Render service is running on the Free instance type, it might take up to a minute to spin back up if it hasn’t received traffic for a while. You can visit your service’s onrender.com URL to spin it up before opening your admin page.