diff --git a/docs/integrations/commerce/shopify/commerce-shopify-custom-apps.md b/docs/integrations/commerce/shopify/commerce-shopify-custom-apps.md index b8b0cc59b..c8a1cb80a 100644 --- a/docs/integrations/commerce/shopify/commerce-shopify-custom-apps.md +++ b/docs/integrations/commerce/shopify/commerce-shopify-custom-apps.md @@ -16,36 +16,61 @@ _Shopify store connection UI_ ![An image of the Shopify store connection UI](/img/integrations/commerce/shopify/7a2c893-shopify-code-connect-your-shopify-store-custom-apps.png) -The merchant is asked to create and install a custom app in their Shopify admin account and get its API access token. +The merchant is asked to create and install a custom app in their Shopify admin account and provide the store name, client ID, and client secret from the app. -The UI contains a link to the Custom apps page in the Shopify Help Center. The merchant needs to complete the following tasks in the Help article: +The UI includes a **Find your Shopify credentials** section that guides the merchant through the process. For more detail, see the Shopify docs on Custom apps (**Create a custom app** and **Install a custom app**) and Select a distribution method. The merchant needs to complete the following steps. -1. Enable custom app development from the Shopify admin +### Create and configure the custom app -2. Create and install a custom app +1. From your Shopify admin, go to **Settings** > **Apps**. -3. Create the app +2. Click **Develop apps**. -4. Select API scopes +3. Click **Build apps in Dev Dashboard**. - The merchant must assign the following API scopes to their custom app: +4. From your Dev Dashboard, click **Create app**. - ``` - read_customers, read_inventory, read_orders, read_products, read_shopify_payments_disputes, - read_shopify_payments_payouts - ``` +5. In the **Start from Dev Dashboard** section, name your app, and then click **Create**. -5. Install the app and get the API access tokens +6. Create a version for your app: + - **App URL**: `https://shopify.dev/apps/default-app-home` + - Uncheck **Embed app in Shopify admin** + - In the **Access** section, enter these app scopes: + ``` + read_customers, read_inventory, read_orders, read_products, + read_shopify_payments_payouts, read_shopify_payments_disputes + ``` + - Click **Release** + - (Optional) Enter a version name and a version message + - Click **Release** + +### Select Custom distribution and install the app + +7. Go to **App Home** > **Distribution** and click **Select distribution method**. + +8. Choose **Custom distribution** and click **Select**. + +9. In **Store domain**, paste your store domain and click **Generate link**. + +10. Copy the generated link and open it in your browser. + +11. Choose your store and click **Install**. + +### Get the client ID and secret + +12. Go back to the app and go to **Settings** > **Credentials** to find your client ID and secret. + +### Complete the connection in Codat Link Next, the merchant needs to: -1. Enter their store name in the **Shopify store name** field in the store connection UI. +1. Enter their store name in the **Shopify store name** field (the part before `.myshopify.com`—for example, `my-store-name`). -2. In Shopify, copy the **Admin API access token** for the custom app that they created. +2. Enter the **Shopify client ID** from the app’s **Settings** > **Credentials**. -3. Enter the token in the **Shopify access token** field in the store connection UI. +3. Enter the **Shopify client secret** from the app’s **Settings** > **Credentials**. -4. Click **Continue** to submit the store name and access token to Codat. +4. Click **Continue** to submit the store name, client ID, and client secret to Codat. The Link success screen is displayed if the custom app was connected successfully. @@ -66,7 +91,7 @@ Merchants must have the following permissions to connect their Shopify store and - The **Develop apps** permission. -- Any staff permissions which are required by the required API scopes (see step four in the merchant connection flow above). +- Any staff permissions required by the access scopes listed in **Create and configure the custom app**. ## Configure the Shopify integration for use with custom apps diff --git a/static/img/integrations/commerce/shopify/7a2c893-shopify-code-connect-your-shopify-store-custom-apps.png b/static/img/integrations/commerce/shopify/7a2c893-shopify-code-connect-your-shopify-store-custom-apps.png index c6fb86db1..5c8303a9a 100644 --- a/static/img/integrations/commerce/shopify/7a2c893-shopify-code-connect-your-shopify-store-custom-apps.png +++ b/static/img/integrations/commerce/shopify/7a2c893-shopify-code-connect-your-shopify-store-custom-apps.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eca77743dd2311ccafe734aeaf07cd575375b6df3442b36982a1faf117730887 -size 76088 +oid sha256:3753fc5311f4e07ec13eb047845437c9701a1cde9c2356fb3fab038423d0d9d0 +size 123742