--- title: Integrating with Shopify slug: shopify docTags: createdAt: 2020-08-25T11:38:10.000Z --- Pathfix allows you to easily add end-user OAuth based integration, handling authorization and enable communication between your app and Box in just a few minutes. Before proceeding, you will first need to register your application with Box. Please refer the developer documentation provided by Box. ## Add your App in Shopify Shopify allows for apps to be installed in 2 ways: 1. From your app interface (e.g. an Integration page in your app) 2. Via their Marketplace Please follow the below instructions for the installation method of your choice. ### Create Shopify developer app - Log in to your Shopify developer account ([https://partners.shopify.com/](https://partners.shopify.com/)) - Click on Apps from the left navigation and click on Create New App - Select **Create app manually** on the right, give it a name and click Create ::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/44Vd4wD7eihIgmZZkRHOu_image.png" size="82" width="2040" height="769" position="center" showCaption="false"} - From the next screen, copy the Client ID and Client Secret for use in your Pathfix configuration ::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/tsib27lgT9SknZ_j3N0Ct_image.png" size="86" width="2160" height="912" position="center" showCaption="false"} ## Setup in Pathfix We need to complete the setup in Pathfix and come back to Shopify to complete the configuration. - Log in to your Pathfix account, select the Application and click on Shopify - Add the copied Client ID and Client Secret in the configuration, modify the Scopes as per your requirement and hit Save ::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/q_FsVkOX4wvtyuQ1wUeSf_image.png" size="86" width="1242" height="1015" position="center" showCaption="false"} - Click on the **Keys **section on the left navigation bar and copy your **Pathfix Public Key** for use in the Shopify developer portal ::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/7JRTBjY8Z52rPemPBnqqX_image.png" size="86" width="1845" height="700" position="center" showCaption="false"} ## Configure Shopify App We now need to complete the configuration in Shopify developer, navigate back to Shopify developer. For illustration purposes, lets assume the following values as examples through this setup (**please replace with values accordingly at your end**) | **Fields** | **Sample Values** | | -------------------- | ------------------------------------ | | Pathfix Public Key | 1087AD7D-F7AF-48ED-9691-3209EC3A41FC | | Pathfix Private Key | C7DA8FFF-5AD6-4227-93D3-E2380E29E95Y | | Your App Domain | https\://acme.com | | App Integration Page | https\://acme.com/integration | | User's Shop Name | Betty's Market | - Click on Configuration (under Build) - Under App URL, enter the following as the App URL (replace the Public Key and your App domain): - https\://labs.pathfix.com/integrate/command?pfx\_store=store.shopify.**1087AD7D-F7AF-48ED-9691-3209EC3A41FC**.pre\&consented\_redirect=**https\://acme.com** - Under Allowed redirect URL, enter the Pathfix redirect URL ::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/ntkIKZXeuxwwe2giI9N_p_image.png" size="86" width="1510" height="1026" position="center" showCaption="false"} - Save the changes, your setup is complete ## Shopify Auth Flows :::hint{type="info"} When installing from Shopify marketplace, the Shop is pre-selected and a change in the App URL is needed. There are a few changes in the flow that needs to be considered when installing from the Shopify marketplace. Please follow the steps as shown exactly to avoid errors ::: ### Flow 1 (from your app interface) For purpose of this flow, we will assume your app database looks something like this (notice the **ID **value and the **PATHFIX\_SHOPIFY\_USER\_ID**, they are the same): ![](https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/7X83dCkxbcXsOZlP8rdMV_image.png) The Authorization/Auth process is initiated from your app via a **Connect **button placed on your Integration page. The setup for this is standard, please follow the documentation for: 1. [End-user authorization](docId\:MsCMNgUGRsGrzSCMLCiXf) 2. [Enable pass-through API](docId\:JiDAxEPNR2Owz8w4_JpBK) ### Flow 2 (Via the Shopify Marketplace) When the Auth process is initiated from the Shopify Marketplace, the setup is different as you do not need to put a Connect button in your app. - Once you have published your app to the Marketplace, Shopify will ask your user to select a Shop to install the app into - After the user selects the Shop they wish to install it to, Shopify will redirect the user to the URL specified in the App URL, that is configured above, with some additional encrypted information - Pathfix has all the information to complete the authorization but there is no information regarding the **user\_id** of **acme.com** that initiated the request. This is a key difference from the previous process. - Pathfix completes the authorization and assigns a user\_id itself when redirecting to https\://acme.com. - Post authorization, the URL looks something like this: https\://acme.com?pathfix\_user\_id=**shopify\_cfcc1817-c53f-66ef-a090-c31ec0ef22e5** - Pathfix assigns a **temporary user\_id** for the auth'd user as shown/highlighted in the url above as **pathfix\_user\_id** - Your app has to store the **pathfix\_user\_id** against the user that subsequently logs in. e.g. image below ![](https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/uGzW_uEqjphY_4cBJKAk2_image.png) - Note now that the values for **ID **and the **PATHFIX\_SHOPIFY\_USER\_ID** are different, this is how you will need to save the value returned from the querystring ### Making API Calls - You can now make API calls for the connected user as shown in the [Enable pass-through API](docId\:JiDAxEPNR2Owz8w4_JpBK) documentation - Instead of using the ID/Unique ID value, you will need to use the **PATHFIX\_SHOPIFY\_USER\_ID** value instead for the user\_id field To add the integration to your Bubble app, please follow this documentation [Bubble.io Setup](https://docs.pathfix.com/bubble) Need help? Reach out to us at support\@pathfix.com and we would be happy to assist!