{"id":3493,"date":"2026-07-05T04:51:38","date_gmt":"2026-07-05T04:51:38","guid":{"rendered":"https:\/\/regarcomm.com\/?p=3493"},"modified":"2026-07-05T04:57:22","modified_gmt":"2026-07-05T04:57:22","slug":"proses-setup-kolaborasi-astro-dengan-shopify","status":"publish","type":"post","link":"https:\/\/regarcomm.com\/?p=3493","title":{"rendered":"Proses Setup Kolaborasi Astro Dengan shopify"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3493\" class=\"elementor elementor-3493\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f9919d e-flex e-con-boxed e-con e-parent\" data-id=\"5f9919d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cddf674 elementor-widget elementor-widget-gallery\" data-id=\"cddf674\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;columns&quot;:3,&quot;lazyload&quot;:&quot;yes&quot;,&quot;gallery_layout&quot;:&quot;grid&quot;,&quot;columns_tablet&quot;:2,&quot;columns_mobile&quot;:1,&quot;gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;link_to&quot;:&quot;file&quot;,&quot;aspect_ratio&quot;:&quot;3:2&quot;,&quot;overlay_background&quot;:&quot;yes&quot;,&quot;content_hover_animation&quot;:&quot;fade-in&quot;}\" data-widget_type=\"gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-gallery__container\">\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113805.616.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download - 2026-07-05T113805.616\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4NiwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC0yMDI2LTA3LTA1VDExMzgwNS42MTYuanBnIiwic2xpZGVzaG93IjoiY2RkZjY3NCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113805.616.jpg\" data-width=\"246\" data-height=\"164\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-94.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download (94)\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4OCwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC05NC5wbmciLCJzbGlkZXNob3ciOiJjZGRmNjc0In0%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-94.png\" data-width=\"246\" data-height=\"138\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download - 2026-07-05T113903.142\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4NCwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC0yMDI2LTA3LTA1VDExMzkwMy4xNDIuanBnIiwic2xpZGVzaG93IjoiY2RkZjY3NCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" data-width=\"246\" data-height=\"109\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bcdf55f e-flex e-con-boxed e-con e-parent\" data-id=\"bcdf55f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c44e6a2 elementor-widget elementor-widget-text-editor\" data-id=\"c44e6a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"model-response-message-contentr_496fbbe74079f59e\" class=\"markdown markdown-main-panel enable-luminous-fast-follows enable-updated-hr-color\" dir=\"ltr\" aria-busy=\"false\" aria-live=\"polite\"><p data-path-to-node=\"0\">Proses <i data-path-to-node=\"0\" data-index-in-node=\"7\">setup<\/i> kolaborasi antara <b data-path-to-node=\"0\" data-index-in-node=\"31\">Astro JS<\/b> dan <b data-path-to-node=\"0\" data-index-in-node=\"44\">Shopify<\/b> (menggunakan <b data-path-to-node=\"0\" data-index-in-node=\"65\">Shopify Storefront API<\/b>) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat.<\/p><p data-path-to-node=\"1\">Berikut adalah panduan langkah demi langkah untuk melakukan <i data-path-to-node=\"1\" data-index-in-node=\"60\">setup<\/i> dari awal hingga siap pakai:<\/p><h2 data-path-to-node=\"3\">Langkah 1: Setup di Sisi Shopify (Mendapatkan Akses API)<\/h2><p data-path-to-node=\"4\">Sebelum masuk ke kode Astro, Anda perlu mengaktifkan akses API di toko Shopify Anda agar Astro bisa mengambil data produk.<\/p><ol start=\"1\" data-path-to-node=\"5\"><li><p data-path-to-node=\"5,0,0\">Masuk ke <b data-path-to-node=\"5,0,0\" data-index-in-node=\"9\">Shopify Admin<\/b> Anda.<\/p><\/li><li><p data-path-to-node=\"5,1,0\">Buka menu <b data-path-to-node=\"5,1,0\" data-index-in-node=\"10\">Settings<\/b> (Pengaturan) &gt; <b data-path-to-node=\"5,1,0\" data-index-in-node=\"34\">Apps and sales channels<\/b> (Aplikasi dan saluran penjualan).<\/p><\/li><li><p data-path-to-node=\"5,2,0\">Klik <b data-path-to-node=\"5,2,0\" data-index-in-node=\"5\">Develop apps<\/b> (Kembangkan aplikasi) di bagian atas, lalu klik <b data-path-to-node=\"5,2,0\" data-index-in-node=\"66\">Create an app<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,3,0\">Beri nama aplikasi Anda (misal: <code data-path-to-node=\"5,3,0\" data-index-in-node=\"32\">Astro Frontend<\/code>) dan pilih akun pengembang Anda.<\/p><\/li><li><p data-path-to-node=\"5,4,0\">Di tab <b data-path-to-node=\"5,4,0\" data-index-in-node=\"7\">Configuration<\/b>, cari bagian <b data-path-to-node=\"5,4,0\" data-index-in-node=\"34\">Storefront API integration<\/b> dan klik <b data-path-to-node=\"5,4,0\" data-index-in-node=\"70\">Configure<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,5,0\">Centang semua hak akses (<i data-path-to-node=\"5,5,0\" data-index-in-node=\"25\">scopes<\/i>) yang dibutuhkan, seperti:<\/p><ul data-path-to-node=\"5,5,1\"><li><p data-path-to-node=\"5,5,1,0,0\"><code data-path-to-node=\"5,5,1,0,0\" data-index-in-node=\"0\">read_products<\/code> (Membaca data produk)<\/p><\/li><li><p data-path-to-node=\"5,5,1,1,0\"><code data-path-to-node=\"5,5,1,1,0\" data-index-in-node=\"0\">read_product_listings<\/code><\/p><\/li><li><p data-path-to-node=\"5,5,1,2,0\"><code data-path-to-node=\"5,5,1,2,0\" data-index-in-node=\"0\">unauthenticated_read_product_listings<\/code> (Wajib untuk checkout\/keranjang publik)<\/p><\/li><\/ul><\/li><li><p data-path-to-node=\"5,6,0\">Klik <b data-path-to-node=\"5,6,0\" data-index-in-node=\"5\">Save<\/b>, lalu pindah ke tab <b data-path-to-node=\"5,6,0\" data-index-in-node=\"30\">API credentials<\/b> dan klik <b data-path-to-node=\"5,6,0\" data-index-in-node=\"55\">Install app<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,7,0\">Salin <b data-path-to-node=\"5,7,0\" data-index-in-node=\"6\">Storefront API access token<\/b> dan <b data-path-to-node=\"5,7,0\" data-index-in-node=\"38\">Shopify Domain<\/b> toko Anda (misal: <code data-path-to-node=\"5,7,0\" data-index-in-node=\"71\">toko-anda.myshopify.com<\/code>).<\/p><\/li><\/ol><h2 data-path-to-node=\"7\">Langkah 2: Setup Project Astro JS<\/h2><p data-path-to-node=\"8\">Sekarang, buka terminal di komputer Anda untuk membuat proyek <i data-path-to-node=\"8\" data-index-in-node=\"62\">frontend<\/i> baru.<\/p><ol start=\"1\" data-path-to-node=\"9\"><li><p data-path-to-node=\"9,0,0\">Jalankan perintah pembuatan proyek Astro:<\/p><div class=\"code-block ng-tns-c199063979-164 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"3\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-164\"><div class=\"animated-opacity ng-tns-c199063979-164\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-164 ng-star-inserted\"><span class=\"ng-tns-c199063979-164\">Bash<\/span><div class=\"buttons ng-tns-c199063979-164 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-164\"><code class=\"code-container formatted ng-tns-c199063979-164\" role=\"text\" data-test-id=\"code-content\">npm create astro@latest\n<\/code><\/pre><\/div><\/div><\/div><\/li><li><p data-path-to-node=\"9,1,0\">Masuk ke dalam folder proyek Anda:<\/p><div class=\"code-block ng-tns-c199063979-165 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"6\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-165\"><div class=\"animated-opacity ng-tns-c199063979-165\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-165 ng-star-inserted\"><span class=\"ng-tns-c199063979-165\">Bash<\/span><div class=\"buttons ng-tns-c199063979-165 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-165\"><code class=\"code-container formatted ng-tns-c199063979-165\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-built_in\">cd<\/span> nama-proyek-astro-anda\n<\/code><\/pre><\/div><\/div><\/div><\/li><li><p data-path-to-node=\"9,2,0\">Buat file <code data-path-to-node=\"9,2,0\" data-index-in-node=\"10\">.env<\/code> di akar folder proyek untuk menyimpan token Shopify dengan aman:<\/p><div class=\"code-block ng-tns-c199063979-166 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"9\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-166\"><div class=\"animated-opacity ng-tns-c199063979-166\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-166 ng-star-inserted\"><span class=\"ng-tns-c199063979-166\">Cuplikan kode<\/span><div class=\"buttons ng-tns-c199063979-166 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-166\"><code class=\"code-container formatted ng-tns-c199063979-166\" role=\"text\" data-test-id=\"code-content\">SHOPIFY_STOREFRONT_API_TOKEN=isi_dengan_token_storefront_anda\nSHOPIFY_SHOP_DOMAIN=toko-anda.myshopify.com\n<\/code><\/pre><\/div><\/div><\/div><\/li><\/ol><h2 data-path-to-node=\"11\">Langkah 3: Membuat Fungsi Fetcher GraphQL Shopify<\/h2><p data-path-to-node=\"12\">Shopify Storefront API berbasis <b data-path-to-node=\"12\" data-index-in-node=\"32\">GraphQL<\/b>. Kita akan membuat fungsi pembantu (<i data-path-to-node=\"12\" data-index-in-node=\"76\">helper function<\/i>) di Astro untuk melakukan <i data-path-to-node=\"12\" data-index-in-node=\"118\">request<\/i> ke Shopify.<\/p><p data-path-to-node=\"13\">Buat file baru di <code data-path-to-node=\"13\" data-index-in-node=\"18\">src\/utils\/shopify.js<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-167 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"12\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-167\"><div class=\"animated-opacity ng-tns-c199063979-167\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-167 ng-star-inserted\"><span class=\"ng-tns-c199063979-167\">JavaScript<\/span><div class=\"buttons ng-tns-c199063979-167 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-167\"><code class=\"code-container formatted ng-tns-c199063979-167\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-comment\">\/\/ src\/utils\/shopify.js<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">shopifyFetch<\/span>(<span class=\"hljs-params\">{ query, variables = {} }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> domain = <span class=\"hljs-keyword\">import<\/span>.meta.env.SHOPIFY_SHOP_DOMAIN;\n  <span class=\"hljs-keyword\">const<\/span> token = <span class=\"hljs-keyword\">import<\/span>.meta.env.SHOPIFY_STOREFRONT_API_TOKEN;\n\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`https:\/\/<span class=\"hljs-subst\">${domain}<\/span>\/api\/2024-01\/graphql.json`<\/span>, {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,\n        <span class=\"hljs-string\">'X-Shopify-Storefront-Access-Token'<\/span>: token,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify({ query, variables }),\n    });\n\n    <span class=\"hljs-keyword\">if<\/span> (!response.ok) {\n      <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">`HTTP error! status: <span class=\"hljs-subst\">${response.status}<\/span>`<\/span>);\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">await<\/span> response.json();\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Gagal mengambil data dari Shopify:\"<\/span>, error);\n    <span class=\"hljs-keyword\">throw<\/span> error;\n  }\n}\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"16\">Langkah 4: Menampilkan Produk di Halaman Utama (<code data-path-to-node=\"16\" data-index-in-node=\"48\">index.astro<\/code>)<\/h2><p data-path-to-node=\"17\">Sekarang mari kita uji koneksinya dengan menarik daftar produk dari Shopify dan menampilkannya menggunakan komponen Astro.<\/p><p data-path-to-node=\"18\">Buka file <code data-path-to-node=\"18\" data-index-in-node=\"10\">src\/pages\/index.astro<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-168 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"15\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-168\"><div class=\"animated-opacity ng-tns-c199063979-168\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-168 ng-star-inserted\"><span class=\"ng-tns-c199063979-168\">Cuplikan kode<\/span><div class=\"buttons ng-tns-c199063979-168 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-168\"><code class=\"code-container formatted ng-tns-c199063979-168\" role=\"text\" data-test-id=\"code-content\">---\n\/\/ src\/pages\/index.astro\nimport { shopifyFetch } from '..\/utils\/shopify';\n\n\/\/ Tulis Query GraphQL untuk mengambil 10 produk pertama\nconst graphqlQuery = `\n  {\n    products(first: 10) {\n      edges {\n        node {\n          id\n          title\n          handle\n          description\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          priceRange {\n            minVariantPrice {\n              amount\n              currencyCode\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst response = await shopifyFetch({ query: graphqlQuery });\nconst products = response.data.products.edges;\n---\n\n&lt;html lang=\"id\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;title&gt;Toko Headless Astro + Shopify&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Katalog Produk Kami&lt;\/h1&gt;\n    \n    &lt;div class=\"product-grid\"&gt;\n      {products.map(({ node: product }) =&gt; {\n        const image = product.images.edges[0]?.node;\n        const price = product.priceRange.minVariantPrice;\n        \n        return (\n          &lt;div class=\"product-card\"&gt;\n            {image &amp;&amp; &lt;img src={image.url} alt={image.altText || product.title} width=\"200\" \/&gt;}\n            &lt;h2&gt;{product.title}&lt;\/h2&gt;\n            &lt;p&gt;{price.amount} {price.currencyCode}&lt;\/p&gt;\n            &lt;a href={`\/produk\/${product.handle}`}&gt;Detail Produk&lt;\/a&gt;\n          &lt;\/div&gt;\n        );\n      })}\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n  .product-grid { display: flex; gap: 20px; flex-wrap: wrap; padding: 20px; }\n  .product-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 220px; }\n  .product-card img { max-width: 100%; height: auto; }\n&lt;\/style&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"21\">Langkah 5: Membuat Halaman Detail Produk Dinamis<\/h2><p data-path-to-node=\"22\">Agar setiap produk memiliki halamannya sendiri secara otomatis (misal: <code data-path-to-node=\"22\" data-index-in-node=\"71\">\/produk\/sepatu-keren<\/code>), kita gunakan <i data-path-to-node=\"22\" data-index-in-node=\"107\">Dynamic Routing<\/i> dari Astro.<\/p><p data-path-to-node=\"23\">Buat file baru di <code data-path-to-node=\"23\" data-index-in-node=\"18\">src\/pages\/produk\/[handle].astro<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-169 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"18\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-169\"><div class=\"animated-opacity ng-tns-c199063979-169\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-169 ng-star-inserted\"><span class=\"ng-tns-c199063979-169\">Cuplikan kode<\/span><div class=\"buttons ng-tns-c199063979-169 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-169\"><code class=\"code-container formatted ng-tns-c199063979-169\" role=\"text\" data-test-id=\"code-content\">---\n\/\/ src\/pages\/produk\/[handle].astro\nimport { shopifyFetch } from '..\/..\/utils\/shopify';\n\n\/\/ 1. Beritahu Astro halaman apa saja yang perlu dibuat (Build Time)\nexport async function getStaticPaths() {\n  const response = await shopifyFetch({\n    query: `{ products(first: 250) { edges { node { handle } } } }`\n  });\n  \n  return response.data.products.edges.map(({ node }) =&gt; ({\n    params: { handle: node.handle },\n  }));\n}\n\nconst { handle } = Astro.params;\n\n\/\/ 2. Ambil data lengkap produk berdasarkan handle yang sedang dibuka\nconst productQuery = `\n  query getProduct($handle: String!) {\n    product(handle: $handle) {\n      title\n      description\n      images(first: 1) { edges { node { url } } }\n      variants(first: 1) {\n        edges {\n          node { id }\n        }\n      }\n    }\n  }\n`;\n\nconst productResponse = await shopifyFetch({\n  query: productQuery,\n  variables: { handle }\n});\n\nconst product = productResponse.data.product;\nconst variantId = product.variants.edges[0]?.node.id; \/\/ Dibutuhkan untuk checkout nanti\n---\n\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;&lt;title&gt;{product.title}&lt;\/title&gt;&lt;\/head&gt;\n&lt;body&gt;\n  &lt;a href=\"\/\"&gt;\u2190 Kembali ke Toko&lt;\/a&gt;\n  &lt;main&gt;\n    &lt;h1&gt;{product.title}&lt;\/h1&gt;\n    &lt;img src={product.images.edges[0]?.node.url} width=\"400\" \/&gt;\n    &lt;p&gt;{product.description}&lt;\/p&gt;\n    \n    &lt;button data-variant-id={variantId} id=\"buy-button\"&gt;Beli Sekarang&lt;\/button&gt;\n  &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"26\">Langkah 6: Integrasi Sistem Keranjang Belanja &amp; Checkout<\/h2><p data-path-to-node=\"27\">Halaman katalog di atas bersifat statis (Sangat cepat dan ramah SEO). Namun, untuk proses <b data-path-to-node=\"27\" data-index-in-node=\"90\">Beli Sekarang \/ Keranjang<\/b>, kita perlu berinteraksi langsung dengan Shopify via browser pengguna (<i data-path-to-node=\"27\" data-index-in-node=\"187\">Client-side<\/i>).<\/p><p data-path-to-node=\"28\">Cara paling instan tanpa perlu membuat sistem <i data-path-to-node=\"28\" data-index-in-node=\"46\">cart<\/i> yang rumit dari nol adalah menggunakan <b data-path-to-node=\"28\" data-index-in-node=\"90\">Shopify Checkout URL<\/b>. Kita bisa membuat baris kode JavaScript sederhana di dalam tag <code data-path-to-node=\"28\" data-index-in-node=\"175\">&lt;script&gt;<\/code> pada halaman detail produk untuk langsung mengarahkan pengguna ke halaman pembayaran Shopify:<\/p><p data-path-to-node=\"29\">Tambahkan skrip ini di bagian bawah file <code data-path-to-node=\"29\" data-index-in-node=\"41\">src\/pages\/produk\/[handle].astro<\/code> Anda:<\/p><div class=\"code-block ng-tns-c199063979-170 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"21\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-170\"><div class=\"animated-opacity ng-tns-c199063979-170\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-170 ng-star-inserted\"><span class=\"ng-tns-c199063979-170\">Cuplikan kode<\/span><div class=\"buttons ng-tns-c199063979-170 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-170\"><code class=\"code-container formatted ng-tns-c199063979-170\" role=\"text\" data-test-id=\"code-content\">&lt;script&gt;\n  import { shopifyFetch } from '..\/..\/utils\/shopify';\n\n  const buyButton = document.getElementById('buy-button');\n  \n  buyButton.addEventListener('click', async () =&gt; {\n    const variantId = buyButton.getAttribute('data-variant-id');\n    \n    \/\/ Query mutasi GraphQL untuk membuat checkout instan dengan 1 barang\n    const mutation = `\n      mutation checkoutCreate($input: CheckoutInput!) {\n        checkoutCreate(input: $input) {\n          checkout {\n            webUrl\n          }\n        }\n      }\n    `;\n    \n    const variables = {\n      input: {\n        lineItems: [{ variantId: variantId, quantity: 1 }]\n      }\n    };\n    \n    buyButton.innerText = \"Memproses...\";\n    \n    \/\/ Tembak langsung API Shopify dari browser pembeli\n    const domain = \"toko-anda.myshopify.com\"; \/\/ Bisa di-hardcode di script client-side\n    const token = \"isi_token_storefront_anda\"; \/\/ Untuk client-side pastikan token storefront aman (publik)\n    \n    const response = await fetch(`https:\/\/${domain}\/api\/2024-01\/graphql.json`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json', 'X-Shopify-Storefront-Access-Token': token },\n      body: JSON.stringify({ query: mutation, variables })\n    });\n    \n    const result = await response.json();\n    const checkoutUrl = result.data.checkoutCreate.checkout.webUrl;\n    \n    \/\/ Lempar pembeli ke halaman pembayaran resmi Shopify yang aman\n    window.location.href = checkoutUrl;\n  });\n&lt;\/script&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"32\">Langkah 7: Build &amp; Deployment<\/h2><p data-path-to-node=\"33\">Setelah semuanya berfungsi dengan baik di komputer lokal:<\/p><ol start=\"1\" data-path-to-node=\"34\"><li><p data-path-to-node=\"34,0,0\">Jalankan <code data-path-to-node=\"34,0,0\" data-index-in-node=\"9\">npm run build<\/code> untuk memverifikasi tidak ada eror GraphQL. Astro akan menghasilkan file HTML statis siap pakai.<\/p><\/li><li><p data-path-to-node=\"34,1,0\">Hubungkan repositori Git Anda ke platform seperti <b data-path-to-node=\"34,1,0\" data-index-in-node=\"50\">Vercel, Netlify, atau Cloudflare Pages<\/b>. Jangan lupa untuk memasukkan <code data-path-to-node=\"34,1,0\" data-index-in-node=\"119\">SHOPIFY_STOREFRONT_API_TOKEN<\/code> dan <code data-path-to-node=\"34,1,0\" data-index-in-node=\"152\">SHOPIFY_SHOP_DOMAIN<\/code> ke dalam pengaturan <i data-path-to-node=\"34,1,0\" data-index-in-node=\"192\">Environment Variables<\/i> di dashboard hosting tersebut.\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Baca Mengenal <a href=\"https:\/\/regarcomm.com\/?p=3456\">Astro JS<\/a><\/p><\/li><\/ol><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cdf0000 e-flex e-con-boxed e-con e-parent\" data-id=\"cdf0000\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7bf0ee elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-widget elementor-widget-posts\" data-id=\"e7bf0ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;classic_columns&quot;:&quot;3&quot;,&quot;classic_columns_tablet&quot;:&quot;2&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"posts.classic\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid\" role=\"list\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3493 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3493\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"246\" height=\"109\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" class=\"attachment-medium size-medium wp-image-3484\" alt=\"\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3493\" >\n\t\t\t\tProses Setup Kolaborasi Astro Dengan shopify\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t5 Juli 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3493\" aria-label=\"Read more about Proses Setup Kolaborasi Astro Dengan shopify\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3487 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3487\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"246\" height=\"138\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-94.png\" class=\"attachment-medium size-medium wp-image-3488\" alt=\"\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3487\" >\n\t\t\t\tMenuju Era Headless Commerce: Kolaborasi Maut Astro JS dan E-Commerce Modern\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t5 Juli 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Dunia e-commerce sedang mengalami pergeseran paradigma yang besar. Jika dulu<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3487\" aria-label=\"Read more about Menuju Era Headless Commerce: Kolaborasi Maut Astro JS dan E-Commerce Modern\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3477 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3477\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"112\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-28T141637.136-300x112.jpg\" class=\"attachment-medium size-medium wp-image-3479\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-28T141637.136-300x112.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-28T141637.136.jpg 367w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3477\" >\n\t\t\t\tKolaborasi Astro JS dan Sanity.io: Sinergi Sempurna untuk Website Modern yang Super Cepat\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t28 Juni 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Dalam era pengembangan web modern, arsitektur Jamstack dan pemisahan antara<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3477\" aria-label=\"Read more about Kolaborasi Astro JS dan Sanity.io: Sinergi Sempurna untuk Website Modern yang Super Cepat\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3472 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3472\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"168\" height=\"299\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\" class=\"attachment-medium size-medium wp-image-3455\" alt=\"\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3472\" >\n\t\t\t\tProsedur Kerja Pembuatan Website Dengan Astro JS\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t28 Juni 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>## Mengenal Astro JS: Solusi Modern untuk Website Super Cepat<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3472\" aria-label=\"Read more about Prosedur Kerja Pembuatan Website Dengan Astro JS\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3467 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3467\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"251\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/11\/Too-Online-300x251.png\" class=\"attachment-medium size-medium wp-image-1257\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/11\/Too-Online-300x251.png 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/11\/Too-Online-768x644.png 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/11\/Too-Online.png 940w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3467\" >\n\t\t\t\tWebsite E-Commerce: Memilih Astro atau WordPress, Mana yang Lebih Cocok untuk Bisnis Online?\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t27 Juni 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Membangun website e-commerce saat ini bukan hanya soal membuat katalog<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3467\" aria-label=\"Read more about Website E-Commerce: Memilih Astro atau WordPress, Mana yang Lebih Cocok untuk Bisnis Online?\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-3461 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=3461\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"194\" height=\"259\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T131638.974.jpg\" class=\"attachment-medium size-medium wp-image-3463\" alt=\"\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=3461\" >\n\t\t\t\tMengenal Komponen Card Di Astro\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t27 Juni 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Memahami komponen di Astro JS sebenarnya sangat mudah jika kita<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3461\" aria-label=\"Read more about Mengenal Komponen Card Di Astro\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di&hellip;&nbsp;<a href=\"https:\/\/regarcomm.com\/?p=3461\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mengenal Komponen Card Di Astro<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tak-berkategori"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regarcomm.com\/?p=3493\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development\" \/>\n<meta property=\"og:description\" content=\"Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di&hellip;&nbsp;Mengenal Komponen Card Di Astro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regarcomm.com\/?p=3493\" \/>\n<meta property=\"og:site_name\" content=\"Regarcomm Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-05T04:51:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-05T04:57:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"246\" \/>\n\t<meta property=\"og:image:height\" content=\"109\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ewin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:site\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ewin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#article\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493\"},\"author\":{\"name\":\"Ewin\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\"},\"headline\":\"Proses Setup Kolaborasi Astro Dengan shopify\",\"datePublished\":\"2026-07-05T04:51:38+00:00\",\"dateModified\":\"2026-07-05T04:57:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493\"},\"wordCount\":442,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/regarcomm.com\/?p=3493#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493\",\"url\":\"https:\/\/regarcomm.com\/?p=3493\",\"name\":\"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"datePublished\":\"2026-07-05T04:51:38+00:00\",\"dateModified\":\"2026-07-05T04:57:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regarcomm.com\/?p=3493\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\",\"url\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"contentUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"width\":246,\"height\":109},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/regarcomm.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Proses Setup Kolaborasi Astro Dengan shopify\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regarcomm.com\/#website\",\"url\":\"https:\/\/regarcomm.com\/\",\"name\":\"Regarcomm Development\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regarcomm.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/regarcomm.com\/#organization\",\"name\":\"Regarcomm Development\",\"url\":\"https:\/\/regarcomm.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"contentUrl\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"width\":1280,\"height\":1073,\"caption\":\"Regarcomm Development\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\",\"https:\/\/x.com\/Erwinbinjai\",\"https:\/\/instagram.com\/inerwinsyah\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\",\"name\":\"Ewin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"caption\":\"Ewin\"},\"sameAs\":[\"http:\/\/localhost\/regarcomm\"],\"url\":\"https:\/\/regarcomm.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","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:\/\/regarcomm.com\/?p=3493","og_locale":"id_ID","og_type":"article","og_title":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","og_description":"Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di&hellip;&nbsp;Mengenal Komponen Card Di Astro","og_url":"https:\/\/regarcomm.com\/?p=3493","og_site_name":"Regarcomm Development","article_publisher":"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","article_published_time":"2026-07-05T04:51:38+00:00","article_modified_time":"2026-07-05T04:57:22+00:00","og_image":[{"width":246,"height":109,"url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","type":"image\/jpeg"}],"author":"Ewin","twitter_card":"summary_large_image","twitter_creator":"@Erwinbinjai","twitter_site":"@Erwinbinjai","twitter_misc":{"Ditulis oleh":"Ewin","Estimasi waktu membaca":"8 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/regarcomm.com\/?p=3493#article","isPartOf":{"@id":"https:\/\/regarcomm.com\/?p=3493"},"author":{"name":"Ewin","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912"},"headline":"Proses Setup Kolaborasi Astro Dengan shopify","datePublished":"2026-07-05T04:51:38+00:00","dateModified":"2026-07-05T04:57:22+00:00","mainEntityOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3493"},"wordCount":442,"commentCount":0,"publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/regarcomm.com\/?p=3493#respond"]}]},{"@type":"WebPage","@id":"https:\/\/regarcomm.com\/?p=3493","url":"https:\/\/regarcomm.com\/?p=3493","name":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","isPartOf":{"@id":"https:\/\/regarcomm.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","datePublished":"2026-07-05T04:51:38+00:00","dateModified":"2026-07-05T04:57:22+00:00","breadcrumb":{"@id":"https:\/\/regarcomm.com\/?p=3493#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regarcomm.com\/?p=3493"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage","url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","contentUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","width":246,"height":109},{"@type":"BreadcrumbList","@id":"https:\/\/regarcomm.com\/?p=3493#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/regarcomm.com\/"},{"@type":"ListItem","position":2,"name":"Proses Setup Kolaborasi Astro Dengan shopify"}]},{"@type":"WebSite","@id":"https:\/\/regarcomm.com\/#website","url":"https:\/\/regarcomm.com\/","name":"Regarcomm Development","description":"","publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regarcomm.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/regarcomm.com\/#organization","name":"Regarcomm Development","url":"https:\/\/regarcomm.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/","url":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","contentUrl":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","width":1280,"height":1073,"caption":"Regarcomm Development"},"image":{"@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","https:\/\/x.com\/Erwinbinjai","https:\/\/instagram.com\/inerwinsyah"]},{"@type":"Person","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912","name":"Ewin","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","caption":"Ewin"},"sameAs":["http:\/\/localhost\/regarcomm"],"url":"https:\/\/regarcomm.com\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3493"}],"version-history":[{"count":4,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493\/revisions"}],"predecessor-version":[{"id":3497,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493\/revisions\/3497"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/media\/3484"}],"wp:attachment":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}