diff --git a/self-hosted/configuration/features/integrations/shopify-integration-setup.mdx b/self-hosted/configuration/features/integrations/shopify-integration-setup.mdx index cdca685f..23b4fe36 100644 --- a/self-hosted/configuration/features/integrations/shopify-integration-setup.mdx +++ b/self-hosted/configuration/features/integrations/shopify-integration-setup.mdx @@ -4,34 +4,88 @@ description: Configure Shopify integration to track orders and customer informat sidebarTitle: Shopify --- -Setting up Chatwoot Shopify integration involves 5 steps. +Setting up Chatwoot Shopify integration involves the following steps. -1. Create a Shopify app in the [shopify partner dashboard](https://partners.shopify.com/). -2. Add necessary details and save the app. -3. Configure Chatwoot with the `Client ID` and `Client secret` obtained from the Shopify app. -4. Open Chatwoot UI, navigate to integrations, select Shopify, and click connect. -5. Voila! You should now be able to use Shopify in your Chatwoot account. +1. Create a Shopify app in the [Shopify Partner Dashboard](https://partners.shopify.com/). +2. Obtain the `Client ID` and `Client Secret`. +3. Request protected customer data access. +4. Create a new app version and configure scopes and redirect URL. +5. Configure Chatwoot with the credentials. +6. Connect the integration from the Chatwoot UI. -## Register and configure the Shopify app +## Step 1: Create a Shopify app -To use Shopify Integration, you need to create a Shopify app in the [shopify partner dashboard](https://partners.shopify.com/). You can find more details about creating Shopify apps at the [Shopify developer portal](https://shopify.dev/docs/apps/build). +Go to the [Shopify Partner Dashboard](https://partners.shopify.com/) and navigate to **Apps**. Click **Create app** and select **Start from Dev Dashboard**. Enter a name for your app (e.g., `Chatwoot`) and click **Create**. -1. Create a Shopify app. +![Create Shopify App](/self-hosted/images/shopify/create-app.png) -![shopify_app_create](/self-hosted/images/shopify/create-app.png) +## Step 2: Obtain the Client ID and Client Secret -2. Obtain the `Client ID` and `Client Secret` for the app and configure it in your app config via `{Chatwoot installation url}/super_admin/app_config?config=shopify` +After creating the app, go to **Settings** in the left sidebar. Under the **Credentials** section, you will find the `Client ID` and `Client Secret`. Copy these values — you will need them later. -![shopify_app_domain](/self-hosted/images/shopify/configure-app.png) +![App Settings](/self-hosted/images/shopify/app-settings.png) -3. Configure the redirect URL as `{Chatwoot installation url}/shopify/callback` in app configuration. +## Step 3: Request protected customer data access -![shopify_app_redirect](/self-hosted/images/shopify/callback.png) +Shopify requires apps to be approved for protected customer data access before they can use customer and order scopes. Without this, API calls will fail with a "merchant approval" error. + +1. In the app sidebar, go to the **Protected customer data access** page. You can find this under the "Request access" link on the app version page. +2. Under **Step 1: Select your data use and reasons**, click **Select** next to **Protected customer data** and choose **Customer service** as the reason. +3. Expand **Protected customer fields (optional)** and select the fields your app needs: **Email**, **Phone**, and **Name**. +4. Under **Step 2: Provide your data protection details**, click **Provide details** and answer **Yes** to all the data protection questions across the Purpose, Consent, Storage, and Access sections. +5. Click **Save**. + + +For apps installed on development stores, you can access protected customer data immediately after selecting your data use in Step 1 — no review is required. For production apps distributed via the App Store, Shopify will review your request. + + +## Step 4: Create a new app version + +Go to **Versions** in the left sidebar and click **New version** to create a new app version with the required configuration. + +![App Version Configuration](/self-hosted/images/shopify/app-version.png) + +Configure the following: + +**Access Scopes** — Click **Select scopes** and add the following scopes:Only select scopes from Admin API) + +``` +read_customers, read_orders, read_fulfillments +``` + +**Redirect URLs** — Add your Chatwoot callback URL: + +``` +{Your Chatwoot URL}/shopify/callback +``` + +For example: `https://app.chatwoot.com/shopify/callback` + +**URLs** — Set the **App URL** to your Chatwoot installation URL (e.g., `https://app.chatwoot.com`). Uncheck **Embed app in Shopify admin**. + +Click **Release** to save and activate the version. + +## Step 5: Configure Chatwoot + +Navigate to `{Your Chatwoot URL}/super_admin/app_config?config=shopify` and enter the `Client ID` and `Client Secret` you copied in Step 2. + +![Configure Chatwoot](/self-hosted/images/shopify/configure-app.png) Shopify will only show up in the integrations section once you have configured these values. -## Connect Chatwoot with your Shopify account +## Step 6: Connect the integration + +1. In Chatwoot, go to **Settings** → **Integrations** → **Shopify** and click **Connect**. +2. Enter your Shopify store URL (e.g., `my-store.myshopify.com`). +3. You will be redirected to Shopify to authorize the app. The consent screen should show access to **View personal data** (Customers) and **View store data** (Orders and Customers). + +![Install App](/self-hosted/images/shopify/api-access.png) + +4. Click **Install** to authorize. +5. You will be redirected back to Chatwoot. The integration is now active. + +Once connected, agents will see Shopify order information in the conversation sidebar for contacts whose email or phone number matches a Shopify customer. -Follow this [guide](https://chatwoot.help/hc/user-guide/articles/1742395545-how-to-track-orders-with-shopify-integration) to complete the Shopify integration. \ No newline at end of file +Follow this [guide](https://chatwoot.help/hc/user-guide/articles/1742395545-how-to-track-orders-with-shopify-integration) for more details on using the integration. diff --git a/self-hosted/images/shopify/api-access.png b/self-hosted/images/shopify/api-access.png new file mode 100644 index 00000000..1ed25cca Binary files /dev/null and b/self-hosted/images/shopify/api-access.png differ diff --git a/self-hosted/images/shopify/app-settings.png b/self-hosted/images/shopify/app-settings.png new file mode 100644 index 00000000..3e83e15d Binary files /dev/null and b/self-hosted/images/shopify/app-settings.png differ diff --git a/self-hosted/images/shopify/app-version.png b/self-hosted/images/shopify/app-version.png new file mode 100644 index 00000000..7f937663 Binary files /dev/null and b/self-hosted/images/shopify/app-version.png differ diff --git a/self-hosted/images/shopify/callback.png b/self-hosted/images/shopify/callback.png deleted file mode 100644 index cd54afdc..00000000 Binary files a/self-hosted/images/shopify/callback.png and /dev/null differ diff --git a/self-hosted/images/shopify/create-app.png b/self-hosted/images/shopify/create-app.png index 8e52812b..d6ab41ce 100644 Binary files a/self-hosted/images/shopify/create-app.png and b/self-hosted/images/shopify/create-app.png differ