Shopify Setup — Partner Account, CLI, App, and Extension

This guide walks through Shopify partner setup, CLI, app creation, theme extension, and webhooks. It uses numbered parts (Part 1, Part 2, …) only for reading order—not the old “Option A — Phase …” doc naming.

Part 1 — Shopify accounts and prerequisites

1. Create Shopify Partner (developer) account

This is mandatory for building apps.

1. Go to

   https://partners.shopify.com

2. Click Join now

3. Sign in with email or Google

4. Choose:

   • Account type: Developer
   • Company name: your product or company name
   • Purpose: Build apps for the Shopify App Store

After signing up, you land in the Shopify Partner Dashboard.

This dashboard is where:

• You create apps
• Create development stores
• Manage API keys

---

2. Create a development store (test store)

You need at least one dev store to test the app.

1. In Partner Dashboard
2. Go to Stores
3. Click Add store
4. Select Development store
5. Store details:
   • Store name: something like appifire-ai-chat-test
   • Password protection: enabled (default)
6. Click Create store

You now have:

• A real Shopify store
• Free access
• No payment required
• Full admin permissions

Important:

• This store can install unpublished apps
• Perfect for testing extensions and billing

---

Part 2 — Local development environment

3. Install required tools

Node.js

• Install Node.js 18 or later
• Verify:

node -v
npm -v

Shopify CLI

This is mandatory.

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

Verify:

shopify version

---

4. Log in with Shopify CLI

shopify login

This opens browser, login with:

• Same email used for Partner account

Once done, CLI can:

• Create apps
• Deploy extensions
• Run local dev server

---

Part 3 — Create the Shopify app

5. Create a new Shopify app

Run:

shopify app init

(Or use npm init @shopify/app@latest.) Choose options carefully:

• App type: Public app
• App name: AppiFire AI Chat
• Package manager: npm or pnpm
• Template: Remix or React Router (Shopify often recommends React Router for new apps)

This will:

• Create app in Partner Dashboard
• Generate API key and secret
• Create local codebase

Your folder structure will look like:

ai-product-chatbot/
  app/
  extensions/
  prisma/
  shopify.app.toml

---

6. Understand what the template created

Out of the box, Shopify gives you:

• Embedded Admin App (inside Shopify Admin)
• OAuth flow
• Webhook handling
• App Bridge setup

This is NOT yet visible on storefront. That comes next.

---

Part 4 — Theme app extension (chat widget)

This is what renders the chatbot on the storefront.

7. Generate the theme app extension

Inside app folder:

shopify app generate extension

Choose:

• Extension type: Theme app extension
• Name: ai-chat-widget

This creates:

extensions/
  ai-chat-widget/
    blocks/
    assets/
    snippets/

This extension:

• Can inject chat widget
• Can be enabled via Shopify theme editor
• Is the correct approach (ScriptTags are deprecated)

---

8. Add chat widget UI

Inside:

extensions/ai-chat-widget/blocks/chat.liquid

Example minimal placeholder:

<div id="ai-chatbot-root"></div>
<script src="{{ 'chat.js' | asset_url }}"></script>

Add JS file in:

assets/chat.js

Later, this JS will:

• Load React widget
• Call your backend RAG API

---

Part 5 — Run and test locally

9. Run the app in development mode

From root folder:

shopify app dev

What happens:

• App server runs locally
• Shopify creates a temporary tunnel
• App auto installs on your dev store
• Theme extension is available

You will see:

• Admin app open inside Shopify admin
• Terminal shows URLs

---

10. Enable the chat widget on the storefront

1. Go to your dev store admin
2. Online Store -> Themes
3. Click Customize
4. Click Add section
5. Find your app extension
6. Enable AI Chat Widget
7. Save

Now your widget renders on storefront.

---

Part 6 — API access and reading products

11. Configure app scopes

Open:

shopify.app.toml

Add required scopes:

scopes = "read_products,read_inventory,read_content,read_themes"

Then run again:

shopify app dev

Shopify will ask to reauthorize.

---

12. Fetch products from Shopify

Inside your backend:

Use Admin API:

const products = await admin.rest.resources.Product.all({
  session,
  limit: 250
});

Store in your DB:

• Product title
• Description
• Variants
• Tags
• Price
• Images
• Metafields

Trigger ingestion:

• On app install
• On product update webhook

---

Part 7 — Webhooks (critical)

13. Register webhooks

Register these:

• products/create
• products/update
• products/delete
• app/uninstalled

Shopify CLI auto registers webhooks if defined.

Purpose:

• Keep RAG knowledge in sync
• No manual reindex needed

---

Part 8 — Testing strategy

14. Local testing

Test:

• Install and uninstall app
• Product sync
• Widget render
• API calls from storefront

Use:

• ngrok tunnel via Shopify CLI
• Browser dev tools
• Shopify admin logs

---

15. Multiple-store testing

Create:

• 2–3 dev stores
• Different catalogs
• Different languages

Ensure:

• Tenant isolation
• Correct data separation

---

Part 9 — Preparing for production

16. App configuration

Before submission:

• App listing assets
• Privacy policy URL
• Terms URL
• Support email

17. App review readiness

Shopify will check:

• OAuth correctness
• No hardcoded store URLs
• Proper data usage
• GDPR compliance

---

Part 10 — Deployment flow

1. Push code to GitHub
2. Use CI/CD to deploy backend
3. Run:

shopify app deploy

This:

• Deploys extensions
• Locks config
• Prepares for App Store submission

---

Common mistakes to avoid

• Using ScriptTags instead of theme extensions
• Not handling webhooks
• Re-ingesting full catalog every request
• Blocking UI on AI response
• Storing Shopify tokens insecurely

---

What to do next

If you want, I can:

• Design exact database schema for RAG
• Create product ingestion pipeline
• Write RAG prompt templates
• Prepare Shopify App Store listing
• Create Sprint-wise development tasks

Just tell me what you want next.