Merge pull request #1399 from ndeet/shopify-steps

Shopify docs cleanup

docs/Shopify.md

@@ -25,7 +25,7 @@ Our integration with Shopify allows you connect your self-hosted BTCPay Server w
 Before diving into the setup process, ensure you have the following:
 
 - Shopify account
-- BTCPay Server] - [self-hosted](Deployment.md) or run by a [third-party host](/Deployment/ThirdPartyHosting.md) v1.4.8 or later.
+- BTCPay Server - [self-hosted](Deployment.md) or run by a [third-party host](/Deployment/ThirdPartyHosting.md) v1.4.8 or later.
 - [Created BTCPay Server store](CreateStore.md) with [wallet set up](WalletSetup.md)
 
 [![BTCPay Server - Shopify Video](https://img.youtube.com/vi/jJjAyvgWVfk/mqdefault.jpg)](https://www.youtube.com/watch?v=jJjAyvgWVfk)
@@ -36,26 +36,29 @@ Shopify might give false flags on deprecated API calls. The most likely answer w
 
 ## Setting up BTCPay Server with Shopify
 
-1. In Shopify, click on Apps in the leftbar 
-2. On the modal popped up, select "App and sales channel settings"
-1. From the page displayed,  click on `Develop apps for your store` button.
-2. If prompted, click on `Allow custom app development`
-3. `Create an app` and name it
-4. On the app page, in `Overview` tab, click on the `Configure Admin API scopes`
-5. In the filter admin access scopes type in `Orders`
-6. In `Orders` enable `read_orders` and `write_orders` and then click `Save`
-7. Click on the `Install App` in the top right corner and when pop-up window appears click `Install`
-8. Reveal `Admin API access token` and `copy` it.
-9. In your BTCPay Server, go to `Store > Settings > Integrations > Shopify`. and click `Setup` button.
-10. In second field, `API Secret Key` the paste the `Admin API access token`
-11. In the first field, `API key` paste the `API key` from Shopify.
-12. In Shopify's `Store Settings > Checkout > Order status page > Additional Scripts` paste the script provided by BTCPay Server on Shopify Integration page (including the opening and closing tag `</script>`.
-13. In Shopify's `Store Settings > Payments > Manual payment methods` add `manual payment method` then click `create custom payment method`
-14. In `Custom payment method name` fill in `Bitcoin with BTCPay Server`, optionally you can fill in other fields, but it's not required. Note that the name should exactly `Bitcoin with BTCPay Server`
-15. Hit `Activate` and you've set up Shopify and BTCPay Server successfully.
+1. In Shopify, click on `Apps >` in the left sidebar
+2. On the modal popped up, click on `App and sales channel settings`
+3. From the page displayed, click on `Develop apps` button
+4. If prompted, click on `Allow custom app development`
+5. `Create an app` and name it, e.g. BTCPay Server
+6. On the app page, in `Overview` tab, click on the `Configure Admin API scopes`
+7. In the filter admin access scopes type in `Orders`
+8. In `Orders` enable `read_orders` and `write_orders` and then click `Save`
+9. Click on the `Install App` in the top right corner and when pop-up window appears click `Install`
+10. Reveal `Admin API access token` and `copy` it
+11. In your BTCPay Server, go to your store and on the left sidebar click on `Shopify`
+12. In the first field, `Shop name` enter the subdomain of your Shopify store e.g. SOME_ID.myshopify.com then enter SOME_ID
+13. In third field, `Admin API access token` paste the `Admin API access token` you just copied from Shopify
+14. In the second field, `API key` paste the `API key` from Shopify - which you can find at the bottom of the same page where you copied the Admin API access token
+15. Click `Save` on BTCPay Shopify settings page
+16. Back on Shopify: On left menu select `Checkout` scroll down to "Order status page" and paste the HTML `<script>` code you see in BTCPay Shopify settings into the "Additional scripts" text field.
+17. Click `Save` and scroll back up to the top
+18. Now click on `Payments` in the left sidebar, scroll down to "Manual payment methods", click on `(+) Manual payment method` and select `Create custom payment method` on the dropdown.
+19. In `Custom payment method name` fill in `Bitcoin with BTCPay Server`, optionally you can fill in other fields, but it's not required.
+20. Hit `Activate` and you've set up Shopify and BTCPay Server successfully.
 
 :::tip
-Custom Payment method name **must** contain at least one of the following words: `bitcoin`, `btcpayserver`, `btcpay server` or `btc` to work.
+"Custom Payment method name" **must** contain at least one of the following words (case-insensitive): `bitcoin`, `btcpayserver`, `btcpay server` or `btc` to work.
 :::
 
 Below are step by step visuals describing the process outlined above.
@@ -80,14 +83,18 @@ Below are step by step visuals describing the process outlined above.
 
 ![BTCPay Server shopify step 10](./img/shopify/btcpayshopify10.png)
 
-![BTCPay Server shopify step 11](./img/Shopify/btcpayshopify11.jpg)
+![BTCPay Server shopify step 11](./img/shopify/btcpayshopify11.png)
 
-![BTCPay Server shopify step 12](./img/Shopify/btcpayshopify12.jpg)
+![BTCPay Server shopify step 12](./img/shopify/btcpayshopify12.png)
 
 ![BTCPay Server shopify step 13](./img/shopify/btcpayshopify13.png)
 
 ![BTCPay Server shopify step 14](./img/shopify/btcpayshopify14.png)
 
+![BTCPay Server shopify step 14-2](./img/shopify/btcpayshopify14-2.png)
+
+Demo Checkout flow after everything is set up:
+
 ![BTCPay Server shopify step 15](./img/shopify/btcpayshopify15.png)
 
 ![BTCPay Server shopify step 16](./img/shopify/btcpayshopify16.png)