# Cara menambahkan ecommerce ke situs web mana pun (tanpa ganti platform)

> Tiga pola integrasi untuk menambahkan commerce ke situs yang sudah Anda miliki. Kapan masing-masing cocok, apa yang berubah di situs Anda, dan kapan ganti platform benar-benar layak.

Ryan Badger - 2 Juni 2023 - 4 menit baca

## Apa sebenarnya maksud orang dengan "mengintegrasikan ecommerce"

Anda punya situs web. Situs pemasaran, portofolio, blog, mungkin hasil bangun Webflow atau Squarespace. Berfungsi baik. Secara visual sesuai keinginan Anda. Tetapi sekarang Anda perlu menjual sesuatu darinya.

Langkah yang salah adalah membuangnya dan membangun ulang di Shopify. Langkah yang benar bergantung pada tiga hal:

1. **Apa yang Anda jual.** Satu produk atau katalog? Fisik atau digital? Langganan atau sekali beli?
2. **Di atas apa situs Anda berjalan.** Selama Anda bisa menempelkan tag skrip, pilihan terbuka lebar.
3. **Seberapa banyak pengalaman checkout yang ingin Anda miliki sendiri.**

Artikel ini menguraikan seperti apa "integrasi" sebenarnya di 2026 untuk masing-masing sumbu itu. Tidak perlu ganti platform kalau Anda memilih dengan benar.

## Tiga pola integrasi yang nyata

### Pola 1: Alihkan ke checkout hosting

Yang paling sederhana. Situs Anda punya tombol beli. Klik tombol, pelanggan meninggalkan situs Anda menuju checkout (Stripe Payment Links, Gumroad, Payhip, Lemonsqueezy). Pembayaran terjadi di domain mereka, lalu mereka kembali ke halaman terima kasih Anda.

**Kelebihan:** tanpa integrasi JS, berfungsi di situs web mana pun, perawatan rendah. **Kekurangan:** putusnya UX (meninggalkan situs Anda) merugikan konversi. Branding tidak konsisten. Alur keranjang terbengkalai dan analitik jadi lebih sulit.

Cocok untuk: kreator produk tunggal, volume rendah, keengganan teknis menanam apa pun.

### Pola 2: Tanamkan widget di halaman

Widget embed berjalan di dalam situs Anda. Pelanggan tidak pernah pergi. Keranjang, detail produk, checkout semuanya dirender di dalam halaman Anda.

Inilah yang ditawarkan Shoprocket, Snipcart, Ecwid, dan platform serupa.

Integrasi tipikal:

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Satu baris, satu tempel, selesai. Widget otomatis sinkron dengan dasbor Anda: produk, harga, gambar, aturan pajak, opsi pengiriman, metode pembayaran. Pelanggan tetap di domain Anda dari "menjelajah" sampai "terima kasih atas pesanan Anda".

**Kelebihan:** UX konsisten, kendali brand, lebih sedikit kebocoran konversi. **Kekurangan:** situs Anda kini punya ketergantungan JS. Kebanyakan ringan (~20-50KB), tetapi tidak nol.

Cocok untuk: situs mana pun yang menginginkan toko sungguhan tanpa ganti platform.

### Pola 3: Integrasi headless (API)

Anda membangun UI sendiri dan memanggil API commerce (Stripe API, Shopify Storefront API, BigCommerce, Commercetools) untuk mekanika commerce-nya. Sepenuhnya kustom, sepenuhnya milik Anda.

**Kelebihan:** kendali penuh, tanpa kompromi visual, bisa diskalakan ke alur kustom. **Kekurangan:** kerja rekayasa yang nyata. Anda membangun checkout, status keranjang, perhitungan pajak, sinkronisasi inventaris, webhook. Berbulan-bulan, bukan hitungan menit.

Cocok untuk: tim dengan developer khusus commerce purnawaktu, atau produk yang tidak bisa dipasangi widget siap pakai.

## Pohon keputusan

Mulai dengan "apakah Anda ingin pelanggan meninggalkan situs Anda":

- **Ya**: Pola 1 (tautan checkout hosting). Stripe Payment Links atau Gumroad, 10 menit untuk menyiapkan.
- **Tidak**: lanjut ke pertanyaan berikutnya.

Apakah Anda ingin menulis kode kustom?

- **Ya, kami punya kapasitas developer**: Pola 3 (headless).
- **Tidak, kami ingin yang siap pakai**: Pola 2 (widget embed). Di sinilah kebanyakan situs berakhir.

Untuk Pola 2, keputusan berikutnya adalah pilihan platform. Itu dibahas di artikel terpisah kami: [perbandingan platform keranjang belanja embed](https://v3.shoprocket.io/id/blog/perbandingan-platform-keranjang-belanja-embed-snipcart-ecwid-gumroad-payhip-shoprocket.md).

## Seperti apa integrasi Pola 2 yang nyata di platform umum

### WordPress

Letakkan snippet embed ke blok HTML Kustom (editor blok) atau widget teks (sidebar klasik). Tidak perlu memasang plugin.

### Squarespace

Tambahkan Code Block di halaman mana pun. Tempel. Widget menghormati lebar dan jarak tema Squarespace Anda.

### Webflow

Elemen Embed → tempel. Ekspor statis Webflow tetap menyertakan embed saat publikasi.

### Framer

Elemen embed → tempel. Alat dev Framer memudahkan menaruh snippet di bagian tertentu.

### Carrd

Komponen kode kustom (fitur paket berbayar). Situs satu halaman dengan tab toko, mudah.

### Notion

Pakai halaman Notion publik sebagai situs Anda, embed lewat layanan seperti Super atau Potion, lalu tempel snippet-nya. Berubah menjadi toko sungguhan.

### HTML statis / Jekyll / Hugo / 11ty

Tempel snippet ke templat mana pun yang merender halaman toko Anda. Tidak ada yang lain.

## Apa yang berubah di situs Anda setelah integrasi

Lebih sedikit dari dugaan Anda.

- Halaman Anda yang ada tetap seperti semula. Tidak perlu mengedit tema.
- Skrip dimuat async, jadi kecepatan halaman praktis tidak berubah (skor Lighthouse tetap stabil).
- Produk, harga, dan inventaris berada di dasbor commerce Anda, bukan CMS Anda.
- Data pelanggan (pesanan, email, alamat) mengalir ke platform commerce. CMS Anda tidak perlu menangani semua itu.

Yang TIDAK perlu Anda lakukan:

- Membangun ulang situs Anda
- Memasang plugin CMS
- Memigrasi konten
- Mempekerjakan developer
- Membeli domain baru

> **Tips:** Uji widget di halaman staging dulu. Seharusnya tidak berkonflik dengan apa pun, tetapi layak diverifikasi terhadap tema spesifik Anda sebelum mendorongnya ke halaman toko produksi.

## Kapan sebenarnya harus ganti platform

Kadang jawabannya MEMANG "pindah ke platform commerce penuh". Tandanya:

- Anda menghasilkan $100 rb+/bulan dan tugas inti situs Anda sudah menjadi berjualan, bukan brand.
- Anda punya kebutuhan integrasi POS (ritel fisik + online).
- Katalog produk Anda >1.000 SKU dengan pembaruan terus-menerus.

Pada skala itu, Shopify Plus atau sejenisnya mulai balik modal. Untuk kebanyakan situs independen di bawah ambang itu, embed lebih murah, lebih cepat, dan mempertahankan situs yang sudah Anda miliki.

## Ringkasnya

- **Tautan checkout hosting**: tercepat, memutus UX saat pembayaran. Bagus untuk produk tunggal.
- **Widget embed**: pelanggan tetap di situs Anda, tanpa ganti platform. Default yang baik.
- **API headless**: bangun sendiri, berbulan-bulan kerja. Hanya layak pada skala besar.

[Coba embed Shoprocket di situs Anda yang sudah ada](https://app-v3.shoprocket.io/signup). Uji coba gratis, tanpa kartu. Harga: [mulai $29](https://v3.shoprocket.io/id/harga.md), tanpa biaya transaksi di setiap paket.

---

- HTML version: https://v3.shoprocket.io/id/blog/cara-menambahkan-ecommerce-ke-situs-web-mana-pun-tanpa-ganti-platform
- Language: Bahasa Indonesia (id)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-zu-jeder-website-hinzufuegen-ohne-plattformwechsel.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [English](https://v3.shoprocket.io/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Español](https://v3.shoprocket.io/es/blog/anadir-ecommerce-a-cualquier-web-sin-cambiar-de-plataforma.md), [Français](https://v3.shoprocket.io/fr/blog/ajouter-ecommerce-a-un-site-sans-changer-de-plateforme.md), [עברית](https://v3.shoprocket.io/he/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Italiano](https://v3.shoprocket.io/it/blog/aggiungere-ecommerce-a-qualsiasi-sito-senza-cambiare-piattaforma.md), [日本語](https://v3.shoprocket.io/ja/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/kaip-prideti-el-prekyba-prie-bet-kurios-svetaines-nekeiciant-platformos.md), [Norsk](https://v3.shoprocket.io/nb/blogg/legg-nettbutikk-til-et-hvilket-som-helst-nettsted-uten-a-bytte-plattform.md), [Nederlands](https://v3.shoprocket.io/nl/blog/webshop-toevoegen-aan-elke-website-zonder-te-verhuizen.md), [Polski](https://v3.shoprocket.io/pl/blog/jak-dodac-e-commerce-do-dowolnej-strony-bez-zmiany-platformy.md), [Português](https://v3.shoprocket.io/pt/blog/como-adicionar-ecommerce-a-qualquer-site-sem-trocar-de-plataforma.md), [Română](https://v3.shoprocket.io/ro/blog/cum-adaugi-ecommerce-pe-orice-site-fara-sa-schimbi-platforma.md), [Русский](https://v3.shoprocket.io/ru/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [ไทย](https://v3.shoprocket.io/th/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Türkçe](https://v3.shoprocket.io/tr/blog/platform-degistirmeden-web-sitesine-eticaret-ekleme.md), [中文](https://v3.shoprocket.io/zh/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md)