{"id":345874,"date":"2022-08-12T08:57:19","date_gmt":"2022-08-12T08:57:19","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=345874"},"modified":"2023-02-24T06:00:39","modified_gmt":"2023-02-24T06:00:39","slug":"customizing-shopify-checkout-checkout-extension","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/","title":{"rendered":"Customizing Shopify Checkout &#8211; Checkout Extension"},"content":{"rendered":"\n<p>Shopify has launched a much awaited extension &#8211; <strong>Checkout Extension<\/strong> which will help in customizing Shopify checkout flow and reduces the developer restrictions on appending some additional inputs or features on checkout flow.<\/p>\n\n\n\n<p>Customizing Shopify Checkout &#8211; Checkout Extension let app developers build custom functionality that merchants can install at defined points in the checkout flow like capturing or showing a product offer before or after customers completes the order payment.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"index-title wp-block-heading\">Types of Checkout Extensions<\/h3>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Checkout UI Extension<\/strong> : Appending something in between the checkout flow like before or after customer selects a shipping method or puts his contact details.<\/li>\n\n\n\n<li><strong>Post Purchase Checkout Extension<\/strong> : Appending something after customer makes a purchase.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"index-title wp-block-heading\">Checkout Extension Requirements<\/h3>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install latest <a href=\"https:\/\/nodejs.org\/en\/download\/\">Node.js<\/a><\/li>\n\n\n\n<li> Install <a href=\"https:\/\/shopify.dev\/apps\/tools\/cli\">Shopify CLI<\/a><\/li>\n\n\n\n<li>Install <a href=\"https:\/\/classic.yarnpkg.com\/lang\/en\/docs\/install\/#debian-stable\">yarn<\/a> <\/li>\n\n\n\n<li>Enable these <strong>configuration<\/strong> of your Shopify app<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Post Purchase Checkout<\/h2>\n\n\n\n<p>Post-purchase checkout extensions allow merchants&nbsp; to add a  page after the order is confirmed, but before the thank you page.<\/p>\n\n\n\n<p>Here I am explaining the flow through Shopify CLI .<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login into Shopify <strong><a href=\"https:\/\/www.shopify.com\/partners\">partner<\/a><\/strong> account.  <br><code><strong>shopify login <\/strong><\/code><br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\" alt=\"Shopify-login\" class=\"wp-image-347847\" width=\"733\" height=\"160\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png 1102w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login-300x66.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login-250x55.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login-768x168.png 768w\" sizes=\"(max-width: 733px) 100vw, 733px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Shopify partner login<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now choose the app for which you want to create the extension by using the below command:<br><code><strong>shopify extension create<\/strong><\/code><br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/shopify-extension-create-2.png\" alt=\"shopify-extension-create-2\" class=\"wp-image-347849\" width=\"733\" height=\"156\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/shopify-extension-create-2.png 889w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/shopify-extension-create-2-300x64.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/shopify-extension-create-2-250x53.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/shopify-extension-create-2-768x164.png 768w\" sizes=\"(max-width: 733px) 100vw, 733px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Shopify extension create<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After choosing the app, choose the <strong>Post Purchase Extension<\/strong> from the extension list shown and write an appropriate name for your extension. <br><\/li>\n\n\n\n<li>Choose the javascript libraries to create template. I am using <a href=\"https:\/\/webkul.com\/shopify-headless-development\/\">Shopify react<\/a> here.<br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/choosing-template-1.png\" alt=\"choosing-template-1\" class=\"wp-image-347851\" width=\"797\" height=\"321\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/choosing-template-1-300x121.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/choosing-template-1-250x101.png 250w\" sizes=\"(max-width: 797px) 100vw, 797px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Choosing javascript library<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li> A new folder will be created with your extension name, navigate to the new folder and to make the extension feature available for your app,  register and push the extension by using <code><strong>shopify extension register<\/strong><\/code> and <code><strong><a href=\"https:\/\/store.webkul.com\/Shopify.html\">shopify extension<\/a> push<\/strong><\/code> commands.<br><\/li>\n\n\n\n<li>After these commands now you will be able to see the created extension on your app&#8217;s extension section for which you have created the same. Now to check the working status of extension on your store you need to enable and publish the extension.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"585\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners-1200x585.png\" alt=\"Extension-Shopify-Partners\" class=\"wp-image-347753\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners-1200x585.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners-768x374.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Extension-Shopify-Partners.png 1241w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Publishing the post purchase extension<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After publishing the extension , to view the extension functionality on store front enable the <strong><a href=\"https:\/\/shopify.dev\/apps\/checkout\/post-purchase\">Post-purchase page<\/a><\/strong>  setting. <br>Visit store&#8217;s <strong>checkout setting<\/strong> and link the Post-purchase page configuration with your app (for which you have created the extension) , follow the below image &#8211;<br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1084\" height=\"438\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-postpurchase-config.png\" alt=\"store-postpurchase-config\" class=\"wp-image-347785\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-postpurchase-config.png 1084w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-postpurchase-config-300x121.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-postpurchase-config-250x101.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-postpurchase-config-768x310.png 768w\" sizes=\"(max-width: 1084px) 100vw, 1084px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Post-purchase page<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now the customer will be redirected to a new post-purchase page after making payment. You can modify this page as per your app&#8217;s requirement.<br><br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"649\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page-1200x649.png\" alt=\"store-post-purchase-page\" class=\"wp-image-347786\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page-1200x649.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page-300x162.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page-250x135.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page-768x415.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/store-post-purchase-page.png 1210w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Store&#8217;s post purchase page<\/figcaption><\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Modification of Post-purchase page<\/h2>\n\n\n\n<p>Now visit the extension folder and update the src\/index.js file to make the changes according to your requirement. After updating the extension file it is mandatory to unpublish and publish the extension to reflect the change on corresponding page (here its post-purchase page). To overcome this limitation the developer can use <a href=\"https:\/\/ngrok.com\/\">ngrok<\/a> to make and check the changes on runtime. Follow the below steps for this:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create an account on ngrok and you will be provided with an <strong><a href=\"https:\/\/dashboard.ngrok.com\/get-started\/your-authtoken\">authentication token<\/a><\/strong>. <br><\/li>\n\n\n\n<li>Navigate to your extension folder and run <strong><code>shopify app tunnel auth &lt;your ngrok auth token&gt;<\/code><\/strong> , this will connect your extension code with ngrok server.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now <code><strong>shopify extension serve<\/strong><\/code> to start a local server. You will be provided with a query string, append this to your store&#8217;s post-purchase page which will appear after you make an order, now update you index.js file , it will automatically reflect at you post-purchase page. <br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1118\" height=\"238\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/serve-extension.png\" alt=\"serve-extension\" class=\"wp-image-347832\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/serve-extension.png 1118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/serve-extension-300x64.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/serve-extension-250x53.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/serve-extension-768x163.png 768w\" sizes=\"(max-width: 1118px) 100vw, 1118px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Connection extension code with ngrok server<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"990\" height=\"538\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/developing-extension.png\" alt=\"developing-extension\" class=\"wp-image-347833\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/developing-extension.png 990w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/developing-extension-300x163.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/developing-extension-250x136.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/developing-extension-768x417.png 768w\" sizes=\"(max-width: 990px) 100vw, 990px\" loading=\"lazy\" \/><figcaption class=\"wp-element-caption\">Developing extension<\/figcaption><\/figure>\n\n\n\n<p><br>No need to make multiple orders or publish and unpublish your extension multiple times to view the changes,  just update the file as per your need and develop your extension.<br><br>The&nbsp;<strong>Checkout UI Extension&nbsp;<\/strong>is still in beta phase, so once it is available for developers I will update it here too.<\/p>\n\n\n\n<p>Thanks for reading my blog, hope it will help you in building.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shopify has launched a much awaited extension &#8211; Checkout Extension which will help in customizing Shopify checkout flow and reduces the developer restrictions on appending some additional inputs or features on checkout flow. Customizing Shopify Checkout &#8211; Checkout Extension let app developers build custom functionality that merchants can install at defined points in the checkout <a href=\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-345874","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customizing Shopify Checkout - Checkout Extension<\/title>\n<meta name=\"description\" content=\"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout &amp; customize the checkout experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing Shopify Checkout - Checkout Extension\" \/>\n<meta property=\"og:description\" content=\"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout &amp; customize the checkout experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-12T08:57:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T06:00:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\" \/>\n<meta name=\"author\" content=\"Nidhi Joshi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nidhi Joshi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\"},\"author\":{\"name\":\"Nidhi Joshi\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/26e3ebbfe94d7f6c166d33d2238e62b2\"},\"headline\":\"Customizing Shopify Checkout &#8211; Checkout Extension\",\"datePublished\":\"2022-08-12T08:57:19+00:00\",\"dateModified\":\"2023-02-24T06:00:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\"},\"wordCount\":608,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\",\"url\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\",\"name\":\"Customizing Shopify Checkout - Checkout Extension\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\",\"datePublished\":\"2022-08-12T08:57:19+00:00\",\"dateModified\":\"2023-02-24T06:00:39+00:00\",\"description\":\"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout & customize the checkout experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png\",\"width\":1102,\"height\":241,\"caption\":\"Shopify-login\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing Shopify Checkout &#8211; Checkout Extension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/26e3ebbfe94d7f6c166d33d2238e62b2\",\"name\":\"Nidhi Joshi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7433dae8c4d43fbb5e58c1691669bc62050bea68b3d6730f619ae2405295fa4c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7433dae8c4d43fbb5e58c1691669bc62050bea68b3d6730f619ae2405295fa4c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Nidhi Joshi\"},\"description\":\"Believes in simple lifestyle and follow a simple logic to make herself better than yesterday.\",\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/nidhi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customizing Shopify Checkout - Checkout Extension","description":"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout & customize the checkout experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/","og_locale":"en_US","og_type":"article","og_title":"Customizing Shopify Checkout - Checkout Extension","og_description":"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout & customize the checkout experience.","og_url":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-08-12T08:57:19+00:00","article_modified_time":"2023-02-24T06:00:39+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png","type":"","width":"","height":""}],"author":"Nidhi Joshi","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nidhi Joshi","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/"},"author":{"name":"Nidhi Joshi","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/26e3ebbfe94d7f6c166d33d2238e62b2"},"headline":"Customizing Shopify Checkout &#8211; Checkout Extension","datePublished":"2022-08-12T08:57:19+00:00","dateModified":"2023-02-24T06:00:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/"},"wordCount":608,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/","url":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/","name":"Customizing Shopify Checkout - Checkout Extension","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png","datePublished":"2022-08-12T08:57:19+00:00","dateModified":"2023-02-24T06:00:39+00:00","description":"Customizing Shopify Checkout-Checkout Extension allow you to extend your app code into Shopify checkout & customize the checkout experience.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Shopify-login.png","width":1102,"height":241,"caption":"Shopify-login"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/customizing-shopify-checkout-checkout-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customizing Shopify Checkout &#8211; Checkout Extension"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/26e3ebbfe94d7f6c166d33d2238e62b2","name":"Nidhi Joshi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7433dae8c4d43fbb5e58c1691669bc62050bea68b3d6730f619ae2405295fa4c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7433dae8c4d43fbb5e58c1691669bc62050bea68b3d6730f619ae2405295fa4c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Nidhi Joshi"},"description":"Believes in simple lifestyle and follow a simple logic to make herself better than yesterday.","sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/nidhi\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=345874"}],"version-history":[{"count":26,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345874\/revisions"}],"predecessor-version":[{"id":370189,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/345874\/revisions\/370189"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=345874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=345874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=345874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}