Hey there, future app creator! So, you want to build a Shopify app? That's awesome! Whether you're a coding whiz or just starting out, this guide will walk you through creating your very own app for the Shopify platform. We'll cover everything from setting up your workspace to getting your app live in the Shopify App Store. ## Quick Start (aka the "I'm in a hurry" version) Short on time? No worries! Here's the express route: 1. We've got a starter kit that handles all the boring setup stuff. 2. You can jump right into making your app do cool things. 3. This guide is still super helpful for understanding how Shopify apps work. Want to dive in? [Grab our ShopiFast starter kit and let's go!](https://shopifast.dev/) Now, if you're ready for the full adventure, let's get started! ## 1. Introduction ### What are Shopify apps? Shopify apps are extensions that add functionality to Shopify stores. They can range from simple tools to complex solutions that integrate with various aspects of a merchant's business. ### Why build a custom Shopify app? Building a custom Shopify app allows you to create unique solutions for merchants, potentially fill gaps in the market, and even generate revenue through the Shopify App Store. ### Overview of the app we'll be building In this tutorial, we'll create a simple inventory management app that helps merchants track their product stock levels and sends notifications when items are running low. ## 2. Prerequisites and Setup ### Creating a Shopify Partner account 1. Go to the [Shopify Partners website](https://www.shopify.com/partners). 2. Click "Join now" and follow the registration process. 3. Once approved, log in to your Shopify Partners dashboard. ### Installing necessary tools ### Node.js and npm 1. Visit the [official Node.js website](https://nodejs.org/en/download/package-manager). 2. Download and install the LTS (Long Term Support) version for your operating system. 3. To verify the installation, open a terminal and run: ``` node --version npm --version ``` ### Shopify CLI 1. Open your terminal. 2. Install Shopify CLI globally by running: ``` npm install -g @shopify/cli @shopify/theme ``` 3. Verify the installation: ``` shopify version ``` ### Setting up a development store 1. Log in to your Shopify Partners dashboard. 2. Click "Stores" in the left sidebar. 3. Click "Add store" and select "Development store". 4. Follow the prompts to create your development store. ## 3. Creating Your Shopify App ### Using Shopify CLI to generate a new app 1. Open your terminal and navigate to your desired project directory. 2. Run the following command to create new app with node.js template. ``` shopify app inti template=node ``` Note: running the command without `template` argument , will create a remix app. 1. Install dependencies ```jsx yarn install ``` 1. You can create a Shopify app either via the Shopify CLI or from the Shopify Partners Dashboard. If you create the app from the dashboard, you’ll need to connect it to your project manually. If you use the CLI, it will handle app creation for you. ![create a shopify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3eohv7fmn3zzda6wmc0.jpg) 1. Choose the app name ![create node.js shopify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gslw0d4pjdtgeksjjlj7.jpg) 1. Choose the store you created before for development ![chose shopify app store to run the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnfyazqh61xvzwy9n18j.jpg) ![chose shopify app name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6nxkxq41nor1awvurxg.png) 1. To install your app on a shop, it must be accessible from the internet. You have two options: use your own tunneling service, such as [Ngrok](https://ngrok.com/), or let Shopify handle it, which is recommended. Shopify uses Cloudflare Argo Tunnel to expose your app to the world. When you use Shopify’s method, a new URL is generated each time you run the app. The main downside is that this URL changes every time. ![run shopify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzu3gbb9i4m8n5ee0ech.png) 1. I f you chose to use your own tunnel tool, you need to update the urls in `shopify.app.toml` file with your tunnel urls. Else , just skip this step. ```jsx ....... application_url = "https://copy-b-christopher-editorials.trycloudflare.com" ....... redirect_urls = [ "https://copy-b-christopher-editorials.trycloudflare.com/auth/callback", "https://copy-b-christopher-editorials.trycloudflare.com/auth/shopify/callback", "https://copy-b-christopher-editorials.trycloudflare.com/api/auth/callback" ] ....... ``` 1. Install the app on your store, by click on `p` ![run shopify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh32uzln8eisot0v3xka.jpg) ### congratulations you just created your first shopify app. ## 4. Understanding Shopify App Architecture The generated project structure for a Shopify app consists of three main components. Let's explore each one: ![run shopify app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gojzkpoivlb34qwjjn9j.jpg) ### 1. Frontend - This is the user interface of your app that will be embedded in the Shopify store admin. - It's where merchants interact with your app. - Typically built using React, Polaris, JavaScript. The `frontend` directory contains the React-based user interface: - `App.jsx` and `Routes.jsx`: Define the main app structure and routing. - `assets` folder: Contains static files like images and SVGs. - `components` folder: Houses reusable React components. - `providers` : Contains context providers for app-wide state management. - `hooks` folder: Custom React hooks for shared logic. - `useAppQuery.js` and `useAuthenticatedFetch.js`: handle data fetching and authenticated data fetchting. - `pages` folder: Contains individual page components, used in Shopify admin. ### 2. Backend - This is the server-side component aka API. - It handles various backend tasks, including: - Authentication - Interacting with the Shopify API - Database operations - Business logic processing - This project is using Node.js, Express and sqlite database - `index.js`: The main entry point for the Node.js server. - `database.sqlite`: SQLite database file for local data storage. - `privacy.js`: Handles app mandatory compliance webhooks, required for public apps listed on shopify app store. - `shopify.js`: configures a Shopify app using the `@shopify/shopify-app-express` package. It sets up API version, authentication paths, webhooks, and uses SQLite for session storage. And, also includes billing configuration. ### 3. Shopify App Configurations ```jsx client_id = "8538fc16e6b9da87768f65308885c52c" name = "hellofy" handle = "hellofy" application_url = "https://copy-b-christopher-editorials.trycloudflare.com" embedded = true [build] automatically_update_urls_on_dev = true dev_store_url = "helllofy.myshopify.com" include_config_on_deploy = true [access_scopes] # Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes scopes = "write_products" [auth] redirect_urls = [ "https://copy-b-christopher-editorials.trycloudflare.com/auth/callback", "https://copy-b-christopher-editorials.trycloudflare.com/auth/shopify/callback", "https://copy-b-christopher-editorials.trycloudflare.com/api/auth/callback" ] [webhooks] api_version = "2024-07" [pos] embedded = false ``` - This component contains the configuration for your app. - It includes settings such as: - App name, handle ![test shopify app on store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo35b4rb7n6l8ssdbn1x.jpg) - API scopes (permissions your app needs) - App URLs (for installation, callback handling, etc.) - And other configurations Learn more about app configuration here: [App configuration](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration) Understanding these components and their roles will help you navigate and develop your Shopify app more effectively. ## 5. Configuring Your App ### Setting up app name and description 1. Open `shopify.app.toml` in your project root. 2. Update the `name` and `scopes` fields to match your app's requirements. ### Configuring app scopes and permissions In the same `shopify.app.toml` file, update the `scopes` array with the required permissions, e.g.: ```toml scopes = "write_products" ``` you can learn more about scopes [here](https://shopify.dev/docs/api/usage/access-scopes). ### Setting up API credentials Shopify credentials are handled differently in development and production environments. - During development, the Shopify CLI automatically provides these credentials, which you can view by running "shopify app env show". There's no need to manually add them to your .env file. ![shopify env variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhnzxo6vb9ry090go3iy.png) - For production, however, you must explicitly set these credentials in your environment. You can obtain the necessary credentials (API key and API secret key) either by running the same CLI command or by accessing your Shopify Partners dashboard: 1. In your Shopify Partners dashboard, go to "Apps" and select your app. 2. Under "App credentials", you'll find your API key and API secret key. ### Setting up the database By default the create project comes with sqlite database, in most cases sqlite is optimal for production. There’re a various databases you can use based on your cases: MonogDB, Postgres, MySQL … Let’s change it to Postgres with Prisma ORM. 1. Install prisma ```jsx yarn add prisma @prisma/client ``` 1. Setup prisma ```jsx yarn prisma init ``` 1. Install session storage manager to let Shopify manage session: ```jsx yarn add @shopify/shopify-app-session-storage-prisma ``` 1. Update `shopify.js` to the following ```jsx import { LATEST_API_VERSION } from "@shopify/shopify-api"; import { shopifyApp } from "@shopify/shopify-app-express"; import { PrismaSessionStorage } from '@shopify/shopify-app-session-storage-prisma'; import { restResources } from "@shopify/shopify-api/rest/admin/2023-04"; import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); const storage = new PrismaSessionStorage(prisma); const shopify = shopifyApp({ api: { apiVersion: LATEST_API_VERSION, restResources, billing: undefined, }, auth: { path: "/api/auth", callbackPath: "/api/auth/callback", }, webhooks: { path: "/api/webhooks", }, sessionStorage: storage, }); export default shopify; ``` 1. Update Prisma schema ```jsx generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model Session { id String @id shop String state String isOnline Boolean @default(false) scope String? expires DateTime? accessToken String userId BigInt? firstName String? lastName String? email String? accountOwner Boolean @default(false) locale String? collaborator Boolean? @default(false) emailVerified Boolean? @default(false) } ``` 1. Generate prisma models ```jsx yarn prisma generate ``` 1. create a docker-compose with postgres service ```jsx version: "3" services: postgres: ports: - 5432:5432 environment: - POSTGRES_DB=hellofy - POSTGRES_USER=default - POSTGRES_PASSWORD=secret image: postgres:13.3 volumes: postgres_data: ``` 1. Run the database ```jsx docker-compose up -d postgres ``` 1. Update .env with the right database url ```jsx DATABASE_URL="postgresql://default:secret@localhost:5432/hellofy?schema=public" ``` 1. Generate database migration: ```jsx yarn prisma migrate dev ``` - enter migration name: ex: `init` ![generate database migration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfpdffr8akv9yulrvgvd.png) Now, run the app again and you see the session now is storage in postgres ![shopify database schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo40y38bqxglxn52plav.png) ### Congratulations 🥳! You just created a first Shopify App. ## 6. Developing Core Functionality ### Building a Shopify App to Update Product Descriptions with OpenAI Follow these steps to integrate OpenAI into your Shopify app to update product descriptions. 1. Create an OpenAI Account Create an OpenAI account by visiting [OpenAI Platform](https://platform.openai.com/). 2. Get OpenAI Credentials ```jsx .... OPENAI_API_KEY=sk-proj-..........XZIFFL29UxC9T3BlbkFJ.............. ``` 1. Install open ai library ```jsx yarn add openai ``` 1. Add openai library to `index.js` ```jsx import OpenAI from "openai"; // Initialize OpenAI const openai = new OpenAI({ apiKey: proccess.env.OPENAI_API_KEY, }); ``` 1. Create `products` page in pages folder ```jsx import { Badge, Card, ChoiceList, EmptySearchResult, Frame, IndexFilters, IndexTable, Page, Toast, useIndexResourceState, useSetIndexFiltersMode, } from "@shopify/polaris"; import { useCallback, useState, useEffect } from "react"; import { useAppQuery, useAuthenticatedFetch } from "../hooks"; import ProductUpdate from "../components/ProductUpdate"; import { useProducts } from "../services/product"; const Products = () => { const emptyToastProps = { content: null }; const [toastProps, setToastProps] = useState(emptyToastProps); const fetch = useAuthenticatedFetch(); const { data, isLoading } = useProducts(); const [showModal, setShowModal] = useState(false); const [itemStrings, setItemStrings] = useState([ "All", "Active", "Draft", "Archived", ]); const [selected, setSelected] = useState(0); const [sortSelected, setSortSelected] = useState(["product asc"]); const { mode, setMode } = useSetIndexFiltersMode(); const [tone, setStatus] = useState(undefined); const [type, setType] = useState(undefined); const [queryValue, setQueryValue] = useState(""); const [products, setProducts] = useState([]); useEffect(() => { if (data?.data) { const transformedProducts = data.data.map((product) => ({ id: product.id, price: `$${product.variants[0].price}`, product: product.title, tone: ( {product.status} ), inventory: `${product.variants[0].inventory_quantity} in stock`, type: product.product_type, description: product.body_html, image: product.image?.src, })); setProducts(transformedProducts); } }, [data]); const resourceName = { singular: "product", plural: "products", }; const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(products); const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const disambiguateLabel = (key, value) => { switch (key) { case "type": return value.map((val) => `type: ${val}`).join(", "); case "tone": return value.map((val) => `tone: ${val}`).join(", "); default: return value; } }; const isEmpty = (value) => { if (Array.isArray(value)) { return value.length === 0; } else { return value === "" || value == null; } }; const deleteView = (index) => { const newItemStrings = [...itemStrings]; newItemStrings.splice(index, 1); setItemStrings(newItemStrings); setSelected(0); }; const duplicateView = async (name) => { setItemStrings([...itemStrings, name]); setSelected(itemStrings.length); await sleep(1); return true; }; const onCreateNewView = async (value) => { await sleep(500); setItemStrings([...itemStrings, value]); setSelected(itemStrings.length); return true; }; const handleStatusChange = useCallback((value) => setStatus(value), []); const handleTypeChange = useCallback((value) => setType(value), []); const handleFiltersQueryChange = useCallback( (value) => setQueryValue(value), [] ); const handleStatusRemove = useCallback(() => setStatus(undefined), []); const handleTypeRemove = useCallback(() => setType(undefined), []); const handleQueryValueRemove = useCallback(() => setQueryValue(""), []); const handleFiltersClearAll = useCallback(() => { handleStatusRemove(); handleTypeRemove(); handleQueryValueRemove(); }, [handleStatusRemove, handleQueryValueRemove, handleTypeRemove]); const appliedFilters = []; if (tone && !isEmpty(tone)) { const key = "tone"; appliedFilters.push({ key, label: disambiguateLabel(key, tone), onRemove: handleStatusRemove, }); } if (type && !isEmpty(type)) { const key = "type"; appliedFilters.push({ key, label: disambiguateLabel(key, type), onRemove: handleTypeRemove, }); } const rowMarkup = products.map( ( { id, product, price, tone, inventory, type, description, image }, index ) => ( {image ? ( {"product

) : (

no image

)} {product} {price} {tone} {inventory} {type} {description} ) ); const emptyStateMarkup = ( ); const primaryAction = selected === 0 ? { type: "save-as", onAction: onCreateNewView, disabled: false, loading: false, } : { type: "save", onAction: async () => { await sleep(1); return true; }, disabled: false, loading: false, }; const [show, setShow] = useState(true); const [description, setDescription] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const [active, setActive] = useState(false); const toggleActive = useCallback(() => setActive((active) => !active), []); const toastMarkup = active ? ( ) : null; const generate = () => { if (selectedResources.length !== 1) { toggleActive(); return; } setIsGenerating(true); const response = fetch("/api/generate", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ selectedResources }), }); response .then((response) => response.json()) .then((data) => { setDescription(data.description); setShow(true); setIsGenerating(false); }) .catch((error) => { console.error("Error:", error); setIsGenerating(false); }); return true; }; return ( {toastMarkup} {}} onSort={setSortSelected} primaryAction={primaryAction} cancelAction={{ onAction: () => {}, disabled: false, loading: false, }} tabs={itemStrings.map((item, index) => ({ content: item, index, onAction: () => {}, id: `${item}-${index}`, isLocked: index === 0, actions: index === 0 ? [] : [ { type: "rename", onAction: () => {}, onPrimaryAction: async (value) => { const newItemsStrings = itemStrings.map( (item, idx) => { if (idx === index) { return value; } return item; } ); await sleep(1); setItemStrings(newItemsStrings); return true; }, }, { type: "duplicate", onPrimaryAction: async (name) => { await sleep(1); duplicateView(name); return true; }, }, { type: "delete", onPrimaryAction: async () => { await sleep(1); deleteView(index); return true; }, }, ], }))} selected={selected} onSelect={setSelected} canCreateNewView onCreateNewView={onCreateNewView} mode={mode} setMode={setMode} filters={[]} appliedFilters={appliedFilters} onClearAll={handleFiltersClearAll} /> {rowMarkup} ); }; export default Products; ``` 1. create api route to get product in `index.js` ```jsx const getProducts = async (_req, res) => { try { const products = await shopify.api.rest.Product.all({ session: res.locals.shopify.session, }); res.status(200).send(products); } catch (error) { console.error(`Failed to fetch products: ${error.message}`); res.status(500).send({ error: error.message }); } }; app.get("/api/products", getProducts); ``` 1. Update `useFetch` hook ```jsx import { useCallback } from 'react'; import { useQueryClient } from 'react-query'; import { useAuthenticatedFetch } from './useAuthenticatedFetch'; export const useFetch = () => { const fetch = useAuthenticatedFetch(); const queryClient = useQueryClient(); const get = useCallback( (url) => { return fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then((r) => r.text()) .then((text) => JSON.parse(text)); }, [fetch] ); const post = useCallback( (url, body) => fetch(url, { method: 'POST', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' }, }).then((r) => r.json()), [fetch] ); return { get, post, mutate: (key) => queryClient.invalidateQueries(key), }; }; ``` 1. Create `services/product.js` in frontend folder to handle product resource operations ```jsx import { useCallback, useState } from 'react'; import { useQuery, useQueryClient } from 'react-query'; import { useFetch } from '../hooks'; export const useProducts = () => { const { get } = useFetch(); const { data, ...rest } = useQuery({ queryFn: () => get('/api/products'), queryKey: ['products'], refetchOnWindowFocus: false, }); return { data: data || null, ...rest, }; }; export const useProductUpdate = () => { const { post, mutate } = useFetch(); const queryClient = useQueryClient(); const [isLoading, setIsLoading] = useState(false); const update = useCallback( async (body) => { setIsLoading(true); const response = await post('/api/update', body); await mutate("products") setIsLoading(false); return response; }, [post, queryClient]); return { update, isLoading, }; } ``` 1. In the `products` page we select a single product and send it to the api to generate the description. Let’s add a api endpoint for that. Add the following changes to `index.js` : ```jsx const generateDescription = async (_req, res) => { const { selectedResources } = _req.body; if (!selectedResources) { return res.status(400).send({ success: false, message: "No resources selected" }); } try { const productId = selectedResources[0]; const product = await shopify.api.rest.Product.find({ session: res.locals.shopify.session, id: productId, }); if (!product) { return res.status(400).send({ success: false, message: "Product not found" }); } const prompt = `Generate a good description for the product ${product.title}, ${product.body_html}, ${product.product_type}, ${product.handle}, ${product.tags}`; const completion = await openai.chat.completions.create({ messages: [{ role: "system", content: prompt }], model: "gpt-4o-mini", }); const description = completion.choices[0]?.message.content; res.status(200).send({ success: true, description }); } catch (error) { console.error(`Error generating description: ${error.message}`); res.status(500).send({ success: false, error: error.message }); } }; app.post("/api/generate", generateDescription); ``` Here, we use a simple prompt based on some product fields to generate a better description. You can tweak the prompt with additional information to create more accurate descriptions. 1. After generating the description, it returns to frontend for review and edit by show a modal with prompt output. Here’s the modal ```jsx import { Modal, TextField } from "@shopify/polaris"; import { useCallback } from "react"; import { useProductUpdate } from "../services/product"; export default function ProductUpdate({ active, setActive, description, productId, }) { if (!active && !description && !productId) { return null; } const handleChange = useCallback(() => setActive(!active), [active]); const { update, isLoading } = useProductUpdate(); const handleUpdate = async () => { await update({ description, productId }); handleChange(); }; return ( ); } ``` 1. After reviewing / editing the description, we update the description in the store product with this endpoint: ```jsx const updateProductDescription = async (_req, res) => { const { description, productId } = _req.body; if (!description) { return res.status(400).send({ success: false, message: "Description is required" }); } try { const product = new shopify.api.rest.Product({ session: res.locals.shopify.session }); product.id = productId; product.body_html = description; await product.save({ update: true }); res.status(200).send({ success: true, data: product }); } catch (error) { console.error(`Error updating product description: ${error.message}`); res.status(500).send({ success: false, error: error.message }); } }; app.post("/api/update", updateProductDescription); ``` ### Congratulations 🎉, you now have a useful app! ![Shopify app demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtlqg9gmkubpjj5res0v.gif) ![helllofy--hellofy--Shopify-ezgif.com-video-to-gif-converter.gif] ## 7. Deploy the App to [Fly.io](http://fly.io/) [Fly.io](http://fly.io/) is a great choice for deploying your Shopify app, providing a simple and efficient way to get your app online, but can you go with any other provider. Follow these steps to deploy your Shopify app to [Fly.io](http://fly.io/). ### Prerequisites - You have a Shopify app ready for deployment. - You have Docker installed on your machine. - You have Flyctl ([Fly.io](http://fly.io/) command line tool) installed. If not, you can install it [here](https://fly.io/docs/hands-on/install-flyctl/). ### 1. Create a [Fly.io](http://fly.io/) Account 1. Go to [Fly.io](https://fly.io/). 2. Click on **Sign Up** and create an account. ### 2. Install Flyctl 1. Follow the installation instructions for your operating system from the [Flyctl installation guide](https://fly.io/docs/hands-on/install-flyctl/). ### 3. Initialize [Fly.io](http://fly.io/) in Your Project 1. Open your terminal. 2. Navigate to your project directory. 3. Run the following command to log in to [Fly.io](http://fly.io/): ```bash flyctl auth login ``` 4. Initialize your [Fly.io](http://fly.io/) app: ```bash flyctl launch ``` - Follow the prompts to create a new app. - Choose a region close to you or your target users. - When asked if you want to deploy now, select **no**. We will configure Docker first. ### 4. Create a database There are many database options to choose from: Supabase, CockroachDB, Amazon RDS, or even managing your own on a VPS. For this example, since we're using [Fly.io](http://fly.io/), we'll go with [Fly.io](http://fly.io/) Postgres. It's a great fit and integrates seamlessly with [Fly.io](http://fly.io/)'s . 1. Create a PostgreSQL Database Create a PostgreSQL database instance using the Fly.io CLI: ```jsx flyctl postgres create --name your-db-name --region your-region ``` 2.Configure Database Access [Fly.io](http://fly.io/) will provide you with a connection string and credentials for your PostgreSQL database. You can view these details by running: ```jsx flyctl postgres attach --app your-app-name your-db-name ``` ### 5. Configure [Fly.io](http://fly.io/) 1. Open the `fly.toml` file generated by the `flyctl launch` command. 2. Ensure the `[[services]]` section looks like this: ```toml [[services]] internal_port = 3000 protocol = "tcp" [[services.ports]] handlers = ["http"] port = 80 [[services.ports]] handlers = ["tls", "http"] port = 443 [[services.tcp_checks]] interval = "15s" timeout = "2s" grace_period = "1s" restart_limit = 0 ``` 3. Specify secrets for your Fly App Required Secrets for Your App To configure your app, you'll need the following secret values: - `DATABASE_URL` - `OPENAI_API_KEY` - `SHOPIFY_API_KEY` - `SHOPIFY_API_SECRET` - `SCOPES` You can obtain the values for these variables from the previous setup steps. Setting Secrets in Your [Fly.io](http://fly.io/) App To set these secrets in your [Fly.io](http://fly.io/) app, follow these steps: 1. Open your terminal and navigate to your project directory. 2. Use the [Fly.io](http://fly.io/) CLI to set each secret by running the following commands: ``` flyctl secrets set DATABASE_URL=your_database_url flyctl secrets set OPENAI_API_KEY=your_openai_api_key flyctl secrets set SHOPIFY_API_KEY=your_shopify_api_key flyctl secrets set SHOPIFY_API_SECRET=your_shopify_api_secret flyctl secrets set SCOPES=your_scopes ``` Replace `your_database_url`, `your_openai_api_key`, `your_shopify_api_key`, `your_shopify_api_secret`, and `your_scopes` with the actual values you obtained earlier ### 6. Deploy Your App 1. In your terminal, run: ```bash flyctl deploy ``` 2. [Fly.io](http://fly.io/) will build and deploy your app. This may take a few minutes. ### 7. Access Your App 1. Once the deployment is complete, [Fly.io](http://fly.io/) will provide a URL for your app. 2. Open the URL in your browser to see your Shopify app running. ### 7. Connect Your App to Shopify 1. Log in to your Shopify Partners dashboard. 2. Go to **Apps** and find your app. 3. In the **App setup** section, update the app URL to the [Fly.io](http://fly.io/) URL provided after deployment. 4. Save the changes. ### What's Next? This app is just the beginning; there's a lot more you can do to enhance it. Here are some tasks to consider if you want to continue developing the app: - Add more functionalities - Implement user settings - Improve the prompting system - Enable multiple product generations - Clean up the project structure - Set up billing - Learn how to handle mandatory webhooks ### Additional Tips - Deepen your understanding of the Shopify API. Shopify frequently updates its platform, so staying current is essential. - Learn more about building Shopify extensions. - Master Shopify billing. - Get familiar with Liquid.js. - Explore public app listing. By focusing on these areas, you'll be well-equipped to create a robust and feature-rich Shopify app. Happy coding 🚀💻✨! Get a full ready Shopify app boilerplate @ https://shopifast.dev ![ShopiFast: A Shopify app boilerplate - starter kit -template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kziwvqin6u87cngz4hex.jpg) The source code for the app is available on github: https://github.com/adibmed/shopify-app-openai

shopifast

A detailed guide to create an AI Shopify App - Step by Step

Join Our Newsletter. No Spam, Only the good stuff.