Shopify app tutorial with admin extensions

This app is a guide for adding extensions to a Shopify app.

Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with these steps to create your own app and these tutorials to get started with admin action and block extensions.

This repo tracks the four-part tutorial series that covers:

• Building an admin action extension
• Building an admin block extension
• Connecting the action and block extensions
• Connecting an extension to your app's backend

Aligning this app to the tutorial

Running this app with no changes, will start you at the finishing point of Building an admin block extension. This is the point where we have created an action and a block extension, but they are not yet connected to each other or fetching data from a backend. If you would like to run the app and extensions in another state, you will need to make some small adjustments in the configuration.

Connected extensions

To run the extensions in the state that they are in at the finishing point of Connecting the action and block extensions, change the module path value in extensions/issue-tracker-action/shopify.extension.toml to ./src/ActionExtension-connect.jsx.

-module = "./src/ActionExtension.jsx"
+module = "./src/ActionExtension-connect.jsx"

Additionally, change the module path value in extensions/issue-tracker-block/shopify.extension.toml to ./src/BlockExtension-connect.jsx.

-module = "./src/BlockExtension.jsx"
+module = "./src/BlockExtension-connect.jsx"

Connected to the app's backend

To run the extensions in the state that they are in at the finishing point of Connecting an extension to your app's backend, change the module path value in extensions/issue-tracker-action/shopify.extension.toml to ./src/ActionExtension-backend.jsx.

-module = "./src/ActionExtension.jsx"
+module = "./src/ActionExtension-backend.jsx"

A note on the comments

You will find magic comments, (eg. # [START action-extension.configuration]) throughout the files in this app. These are for highlighting code in shopify.dev and can be ignored.

Quick start

Prerequisites

1. You must download and install Node.js if you don't already have it.
2. You must create a Shopify partner account if you don’t have one.
3. You must create a store for testing if you don't have one, either a development store or a Shopify Plus sandbox store.

Setup

If you used the CLI to create the template, you can skip this section.

Using yarn:

yarn install

Using npm:

npm install

Using pnpm:

pnpm install

Local Development

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

Press P to open the URL to your app. Once you click install, you can start development.

Local development is powered by the Shopify CLI. It logs into your partners account, connects to an app, provides environment variables, updates remote config, creates a tunnel and provides commands to generate extensions.

More about the app

For more information about the base Remix app without extensions, check out this repo.

Resources

• Remix Docs
• Shopify App Remix
• Introduction to Shopify apps
• App authentication
• Shopify CLI
• App extensions
• Shopify Functions
• Getting started with internationalizing your app