{"id":396241,"date":"2023-08-24T11:51:13","date_gmt":"2023-08-24T11:51:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=396241"},"modified":"2025-01-27T10:47:56","modified_gmt":"2025-01-27T10:47:56","slug":"how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/","title":{"rendered":"How to integrate Shopify headless hydrogen theme with the Klaviyo?"},"content":{"rendered":"\n<p><strong>Generally they are two main steps to integrate the Klaviyo\u2019s into the <a href=\"https:\/\/webkul.com\/shopify-headless-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify headless hydrogen<\/a> app.<\/strong><br><strong>1.<\/strong> Connect Shopify store to  Klaviyo\u2019s native integration.<br><strong>2.<\/strong> Manually Added the code snippets for tracking the website.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Connect Shopify store to  Klaviyo\u2019s native integration.<\/h3>\n\n\n\n<p>1. Navigate to the Integration Tab.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png\" alt=\"screenshot_1692599889637\" class=\"wp-image-396317\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-250x127.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637.png 1302w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br>2.  Click to Add Integration on the Integration view, and search for the Shopify.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232-1200x612.png\" alt=\"screenshot_1692600080232\" class=\"wp-image-396318\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232-250x127.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600080232.png 1302w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821-1200x612.png\" alt=\"screenshot_1692600168821\" class=\"wp-image-396319\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821-250x127.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600168821.png 1302w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br>3. Fill out the Shopify Integration Setting Form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456-1200x612.png\" alt=\"screenshot_1692600365456\" class=\"wp-image-396324\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692600365456.png 1301w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><br>4. Clicked to shopify connect , it&#8217;ll be taken to you to shopify account.<br>5. Check the permission and reviewed it ,  and install the app.<\/p>\n\n\n\n<p>A successfull green callout indicate that your data is synced with the Klaviyo App.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manually Added the code snippets for tracking the website.<\/h3>\n\n\n\n<p>In the headless setup we need to install  manually the Klaviyo&#8217;s \u201cActive on Site\u201d JavaScript&nbsp;, popularly known as &nbsp;<strong>Klaviyo.js<\/strong>. which detect the user activity and also support the klaviyo forms.<br>As soon as you connect your <a href=\"https:\/\/store.webkul.com\/shopify-headless-multi-vendor-marketplace.html\">headless shopify<\/a> to klaviyo ,  onsite metrics will be synced with the Klaviyo\u2019s native Shopify integration.<br>In Shopify Klaviyo integration , some onsite metrices of tracking  will be provided automatically , and for some you need to manage manually in your headless App.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Subscribe Email functionality using Klaviyo.<\/h2>\n\n\n\n<p>To achieve this functionality we need two things , first is your Klaviyo ListId and second is your Klaviyo Apikey, and here&#8217;s the code.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">export const subscribedUser = async (email) =&gt; {\n  const apikey = &quot;your-klaviyo-api-key&quot;;\n  const listId = &quot;your -klaviyo-listId&quot;;\n\n  const url = `https:\/\/a.klaviyo.com\/api\/v2\/list\/${listId}\/subscribe?api_key=${apiKey}`;\n\n  const options = {\n    method: &#039;POST&#039;,\n    headers: {Accept: &#039;application\/json&#039;, &#039;Content-Type&#039;: &#039;application\/json&#039;},\n    body: JSON.stringify({\n      profiles: &#091;{email}],\n    }),\n  };<\/pre>\n\n\n\n<p>Now you can used this code whenever you want for subscribed the user emails.<\/p>\n\n\n\n<p><br><strong>Apart from that these are the onsite metrices which will be already synced as soon as connect  with the Klaviyo\u2019s native Shopify integration :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Checkout <\/strong><br>When customers start a checkout and provide their contact information<\/li>\n\n\n\n<li><strong>Order Place<\/strong><br>When an order successfully placed.<\/li>\n\n\n\n<li><strong>Ordered Product<\/strong><br>An event for each item in a processed order<\/li>\n\n\n\n<li><strong>Order<\/strong> <strong>Fulfilled <\/strong><br>When an order is sent to the customer<\/li>\n\n\n\n<li><strong>Order<\/strong> <strong>Partial Fulfilled<\/strong><br>When an order that has been placed is partially fulfilled<\/li>\n\n\n\n<li><strong>Order<\/strong> <strong>Canceled <\/strong><br>When an order is canceled<\/li>\n\n\n\n<li><strong>Refunded Order<\/strong><br><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">These onsite metrices we will need to add manually for the tracking:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Active User<\/strong><br>When someone visits your website<\/li>\n\n\n\n<li><strong>Viewed Product<\/strong><br>When someone views a product&nbsp;<\/li>\n\n\n\n<li><strong>Recently Viewed Items<\/strong><br>Recently viewed items for a specific profile<\/li>\n\n\n\n<li><strong>Added to Cart<\/strong><br>When someone adds an item to their cart<\/li>\n\n\n\n<li><strong>Logged in user tracking<\/strong><br>Identify and track the activity of logged in users<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Code Snippets of the manually added onsite metrices.<\/h3>\n\n\n\n<p>Code snippets of the manually added onsite metrices , In this I give few examples, if you want to known more about  manual code snippets of onsite metrices , you can visit on this <a href=\"https:\/\/developers.klaviyo.com\/en\/v1-2\/docs\/integrate-with-a-shopify-hydrogen-store\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">connect Klaviyo\u2019s to Shopify Hydrogen<\/a>. <\/p>\n\n\n\n<p><br><strong>Add Viewed Product tracking<\/strong> : <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">var _learnq = window._learnq || &#091;];\n  var product = {\n    Name: payload.title,\n    ProductID: payload.product.id.substring(payload.product.id.lastIndexOf(&#039;\/&#039;) + 1),\n    Categories:\n      payload.product.collections == undefined\n        ? null\n        : payload.product.collections.edges.map((a) =&gt; a.node.title),\n    ImageURL: payload.selectedVariant.image.url,\n    URL: payload.url,\n    Brand: payload.vendor,\n    Price: payload.selectedVariant.priceV2.amount,\n    CompareAtPrice: payload.selectedVariant.compareAtPriceV2.amount,\n  };\n  _learnq.push(&#091;&#039;track&#039;, &#039;Viewed Product&#039;, product]);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>Add Added to Cart tracking<\/strong> : <\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">var _learnq = window._learnq || &#091;]; var cart = { total_price: payload.cart.cost.totalAmount.amount, $value: payload.cart.cost.totalAmount.amount, original_total_price: payload.cart.cost.subtotalAmount.amount, items: payload.cart.lines, }; _learnq.push(&#091;&#039;track&#039;, &#039;Added to Cart&#039;, cart]);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>Track logged-in users<\/strong> : <\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\">var _learnq = window._learnq || &#091;];\n_learnq.push(&#091;\n  &#039;identify&#039;,\n  {\n    $email: customer.customer.email,\n    $first_name: customer.customer.firstName,\n    $last_name: customer.customer.lastName,\n  },\n]);<\/pre>\n\n\n\n<p>Thansk for reading !! , If you like this blog pls check my another blog on <br><a href=\"https:\/\/webkul.com\/blog\/guide-for-the-hooks-in-the-shopify-hydrogen\/\">Guide-for-the-hooks-in-the-Shopify Hydrogen<\/a>. If you need <a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\">headless commerce development<\/a> services, we deliver tailored, scalable solutions to boost your online store!<br>Happy Coding !!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generally they are two main steps to integrate the Klaviyo\u2019s into the Shopify headless hydrogen app.1. Connect Shopify store to Klaviyo\u2019s native integration.2. Manually Added the code snippets for tracking the website. Connect Shopify store to Klaviyo\u2019s native integration. 1. Navigate to the Integration Tab. 2. Click to Add Integration on the Integration view, and <a href=\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":495,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[841,1],"tags":[1893,9219,14637,837],"class_list":["post-396241","post","type-post","status-publish","format-standard","hentry","category-shopify","category-uncategorized","tag-frontend","tag-headless","tag-klaviyo","tag-shopify"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrate Shopify headless hydrogen theme with the Klaviyo<\/title>\n<meta name=\"description\" content=\"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.\" \/>\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\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrate Shopify headless hydrogen theme with the Klaviyo\" \/>\n<meta property=\"og:description\" content=\"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\" \/>\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=\"2023-08-24T11:51:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-27T10:47:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png\" \/>\n<meta name=\"author\" content=\"Vishal Handa\" \/>\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=\"Vishal Handa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\"},\"author\":{\"name\":\"Vishal Handa\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94\"},\"headline\":\"How to integrate Shopify headless hydrogen theme with the Klaviyo?\",\"datePublished\":\"2023-08-24T11:51:13+00:00\",\"dateModified\":\"2025-01-27T10:47:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\"},\"wordCount\":484,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png\",\"keywords\":[\"frontend\",\"Headless\",\"klaviyo\",\"shopify\"],\"articleSection\":[\"Shopify\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\",\"name\":\"Integrate Shopify headless hydrogen theme with the Klaviyo\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png\",\"datePublished\":\"2023-08-24T11:51:13+00:00\",\"dateModified\":\"2025-01-27T10:47:56+00:00\",\"description\":\"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637.png\",\"width\":1302,\"height\":664,\"caption\":\"screenshot_1692599889637\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to integrate Shopify headless hydrogen theme with the Klaviyo?\"}]},{\"@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\/3e7c3652272858eee25f729824abcf94\",\"name\":\"Vishal Handa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vishal Handa\"},\"description\":\"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrate Shopify headless hydrogen theme with the Klaviyo","description":"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.","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\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/","og_locale":"en_US","og_type":"article","og_title":"Integrate Shopify headless hydrogen theme with the Klaviyo","og_description":"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.","og_url":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-08-24T11:51:13+00:00","article_modified_time":"2025-01-27T10:47:56+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png","type":"","width":"","height":""}],"author":"Vishal Handa","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Vishal Handa","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/"},"author":{"name":"Vishal Handa","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3e7c3652272858eee25f729824abcf94"},"headline":"How to integrate Shopify headless hydrogen theme with the Klaviyo?","datePublished":"2023-08-24T11:51:13+00:00","dateModified":"2025-01-27T10:47:56+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/"},"wordCount":484,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png","keywords":["frontend","Headless","klaviyo","shopify"],"articleSection":["Shopify"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/","url":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/","name":"Integrate Shopify headless hydrogen theme with the Klaviyo","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637-1200x612.png","datePublished":"2023-08-24T11:51:13+00:00","dateModified":"2025-01-27T10:47:56+00:00","description":"How to integrate the klaviyo market automation app with the shopify hydrogen , and guide for manage the klaviyo onsite metrices in the app.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/08\/screenshot_1692599889637.png","width":1302,"height":664,"caption":"screenshot_1692599889637"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-integrate-shopify-headless-hydrogen-theme-with-the-klaviyo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to integrate Shopify headless hydrogen theme with the Klaviyo?"}]},{"@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\/3e7c3652272858eee25f729824abcf94","name":"Vishal Handa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/faed45c922f15ae5e9baa741827207ccec6ba6d51587eb248e61e0e4b888e355?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vishal Handa"},"description":"Vishal Handa is a Software Engineer specializing in the Akeneo platform with expertise in PIM API Development and payment gateway integration services. Skilled in REST APIs, BackboneJS, and PostgreSQL, Vishal crafts seamless, high-performance solutions that enhance digital commerce and streamline data management.","url":"https:\/\/webkul.com\/blog\/author\/vishal-handa658\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/396241","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\/495"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=396241"}],"version-history":[{"count":15,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/396241\/revisions"}],"predecessor-version":[{"id":481705,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/396241\/revisions\/481705"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=396241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=396241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=396241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}