Skip to content

Commit 18d60a0

Browse files
gabeb03gabeb03
authored
Merge pull request #176 from gadget-inc/add-notion-template
Add Shopify → Notion Template
2 parents e4056bc + 2e55683 commit 18d60a0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+7355
-0
lines changed

‎shopify/finance-dashboard-app-private-remix-ssr/.github/README.md

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# Shopify → Notion template set up guide
2+
3+
This guide walks you through setting up an automated bridge: Shopify → Gadget → Notion.
4+
5+
New Shopify orders flow into Notion, updating your finance dashboard with sales, costs, and margins in real time.
6+
7+
<a href="https://gadget.wistia.com/medias/zo7raw6wfb">
8+
<p style="font-weight: bold; font-size: 18px;">Shopify to Notion bridge template walkthrough</p>
9+
<p>Watch this video walkthrough guide to set up this template</p>
10+
</a>
11+
12+
[![Fork template](https://img.shields.io/badge/Fork%20template-%233A0CFF?style=for-the-badge)](https://app.gadget.dev/auth/fork?domain=finance-dashboard-app.gadget.app)
13+
14+
### Requirements
15+
16+
- Shopify Partner account with access to a development store
17+
- Connect your Gadget app to Shopify
18+
- A Notion workspace with a copy of the prebuilt [finance dashboard](https://steampunk-education.notion.site/Finance-Dashboard-249719c13e368029a77be68a7b824e35).
19+
20+
### Part 1: Connect Shopify to Gadget
21+
22+
#### 1.1 Initial Shopify Connection
23+
24+
1. In Gadget, navigate to **Settings** (bottom left corner)
25+
2. Go to **Plugins**
26+
3. Select the **Shopify connection** (it will show as "incomplete")
27+
4. Click **Connect to Shopify App**
28+
5. Log into your Shopify Partner organization if prompted
29+
6. Click **Continue** twice
30+
31+
#### 1.2 Handle Protected Customer Data Access
32+
33+
1. When prompted about accessing customer data, click **Open the access form**
34+
2. In the form, indicate you're using the data only to make the app run
35+
3. Save the form
36+
4. Return to Gadget and confirm you've filled out the form
37+
5. Click **Request access**
38+
39+
#### 1.3 Install the App
40+
41+
1. Review the permissions (personal and store information access)
42+
2. Click **Install**
43+
3. The Gadget landing page will load
44+
45+
Since Gadget is acting as middleware, we have no need to customize this landing page, or any part of the frontend. If you want to customize this template and add a frontend that users can see from their Shopify admin, go to the `web` folder and edit the React code there.
46+
47+
#### 1.4 Sync Shopify Data
48+
49+
1. Click on **Installs** on the far left side of the Gadget UI:
50+
2. Click **Sync** to import all product data into Gadget's database
51+
3. Wait for sync completion (usually takes a minute)
52+
53+
#### 1.5 Set Product Costs
54+
55+
**Important**: You must set product costs in Shopify for margin calculations to work.
56+
57+
1. In Shopify admin, go to **Products**
58+
2. For each product:
59+
- Edit the product
60+
- Set the cost (e.g., $500)
61+
- Save
62+
3. Verify in Gadget:
63+
- Go to `api` → `models` → `shopifyInventoryItem` → `data`
64+
- Refresh to see the updated costs
65+
66+
### Part 2: Connect Gadget to Notion
67+
68+
#### 2.1 Create Notion Integration
69+
70+
1. Navigate to [notion.so/profile/integrations](https://www.notion.so/profile/integrations)
71+
2. Click **New Integration**
72+
3. Configure:
73+
- Name: "Finance Dashboard Integration" (or similar)
74+
- The workspace where you saved the finance dashboard from the **Associated workspace** dropdown
75+
- Click **Save**
76+
77+
#### 2.2 Configure Integration Settings
78+
79+
1. Go to **Access** tab
80+
2. Press the **Select pages** button
81+
3. Search for the "Finance Dashboard" page you copied into your workspace. Select that page
82+
4. Press **Update access** to give the integration permission to edit the finance dashboard Notion page
83+
84+
#### 2.3 Get Integration Secret
85+
86+
1. Go back to the **Configuration** tab
87+
2. Click **Show** next to Internal Integration Secret
88+
3. Copy the secret key
89+
90+
#### 2.4 Configure Gadget Environment Variables
91+
92+
1. In Gadget, go to **Settings** → **Environment Variables**
93+
2. Add the Notion API key:
94+
95+
Find **NOTION_API_KEY**:
96+
97+
- Paste your integration secret
98+
- Save
99+
100+
#### 2.4 Get database ID
101+
102+
- Scroll to the bottom of the finance dashboard and find the **Total Orders** database:
103+
- Press the "Open as full page" button beside the blue "New" icon. This opens the database as a new page.
104+
- In the URL, copy the ID between the last `/` and the `?`
105+
- Example: `notion.so/workspace/[DATABASE_ID]?v=...`
106+
- In Gadget, go to **Settings** → **Environment Variables**
107+
- Find **NOTION_DB_ID** and paste the ID
108+
- Save
109+
110+
### Part 3: Testing the Integration
111+
112+
#### 3.1 Create a Test Order
113+
114+
1. In Shopify admin, go to **Orders**
115+
2. Click **Create Order**
116+
3. Add products to the order
117+
4. Select **Mark as paid** (avoids needing credit card info)
118+
5. Create the order
119+
120+
#### 3.2 Verify Data Flow
121+
122+
1. **Check Gadget Database**:
123+
124+
- Go to `api` → `models` → `shopifyOrder` → `data`
125+
- Verify your new order appears
126+
127+
2. **Check Notion Dashboard**:
128+
- Open your finance dashboard
129+
- Verify new entries appear:
130+
- New bar in the chart showing sales amount
131+
- COGS calculated based on product costs
132+
- Margin automatically computed
133+
- Check the database table for three new entries (Sales, COGS, Margin)
134+
135+
## Troubleshooting
136+
137+
### Orders Not Appearing in Notion
138+
139+
- Verify Shopify-Gadget sync is active
140+
- Check environment variables are correctly set
141+
142+
### Missing Cost Data
143+
144+
- Confirm product costs are set in Shopify
145+
- Re-sync data in Gadget after updating costs
146+
- Check Inventory Item data in Gadget models
147+
148+
### Database ID Issues
149+
150+
- Ensure you're copying the ID from a full-page database view
151+
- The ID is between the last `/` and the `?` in the URL
152+
- Don't include any surrounding characters
153+
154+
## Architecture Notes
155+
156+
- **Frontend**: Located at `_index.tsx` (React-based, customizable)
157+
- **Backend**: Gadget handles webhook events from Shopify automatically
158+
- **Data Flow**: Order creation triggers automatic Notion update via Gadget's backend
159+
160+
## Resources
161+
162+
- [Finance Dashboard Template](https://steampunk-education.notion.site/Finance-Dashboard-249719c13e368029a77be68a7b824e35)
163+
- [Notion Charts Documentation](https://www.notion.com/help/charts)
164+
- [Gadget Documentation](https://docs.gadget.dev/)
165+
166+
Happy building!

‎shopify/finance-dashboard-app-private-remix-ssr/.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.gadget/
2+
node_modules/
3+
**/.DS_Store
4+
.react-router/
5+
6+
# Shopify
7+
extensions/**/dist
8+
extensions/**/node_modules
9+
extensions/**/generated
10+
shopify.app.*.toml
11+
.env.*

‎shopify/finance-dashboard-app-private-remix-ssr/.template/config.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"version": "v1",
3+
"webflow": {
4+
"title": "Shopify to Notion Connection",
5+
"description": "A Notion page that visualizes sales data from Shopify. Whenever a new order is created in Shopify, Gadget finds the revenue generated by the order, and updates the Notion page.",
6+
"content": "docs/introduction.md",
7+
"mainImage": "webflow/shopify-notion-connection.png",
8+
"features": {
9+
"shopify": true,
10+
"models": true,
11+
"actions": true
12+
}
13+
},
14+
"featuredModels": {
15+
"shopifyOrder": {
16+
"description": "Shopify order. When an order record is created, the template shares the sales data with Notion.",
17+
"featuredFields": [
18+
"id",
19+
"totalPrice"
20+
]
21+
},
22+
"shopifyOrderLineItem": {
23+
"description": "The order line item belongs to an order. Each item has a price and quantity. These attributes are used to calculate the total sales from the order.",
24+
"featuredFields": [
25+
"price",
26+
"quantity",
27+
"name",
28+
"variant"
29+
]
30+
},
31+
"shopifyProductVariant": {
32+
"description": "Represents a Shopify product variant. Each product variant has one inventory item.",
33+
"featuredFields": [
34+
"title",
35+
"inventoryItem"
36+
]
37+
},
38+
"shopifyInventoryItem": {
39+
"description": "The inventory item is used to calculate the cost of goods sold for each order. Inventory items have an optional cost field. The cost of each inventory item in an order is summed to find the total COGS.",
40+
"featuredFields": [
41+
"cost"
42+
]
43+
}
44+
},
45+
"featuredActions": {
46+
"shopifyOrder": {
47+
"create": {
48+
"description": "All the business logic for this application is in this file. When a new order is created, it finds the total sales and COGS, and sends that data to Notion via their API.",
49+
"tags": [
50+
"edited"
51+
]
52+
}
53+
}
54+
}
55+
}

‎shopify/finance-dashboard-app-private-remix-ssr/.template/webflow/content.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
- Visualize Shopify sales data in Notion using the [charts block](https://www.notion.com/help/charts).
2+
- _Tenancy enforced:_ App data will be unique to the store it is installed on.
3+
- _Ready-to-Use:_ No need to start from scratch – equipped with a Shopify connection, a Notion connection, data models, and backend logic.
4+

‎shopify/finance-dashboard-app-private-remix-ssr/.template/webflow/notion.png

60.9 KB
Loading

0 commit comments

Comments
 (0)