1. Quickstarts
  2. 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.

  1. 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`  │
    │                                                                        │
    ╰────────────────────────────────────────────────────────────────────────╯
  2. 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 and creates a “development store” that you will need later on. You can choose to either 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.

    ╭─ info ─────────────────────────────────────────────────────────────────────╮
    │                                                                            │
    │  Using shopify.app.toml:                                                   │
    │                                                                            │
    │    • Org:             Render Sample App                                    │
    │    • App:             render-test-walkthrough                              │
    │    • Dev store:       render-example-app.myshopify.com                     │
    │    • Update URLs:     Not yet configured                                   │
    │                                                                            │
    │   You can pass `--reset` to your command to reset your app configuration.  │
    │                                                                            │
    ╰────────────────────────────────────────────────────────────────────────────╯

    Note the value of your Dev store for use in a later step.

  3. 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.

  4. 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

  1. Commit your code and push it to a repository on GitHub/GitLab/Bitbucket. You’ll connect this repo to your Render service.
  2. In the Render Dashboard, click New > Web Service.
  3. 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.
  4. Select Docker as your service’s runtime and choose an instance type (such as Free or Starter).
  5. 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 NameValue
SHOPIFY_API_KEYObtain by running npm run shopify app env show
SHOPIFY_API_SECRETObtain by running npm run shopify app env show
SCOPESObtain by running npm run shopify app env show
SHOPIFY_APP_URLProvide your Render web service’s URL from above (e.g., https://my-app.onrender.com)
NODE_ENVSet 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:

  1. Provide your Render service’s onrender.com URL in the App URL field.

  2. 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:

    Setting up Shopify callback URLs

  3. Click Save and release at the top of the page.

Configure your development store

In the early steps of this guide, the Shopify CLI tool creted a development store. Next, we need to configure that store to use your deployed Render application

First, we will find that development store and install your new Shopify app in it.

  1. From your partner account page, click Stores in the left menu and choose your development store.

  2. Verify that your app has already been installed in your development store.

  3. Click Apps in the left menu and select the app you created with the Shopify CLI.

  4. You’ll see a panel that says Test your app. Click Select store, hover over your development store, and click Install app.

    Installing the app on your development store

  5. You may be prompted to verify some settings. Click Install to continue.

  6. You’re redirected to the store’s admin page, which displays the following:

    Congratulations, your Shopify app is working

    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.