How to Create a Shopify Admin App: Step-by-Step Guide Using Shopify CLI

Step 1: Set Up Your Development Environment

Ensure you have the following installed:

Node.js
Shopify CLI
Git

Step 2: Install Shopify CLI

If you haven’t already installed Shopify CLI, you can do so using npm:

npm install -g @shopify/cli @shopify/theme

Step 3: Authenticate with Shopify

shopify login --store your-store-name.myshopify.com

Step 4: Create a New App

Use Shopify CLI to create a new app:

shopify app create node

Follow the prompts to:

Enter a name for your app
Select your partner organization
Choose a development store (or create one)

Step 5: Navigate to Your App Directory

cd your-app-name

Step 6: Run Your App Locally

Start your app in development mode:

npm run dev

This will open a tunnel (using ngrok) and generate a public URL for your app, allowing Shopify to interact with it.

Step 7: Install Dependencies

Ensure all dependencies are installed:

npm install

Step 8: Add Shopify API Credentials

Shopify CLI automatically creates a .env file with your API credentials. Ensure this file contains the following:

SHOPIFY_API_KEY=your-api-key
SHOPIFY_API_SECRET=your-api-secret
SCOPES=write_products,read_products
HOST=https://your-ngrok-url

Step 9: Create Admin Pages

To add admin pages, create new files in the pages directory. For example, to create a new dashboard page, add a new file pages/dashboard.js:

import { Card, Page } from "@shopify/polaris";

const Dashboard = () => (
  <Page>
    <Card title="Dashboard" sectioned>
      <p>Welcome to your Shopify app!</p>
    </Card>
  </Page>
);

export default Dashboard;

Step 10: Update Navigation

Update your app’s main navigation to include links to your new pages. Edit pages/_app.js:

import { NavigationMenu } from "@shopify/app-bridge-react";
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/styles.css";

const MyApp = ({ Component, pageProps }) => (
  <AppProvider>
    <NavigationMenu
      navigationLinks={[
        {
          label: "Dashboard",
          destination: "/dashboard",
        },
      ]}
    />
    <Component {...pageProps} />
  </AppProvider>
);

export default MyApp;

Step 11: Handle Authentication

Shopify apps require OAuth authentication. Shopify CLI sets up OAuth for you, but you can customize it in server/server.js if needed.

Step 12: Test Your App

Open your development store, go to Apps, and install your app. Ensure all your pages and functionalities are working as expected.

Step 13: Deploy Your App

Once you’re satisfied with your app, deploy it to a live server. Ensure your .env file is updated with the live server URL.

Step 14: Submit Your App

Log in to your Shopify Partner Dashboard.
Navigate to Apps and select your app.
Complete the app submission form with all required details.
Submit your app for review.

Summary

You now have a basic Shopify Admin App. Here’s a quick recap:

Set up your development environment.
Create a new app using Shopify CLI.
Develop your app locally and add necessary pages.
Test your app in a development store.
Deploy and submit your app for review.

This guide provides a foundation to build upon. Customize and extend your app based on your specific requirements.