# Sematkan Shoprocket di situs web mana pun

> Berjualan dari situs web yang sudah Anda miliki. Buat sematan di Sematan, klik Dapatkan kode, lalu tempel ke halaman Anda di WordPress, Squarespace, Wix, Webflow, atau HTML biasa. Perubahan yang Anda simpan nanti sampai ke semua halaman tanpa tempel ulang.

Pusat Bantuan / Penyematan - Diperbarui 28 Oktober 2026

Sematan menaruh sebagian toko Anda di situs web mana pun: satu produk dengan tombol beli, katalog produk lengkap, kategori Anda, atau kotak pencarian. Anda membuatnya di **Sematan**, klik **Dapatkan kode**, dan tempel kodenya ke halaman Anda. Keranjang dan checkout terbuka langsung di halaman Anda, sehingga pelanggan tidak pernah meninggalkan situs Anda.

Anda hanya perlu menempel kode sekali. Saat Anda mengubah sematan nanti, bahkan beralih ke tata letak lain, semua halaman tempatnya berada diperbarui saat Anda menyimpan.

## Sebelum memulai

- Tambahkan setidaknya satu produk aktif. Sematan untuk satu produk membutuhkan produk untuk dijual.
- Anda harus bisa mengedit situs web Anda dan menambahkan blok kode atau HTML ke halaman. Catatan untuk setiap pembuat situs ada di bawah.

## Langkah 1 (opsional, disarankan): Tambahkan Shoprocket ke setiap halaman situs Anda

Di bagian atas **Sematan** ada kartu bernama **Tambahkan Shoprocket ke setiap halaman situs Anda**. Kartu ini berisi satu baris kode untuk header situs Anda. Dengan baris ini terpasang, keranjang melayang dan live chat Anda berfungsi di setiap halaman situs Anda, bukan hanya halaman yang memiliki sematan, dan sematan apa pun yang Anda tambahkan nanti langsung berfungsi.

1. Di dasbor Anda, buka **Sematan**.
2. Di kartu **Tambahkan Shoprocket ke setiap halaman situs Anda**, klik **Salin**.
3. Pilih pembuat situs Anda dari tab di bawah kode (**HTML**, **WordPress**, **Squarespace**, **Wix**, atau **Webflow**) dan ikuti dua langkahnya untuk menempel baris itu ke header situs Anda.
4. Buka halaman mana pun di situs Anda. Status kartu berubah dari **Belum terdeteksi** menjadi **Terhubung**.

Anda boleh melewati langkah ini. Kode setiap sematan sudah menyertakan baris yang sama, jadi sematan berfungsi sendiri di halaman mana pun.

## Langkah 2: Buat sematan

1. Di **Sematan**, klik **Sematan baru**.
2. Di bawah **Yang ditampilkan**, pilih satu: **Satu produk**, **Katalog produk**, **Kategori**, atau **Pencarian**.
3. Pilih tata letak:
   - **Satu produk**: **Tombol**, **Ringkas**, **Kartu**, **Unggulan**, atau **Detail lengkap**. Lalu pilih produknya di bawah **Produk yang mana?**
   - **Katalog produk**: **Grid**, **Karusel**, atau **Daftar**. Di bawah **Produk yang mana saja?** pilih **Semua produk**, **Satu kategori**, atau **Dipilih sendiri**.
   - **Kategori**: **Ubin**.
   - **Pencarian**: **Kotak pencarian** atau **Ikon pencarian**.
4. Klik **Lanjutkan**.

Setiap tata letak adalah sematan yang sama dengan pengaturan berbeda, jadi Anda bisa berganti tata letak nanti di editor dan kode yang Anda tempel tetap sama.

![Layar Sematan baru dengan Katalog produk terpilih dan tata letak Grid, Karusel, dan Daftar untuk dipilih](https://v3.shoprocket.io/img/help/embed-on-any-website/new-embed-chooser.webp)

## Langkah 3: Sesuaikan

Editor menampilkan pratinjau langsung yang bisa Anda klik seperti pembeli: tambah ke keranjang, buka produk, dan checkout. Ubah apa yang ditampilkan sematan di tab **Sematan ini**. Tab **Desain toko** mengatur warna dan font untuk seluruh toko Anda, sehingga semua sematan dan keranjang melayang Anda serasi.

Sematan mendapat nama di awal, seperti "Products · Grid". Anda bisa mengganti namanya kapan saja.

Jika sudah puas, klik **Simpan & dapatkan kode**.

## Langkah 4: Salin kode dan tempel ke situs Anda

Setelah menyimpan, panel **Dapatkan kode** terbuka. Tampilannya seperti ini:

```html
<!-- Shoprocket: Product catalog -->
<script src="https://.../loader.js" data-pk="pk_..."></script>
<div data-shoprocket="embed" data-embed-id="emb_..."></div>
```

Selalu salin kode milik Anda dengan tombol, jangan pernah mengetik ulang. Baris pertama menamai sematan, skrip memuat Shoprocket untuk toko Anda, dan baris terakhir adalah tempat sematan muncul.

![Panel Dapatkan kode dengan tab pembuat situs, kode sematan, dan tombol Salin kode](https://v3.shoprocket.io/img/help/embed-on-any-website/get-code.webp)

1. Klik **Salin kode**.
2. Pilih pembuat situs Anda dari tab di panel dan tempel kode di tempat sematan harus muncul:
   - **HTML**: tempel kode di tempat sematan harus muncul. Baris skrip hanya perlu ada di halaman sekali, berapa pun sematan di dalamnya.
   - **WordPress**: di editor blok, tambahkan blok **HTML Kustom** di tempat sematan harus berada. Tempel kode dan perbarui halaman. Di WordPress.com, skrip memerlukan paket yang mengizinkan plugin.
   - **Squarespace**: edit halaman dan tambahkan blok **Kode** di tempat sematan harus berada. Tempel kode, biarkan tampilan disetel ke HTML, lalu simpan.
   - **Wix**: di editor, pilih **Tambah**, lalu **Kode sematan**, lalu **Sematkan HTML**. Tempel kode ke dalam kotak dan ubah ukurannya agar pas. Wix menampilkannya dalam bingkai, jadi beri ruang untuk keranjang.
   - **Webflow**: seret elemen **Code Embed** ke tempat sematan harus berada. Tempel kode, simpan, dan publikasikan situs.

Jika Anda sudah menambahkan Shoprocket ke header situs di Langkah 1, halaman hanya memerlukan baris terakhir kode, yang diawali `<div`.

Untuk mendapatkan kodenya lagi nanti, buka sematan dari **Sematan** dan klik **Dapatkan kode**.

**Tidak punya situs web?** Untuk satu produk tanpa opsi, panel **Dapatkan kode** juga menawarkan **Tidak punya situs web? Bagikan tautan beli**. Klik **Salin tautan** dan bagikan di mana saja: tautan itu membuka checkout dengan produk tersebut. Produk dengan opsi membuat tautannya di halaman produknya sendiri, tempat Anda memilih opsinya.

**Menambahkan pencarian ke menu.** Untuk sematan **Pencarian**, panel juga memberi Anda tautan, `#!/search`, untuk ditambahkan sebagai item menu bernama Pencarian di situs Anda. Tautan itu membuka pencarian yang sama di halaman mana pun yang memiliki sematan Shoprocket, tanpa perlu kode.

## Keranjang melayang

Toko Anda memiliki satu keranjang melayang. Ini tombol yang diklik pelanggan untuk membuka keranjang dan checkout, dan muncul di setiap halaman tempat kode Shoprocket Anda berjalan. Di **Sematan**, ini adalah baris pertama, **Keranjang melayang**, bertanda **Selalu aktif**.

Untuk mengubah tampilannya, klik **Keranjang melayang**. Anda bisa mengatur **Posisi** di tepi halaman, **Jarak** dari sisi serta atas atau bawah, apa yang **Tampilkan**, **Bentuk**, **Ukuran**, dan **Ikon** (atau gambar Anda sendiri), serta apakah tautan **Masuk** ditampilkan. Klik **Simpan**. Warna dan fontnya berasal dari desain toko Anda.

## Mengubah atau menghapus sematan

- **Ubah**: buka sematan dari **Sematan**, buat perubahan, dan klik **Simpan**. Setiap halaman yang menampilkannya diperbarui. Tidak perlu kode baru.
- **Hapus dari sebuah halaman**: hapus kodenya dari halaman itu di situs web Anda.
- **Hapus sematan**: di **Sematan**, gunakan tombol hapus di barisnya dan konfirmasi. Lepaskan juga kodenya dari halaman Anda.

## Untuk developer

Panduan developer mencakup setiap opsi pada kode, menampilkan sematan tanpa dasbor, dan JavaScript yang ditawarkan widget: [Sematkan widget](https://v3.shoprocket.io/docs/embedding.md).

## Terkait

- [Apa itu Shoprocket?](https://v3.shoprocket.io/id/bantuan/apa-itu-shoprocket.md)
- [Hubungkan akun Stripe Anda](https://v3.shoprocket.io/id/bantuan/hubungkan-stripe.md)
- [Toko hosting Anda](https://v3.shoprocket.io/id/bantuan/toko-hosting-anda.md)

[Buka Sematan di dasbor Anda](https://app-v3.shoprocket.io/go/embeds)

---

- HTML version: https://v3.shoprocket.io/id/bantuan/sematkan-di-situs-mana-pun
- Language: Bahasa Indonesia (id)
- Also in: [العربية](https://v3.shoprocket.io/ar/help/embed-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/hilfe/auf-jeder-website-einbetten.md), [Ελληνικά](https://v3.shoprocket.io/el/help/embed-on-any-website.md), [English](https://v3.shoprocket.io/help/embed-on-any-website.md), [Español](https://v3.shoprocket.io/es/ayuda/integrar-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/aide/integrer-shoprocket-sur-un-site.md), [עברית](https://v3.shoprocket.io/he/help/embed-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/help/embed-on-any-website.md), [Italiano](https://v3.shoprocket.io/it/aiuto/incorpora-shoprocket-su-qualsiasi-sito.md), [日本語](https://v3.shoprocket.io/ja/help/embed-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/pagalba/iterpkite-shoprocket-i-bet-kuria-svetaine.md), [Norsk](https://v3.shoprocket.io/nb/hjelp/bygg-inn-shoprocket-pa-et-hvilket-som-helst-nettsted.md), [Nederlands](https://v3.shoprocket.io/nl/hulp/shoprocket-op-elke-website-insluiten.md), [Polski](https://v3.shoprocket.io/pl/pomoc/osadz-shoprocket-na-dowolnej-stronie.md), [Português](https://v3.shoprocket.io/pt/ajuda/embed-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/ajutor/incorporeaza-shoprocket-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/help/embed-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/help/embed-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/yardim/web-sitesine-gomme.md), [中文](https://v3.shoprocket.io/zh/help/embed-on-any-website.md)