Shopify Embedded App
Access the full Commerce Index experience directly inside your Shopify Admin — no tab-switching required. The embedded app runs as an iframe within Shopify, authenticated via session tokens.
What is the Embedded App?
The Commerce Index Shopify Embedded App runs inside the Shopify Admin as an iframe. When merchants install the app from the Shopify App Store, it appears in their Shopify Admin sidebar alongside their other apps. The entire CI dashboard, deal management, agent controls, and health scoring are available without leaving Shopify.
How it works:
- 1.Merchant installs Commerce Index from the Shopify App Store
- 2.Shopify loads CI inside an iframe in the Admin panel
- 3.Shopify App Bridge provides session tokens for authentication
- 4.CI validates the token and renders the full dashboard experience
The embedded app uses Shopify App Bridge to communicate with the host Shopify Admin. This enables native navigation, toast notifications, and modal dialogs that feel like part of Shopify itself.
Session Token Authentication
Instead of cookies or OAuth redirects, the embedded app uses Shopify session tokens. These are short-lived JWTs provided by Shopify App Bridge, signed with your app's secret key. CI validates every request using HMAC verification.
// Frontend: Get session token from Shopify App Bridge
import { getSessionToken } from "@shopify/app-bridge-utils";
const token = await getSessionToken(app);
// Send authenticated request to CI backend
const response = await fetch("/api/ci/dashboard", {
headers: {
"Authorization": `Bearer ${token}`,
"Content-Type": "application/json"
}
});# Backend: Validate session token via HMAC
import hmac
import hashlib
import base64
import json
def verify_shopify_session_token(token, api_secret):
"""Validate Shopify session token using HMAC-SHA256."""
parts = token.split(".")
if len(parts) != 3:
raise ValueError("Invalid token format")
header_payload = f"{parts[0]}.{parts[1]}"
signature = parts[2]
expected_sig = base64.urlsafe_b64encode(
hmac.new(
api_secret.encode(),
header_payload.encode(),
hashlib.sha256
).digest()
).rstrip(b"=").decode()
if not hmac.compare_digest(signature, expected_sig):
raise ValueError("Invalid token signature")
payload = json.loads(base64.urlsafe_b64decode(parts[1] + "=="))
return payload # Contains shop, sub, exp, etc.Token payload includes: shop domain, user ID (sub), issuer (iss), destination, audience (aud), expiration (exp), issued-at (iat), and a unique session ID (sid). Tokens expire after 1 minute and are automatically refreshed by App Bridge.
Navigation Inside Shopify
The embedded app provides full navigation to all CI features directly within the Shopify Admin. Use the sidebar nav or top-level tabs to move between sections.
Overview of your store health, recent activity, revenue metrics, and agent performance at a glance. The default landing page when opening the app.
Create, manage, and monitor pricing deals. View active promotions, margin analysis, and deal performance metrics synced with your Shopify products.
Enable and configure AI agents. Monitor agent decisions, adjust trust tiers, and review the approval queue — all without leaving Shopify.
Real-time CI Health Score tracking. View component breakdowns, trend charts, and actionable recommendations to improve your store operations.
Features Available in the Embedded App
Product Sync
Automatic two-way synchronization with your Shopify product catalog. Products, variants, prices, and inventory levels are kept in sync via webhooks. Initial full sync runs on first connection, then webhook-driven updates keep everything current.
Deal Management
Create and manage pricing deals tied to your Shopify products. Set deal parameters, track performance metrics, and let agents optimize pricing within your defined guardrails. Changes sync back to Shopify discount codes automatically.
Agent Control
Enable, disable, and configure AI agents from within the embedded app. Review agent decisions in the approval queue, adjust trust tiers, set confidence thresholds, and toggle between approval modes (auto, manual, hybrid).
Health Monitoring
View your CI Health Score, component breakdowns (fulfillment, communication, consistency, policy adherence), and trend analysis. Get actionable recommendations to improve your score and set up alerts for significant score changes.
GDPR Compliance
Shopify requires all apps to implement mandatory GDPR webhooks. Commerce Index handles all three compliance endpoints automatically. These webhooks are registered during app installation and processed asynchronously.
customers/redact
Fired when a merchant requests deletion of a customer's data, or 6 months after a customer requests their data be deleted from a store. CI purges all associated customer data from its systems.
POST /api/webhooks/shopify/customers-redact
Content-Type: application/json
X-Shopify-Hmac-SHA256: <hmac>
{
"shop_id": 12345,
"shop_domain": "mystore.myshopify.com",
"customer": {
"id": 67890,
"email": "customer@example.com",
"phone": "+1234567890"
},
"orders_to_redact": [12345, 67890]
}shop/redact
Fired 48 hours after a merchant uninstalls the app. CI deletes all shop data, configuration, agent history, and synced products associated with the store.
POST /api/webhooks/shopify/shop-redact
Content-Type: application/json
X-Shopify-Hmac-SHA256: <hmac>
{
"shop_id": 12345,
"shop_domain": "mystore.myshopify.com"
}customers/data_request
Fired when a customer requests their data from a store. CI compiles all stored data for the customer and makes it available for the merchant to provide.
POST /api/webhooks/shopify/customers-data-request
Content-Type: application/json
X-Shopify-Hmac-SHA256: <hmac>
{
"shop_id": 12345,
"shop_domain": "mystore.myshopify.com",
"customer": {
"id": 67890,
"email": "customer@example.com",
"phone": "+1234567890"
},
"orders_requested": [12345, 67890]
}All GDPR webhooks are verified via HMAC-SHA256 before processing. Unverified requests are rejected with a 401 status. Redaction jobs run asynchronously and are confirmed within 24 hours.