This document provides an overview of building apps with Shopify's API including: - The REST API uses standard HTTP verbs like GET, POST, PUT, DELETE to manage resources like products, orders, and transactions. - Authentication can be done with basic authentication or OAuth which requires redirecting the merchant to grant access and getting an access token. - Webhooks allow Shopify to notify an app when events happen like new orders so the app doesn't need to poll for updates. - Embedded App SDK allows rendering an app seamlessly within the Shopify admin and POS. - Script tags can be used to add JavaScript to the online storefront. - Application proxies allow rendering Shopify pages on an external server

1. DevelopingeCommerce
appswithShopify'sAPI

2. Buildingnative
features

3. Integratingwith
third-partyservices

5. TheRESTAPI

6. Rest?
· Popular style of APIs, centered around resources
and standardized HTTP verbs
· POST to create a resource
· GET to fetch resource(s)
· PUT to update a resource
· DELETE to destroy a resource

7. Shopify'sRESTAPI
· Resources include products, variants, orders,
transactions
GET /admin/orders/324262/transactions.json HTTP/1.1
Host: appsrule.myshopify.com
X-Shopify-Access-Token: 085abas8fd90325c3f81s8e9c88befc0

8. PUT /admin/products/2329148.json HTTP/1.1
Host: appsrule.myshopify.com
X-Shopify-Access-Token: 085abas8bd903f5c3f81s8e9c88befc0
Content-Type: application/json
{
"product": {
"title":"new title"
}
}

9. Authentication

10. BasicAuthentication
(a.k.a. private apps)
https://key:pass@josh.myshopify.com
/admin/shop.json

11. OAuth

12. Stepone:redirectthemerchanttograntscreen
https://shopname.myshopify.com
/admin/oauth/authorize?
client_id=e6635b3d5fc94a773e0e9cb7&
scope=write_products,write_orders&
redirect_uri=https://app.com/auth

14. Stepthree
Make sure the request is valid and came from
Shopify
https://docs.shopify.com/api/guides/
authentication/oauth

15. Stepfour:gettheaccesstoken
POST /admin/oauth/access_token HTTP/1.1
Host: appsrule.myshopify.com
Content-Type: application/json
{
"client_id": "e6635b3d5fc94a773e0eser7868e5e16",
"client_secret": "511113c28ae9ca5336a62943ebabb4bb",
"code": "d3edae0c6969eed68bsfe5ad6319cb21"
}

16. Statuscodes

17. 200
OK

18. 201
Created

19. 422
UnprocessableEntity

20. 400
BadRequest

21. 500
InternalServerError

22. 429
TooManyRequests

23. Throttling?

25. Buildingshipping
integrations

26. Whatdowewanttoaccomplishwithashipping
integration?
· Receive fulfillment data from the store
· Present the best shipping options at checkout
· Help customers follow their order

27. Providingcustomratesat
checkout

29. CarrierServiceAPI/admin/carrier_services.json

30. 1. App tells Shopify that it wants to provide rates
2. Customer goes to checkout
3. Shopify tells the app the cart and destination
4. App responds with a set of shipping rates

31. POST /admin/carrier_services.json
{
"carrier_service": {
"name": "Cool shipping",
"callback_url": "http://requestb.in/qvseawqv",
"format": "json",
"service_discovery": true
}
}

36. Receivingfulfillment
data

37. FulfillmentServiceAPI
https://docs.shopify.com/api/reference/
fulfillmentservice

38. 1. App tells Shopify that it wants to fulfill orders
POST /admin/
fulfillment_services.json
{
"fulfillment_service": {
"name": "Speedy Josh's Fulfillment",
"callback_url": "https://shipper.ca/",
"inventory_management": true,
"tracking_support": true,
"requires_shipping_method": true,
"format": "json"
}
}

39. 2. Merchant sets some or all SKUs to use your
fulfillment service

40. 3. Shopify asks the app for inventory levels and
tracking numbers
https://shipper.ca/
fetch_stock.json?
sku=123&shop=testshop.myshopify.com
https://shipper.ca/
fetch_tracking_numbers.json?
order_ids[]=#1001&order_ids[]=#1002
&order_ids[]=#1003

41. Helpingcustomersfollow
theirorder

42. FulfillmentEventsAPI

43. Webhooks

44. Don'tcallus,we'llcallyou
· Let Shopify notify your server when an event
takes place in your client's store
· Useful for all types of integrations
· Subscribe programmatically using the /admin/
webhooks.json endpoint or the admin

45. Let'stryitoutwithRequestBin

46. IntheShopifyadmin
· Settings → Notifications →
Webhooks

48. Morethan30webhooktopics
· ! New orders and changes to the order
· " Fulfillments created and updated
· # Refunds to customers
· $ New, changed or deleted products
https://docs.shopify.com/api/reference/webhook

49. Receivingawebhook
1. Make sure that the request came from Shopify

51. function verify_webhook($data, $hmac_header)
{
$hmac = hash_hmac('sha256', $data, APP_SECRET, true);
return ($hmac_header === base64_encode($hmac));
}
$hmac_header = $_SERVER['HTTP_X_SHOPIFY_HMAC_SHA256'];
$data = file_get_contents('php://input');
$verified = verify_webhook($data, $hmac_header);

52. Steptwo
Pass the webhook to a queue

53. Stepthree
Respond with 200 ! status code

54. Whatifthewebhookreceiveris
down?
! 19 times over 48 hours

55. EmbeddedAppSDK

56. Renderyourappseamlessly
withintheShopifywebadmin

57. ...orinShopifyPOSforiPad

58. InitializingtheEASDK
<head>
<script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
<script type="text/javascript">
ShopifyApp.init({
apiKey: 'YOUR_APP_API_KEY',
shopOrigin: 'https://CURRENT_LOGGED_IN_SHOP.myshopify.com'
});
</script>
...
</head>

59. <script type="text/javascript">
ShopifyApp.ready(function(){
ShopifyApp.Bar.initialize({
icon: 'https://ourapp.shopifyapps.com/app-icon.png',
title: 'Marketplaceify',
buttons: {
primary: {
label: 'Save',
message: 'save'
}
}
});
});
</script>

60. Usingmodals
ShopifyApp.Modal.open({
src: '/first_modal',
title: 'Example modal',
height: 400,
width: 'large',
buttons: {
primary: {
label: "OK"
},
secondary: {
{
label: "Destroy",
style: 'danger'
}
}
},
};

61. Usingflashnotices&errors
ShopifyApp.flashNotice("Unicorn was created successfully.");
ShopifyApp.flashError("Unicorn could not be created.");

62. Buttonsand
breadcrumbs
ShopifyApp.Bar.initialize({
title: 'The page title',
icon: 'https://example.com/path/to/icon.png',
pagination: {
next: {
href: "/posts?page=2"
},
previous: {
loading: false
}
},
breadcrumb: {
label: "Sub-page",
href: "/subsection",
target: 'app',
loading: false
}
});

63. Applicationlinks

64. Merchants❤JavaScript.
How do apps add it to storefront?

65. A:ScriptTagAPI
/admin/script_tags.json

66. · Scripts can run on storefront or order status
page
· Auto-removed when their app is uninstalled
· Loaded asynchronously in noConflict mode

67. Superpowers—e.g.theabilitytocreate
contentboxesaftercheckout
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>Visit our cool store</h2>',
'<div>...</div>'
)

69. Applicationproxies
Rendering Shopify pages with an external server

70. · Specified directory where Shopify proxies
content to your server (e.g. /apps/store-
locator)
· Render Liquid variables with Content-Type:
application/liquid
· Verifiable using hmac

71. ShopifyScripts
Mutable carts for Plus merchants
https://docs.shopify.com/api/guides/shopify-
scripts

72. Multipass
· Single sign-on for Plus merchants
· Allows you to use third-party authentication for
store customer accounts
https://docs.shopify.com/api/reference/
multipass

73. Q&A