# Tambahkan commerce ke situs yang sudah Anda miliki.

> Satu tag script async mengubah situs apa pun menjadi toko. Berfungsi di WordPress, Webflow, Ghost, Carrd, Framer, HTML statis, React / Next.js / Vue. Tanpa bangun ulang, tanpa plugin, tanpa ganti tema.

Satu tag script async, beberapa container HTML, dan situs Anda yang sudah ada menjadi toko. Berfungsi di WordPress, Webflow, Ghost, Carrd, Framer, HTML biasa, atau CMS apa pun yang memungkinkan Anda menempelkan tag script. Tanpa bangun ulang. Tanpa plugin. Tanpa ganti tema.

[Mulai Uji Coba Gratis](https://app-v3.shoprocket.io/signup?lang=id)[Lihat snippet-nya](#the-snippet)

Uji Coba Gratis 14 Hari

Tanpa Kartu Kredit

Biaya Platform 0%

Berfungsi di paket apa pun

1

Baris untuk menanamkan

Apa saja

Situs web

Lengkap

Keranjang & checkout

0%

Biaya platform

● Masalahnya

## Anda punya situs. Anda ingin berjualan di situ. Bukan membangunnya ulang.

Kebanyakan platform commerce ingin Anda mengganti situs Anda dengan situs mereka. WordPress minta WooCommerce. Wix mau Wix Stores. Squarespace mau Squarespace Commerce. Shopify mau semuanya di stack mereka. Anda ingin toko, bukan proyek migrasi.

01

### Situs Anda sudah berfungsi.

Brand, konten, blog, animasi, SEO Anda. Pekerjaan yang sudah Anda lakukan. Tidak ada yang perlu berubah hanya untuk menambah checkout.

02

### CMS Anda bukan masalahnya.

WordPress baik-baik saja. Webflow indah. Ghost sempurna untuk konten. Carrd cepat. Tidak satu pun dari mereka seharusnya memaksa Anda pergi hanya karena tidak menangani commerce secara native.

03

### Toko Anda seharusnya berada di dalam situs Anda.

Bukan di subdomain terpisah, bukan pengalihan ke keranjang hosted. Halaman produk milik Anda, checkout terjadi di dalamnya, dan pelanggan tidak pernah pergi.

● Cara kerjanya

## Tiga baris HTML. Empat jenis widget.

Tempel script loader sekali. Letakkan container HTML di tempat Anda ingin commerce muncul. Widget otomatis terpasang di setiap container yang ditemukannya saat render.

Pemasangan

### Satu tag script. Async. Tidak memblokir.

Tag script ditaruh di head situs, atau tepat sebelum tag penutup body, atau di templat header CMS Anda. Dimuat secara async, jadi tidak pernah memblokir halaman Anda dari render. Saat dimuat, script memindai halaman untuk elemen HTML mana pun dengan atribut data-shoprocket dan memasang widget yang cocok di sana. Jika tidak ada elemen widget di halaman, script tetap memulai keranjang mengambang sehingga tombol toko di bagian lain situs Anda tetap berfungsi.

- ✓ Pemuatan async, tanpa dampak pada LCP atau CLS
- ✓ Otomatis memasang setiap elemen data-shoprocket di halaman
- ✓ Keranjang mengambang aktif di seluruh situs, bahkan di halaman tanpa widget

● Jenis widget

## Empat bentuk, semuanya di halaman yang sama.

Pilih yang Anda butuhkan di tempat yang Anda butuhkan. Beranda bisa punya widget produk unggulan, halaman toko khusus bisa punya katalog lengkap, dan artikel bisa punya embed satu produk inline. Semua di situs yang sama, semua dari toko yang sama.

01

### Katalog.

Grid produk lengkap dengan filter, kategori, dan pencarian. Letakkan di halaman /shop Anda dan pelanggan menjelajahi seluruh toko Anda.

02

### Produk.

Satu kartu produk dengan harga, varian, dan tombol tambah ke keranjang. Letakkan inline di dalam artikel atau di landing page di samping penawaran Anda.

03

### Keranjang.

Keranjang itu sendiri, sebagai widget halaman. Atau biarkan keranjang mengambang menanganinya di seluruh situs, script memulainya secara otomatis.

04

### Checkout.

Keranjang, alamat, pengiriman, dan ringkasan pesanan semuanya di dalam halaman Anda. Langkah pembayaran terakhir mengalihkan ke pemroses demi kepatuhan PCI dan mengembalikan pelanggan ke situs Anda.

● Berfungsi di tempat Anda berada

## Jika mengizinkan tag script, Shoprocket bisa ditanamkan.

Diuji dan didokumentasikan secara khusus untuk builder di bawah ini. Dalam praktiknya, di mana pun Anda bisa menempelkan HTML, bisa berfungsi.

01

### WordPress.

Self-hosted atau WordPress.com. Tema apa pun, page builder apa pun (Elementor, Gutenberg, Divi, dll.). Tanpa WooCommerce. Tanpa plugin yang harus dirawat.

02

### Webflow.

Gunakan elemen Embed di tempat Anda ingin toko. Pertahankan paket CMS Webflow Anda, tanpa perlu upgrade Ecommerce.

03

### Ghost.

Kartu HTML di postingan atau halaman mana pun. Ghost ideal untuk kreator yang merilis konten berdampingan dengan produk.

04

### Carrd, Framer, Notion.

Builder satu halaman dan berfokus desain. Berfungsi dengan embed Carrd Pro Standard, komponen kode Framer, dan Notion lewat wrapper Super.so / HeyNotion.

05

### HTML statis & JAMstack.

Cloudflare Pages, Netlify, Vercel, HTML statis biasa, build Jekyll / Hugo / Astro / 11ty apa pun. Tempel snippet dan jalan.

06

### React, Next.js, Vue, Svelte.

Pasang paket npm \`@shoprocket/widget\` untuk integrasi framework yang ketat. Impor komponen, pasang di tempat Anda ingin toko.

● Performa

## Core Web Vitals Anda tetap hijau.

Inti dari commerce yang bisa ditanam di mana saja adalah situs Anda tetap berperilaku seperti situs Anda.

Dalam angka

### Script async, konfigurasi ter-cache, pemasangan cepat.

Script loader dikirim secara async, jadi LCP tidak tersentuh. Konfigurasi toko diambil dari API kami dan di-cache di edge (TTL 1 jam), jadi tampilan halaman berulang tidak melakukan query ulang. Widget dirender ke container yang sudah dicadangkan, jadi tidak ada pergeseran layout. Situs yang hijau di Lighthouse sebelum embed tetap hijau sesudahnya.

- ✓ Tag script async: nol dampak pada LCP atau CLS
- ✓ Konfigurasi toko di-cache di edge, disajikan dari CDN pada tampilan berulang
- ✓ Container pemasangan yang dicadangkan berarti tanpa cumulative layout shift

● Pertanyaan umum

## Pertanyaan seputar embed, terjawab.

Yang ditanyakan orang sebelum menempelkan snippet.

Di mana keranjang dan checkout sebenarnya berjalan? +

Keranjang, alamat, dan pilihan pengiriman semuanya berjalan di dalam embed di halaman Anda, tidak ada yang meninggalkan situs Anda selama bagian menjelajah dan memilih. Langkah pembayaran terakhir mengalihkan ke pemroses pembayaran yang terhubung (Stripe, PayPal) demi kepatuhan PCI dan mengembalikan pelanggan ke situs Anda untuk konfirmasi pesanan. Begitulah cara kerja setiap alur pembayaran modern; berpura-pura sebaliknya tidak jujur.

Bisakah saya punya beberapa widget di halaman yang sama? +

Ya. Loader memindai halaman untuk setiap elemen dengan atribut data-shoprocket dan memasang masing-masing. Satu halaman bisa punya carousel produk unggulan, grid katalog di bawahnya, dan checkout inline di tempat lain. Semuanya dari toko yang sama.

Apakah ini memperlambat situs saya? +

Tidak ada dampak berarti. Script loader bersifat async, jadi tidak memblokir halaman Anda dari render. Konfigurasi toko di-cache di edge, jadi pengunjung berulang tidak melakukan query ulang. Widget terpasang di container yang dicadangkan, jadi tidak ada cumulative layout shift. Jika situs Anda lolos Core Web Vitals sebelumnya, tetap lolos sesudahnya.

Bagaimana jika saya memakai React / Next.js / Vue? +

Pasang paket npm \`@shoprocket/widget\` secara langsung. Impor komponen, pasang di tempat Anda butuh toko, berikan props untuk konfigurasi. Memberi kontrol yang lebih rinci daripada embed lewat tag script.

Bagaimana dengan Wix dan Squarespace? +

Squarespace berfungsi baik. Gunakan elemen Code Block di paket Core atau lebih tinggi, tempel snippet, selesai. Wix mengisolasi setiap embed pihak ketiga dalam iframe yang merusak checkout, jadi kami tidak merekomendasikannya; jawaban jujur untuk pengguna Wix adalah etalase hosted Shoprocket atau pindah ke builder yang mengizinkan embed sungguhan. Lihat halaman Wix khusus kami untuk tiga jalur ke depan.

Bisakah saya memakai domain saya sendiri? +

Ya. Widget berjalan di domain apa pun tempat halaman host berada. Produk, keranjang, dan checkout Anda semuanya berada di situs-anda.com. Tanpa subdomain Shoprocket terpisah, tanpa pengalihan. Pelanggan tidak sadar ada pihak ketiga di balik lapisan commerce.

Bagaimana cara menyesuaikan tampilan widget? +

Widget mewarisi CSS situs Anda untuk konteks layout (lebar container, dasar tipografi). Untuk UI commerce-nya sendiri, pilih dari 40+ tema plus skema warna terang / gelap lewat atribut data pada elemen pemasangan. Untuk kustomisasi lebih dalam, atur variabel CSS di stylesheet situs Anda dan widget akan mengambilnya.

Bagaimana jika saya punya beberapa konfigurasi embed untuk halaman berbeda? +

Buat beberapa konfigurasi embed di dashboard Shoprocket Anda, masing-masing dengan ID, tema, dan set fitur sendiri. Arahkan setiap container HTML ke ID embed yang sesuai. Beranda bisa menampilkan embed produk unggulan yang ringkas sementara halaman toko khusus memakai embed katalog lengkap, semua di toko yang sama.

Apakah Shoprocket benar-benar berbiaya platform 0%? +

Ya. Pemroses pembayaran Anda (Stripe, PayPal, dll.) tetap mengenakan biaya pemrosesan standar mereka, itu biaya memindahkan uang, tetapi Shoprocket tidak menambahkan apa pun di atasnya. Biaya platform 0% berlaku untuk setiap paket, termasuk setiap pemasangan embed-di-mana-saja.

## Situs Anda. Kini dengan commerce.

Uji coba gratis 14 hari. Tanpa kartu kredit. Tempel snippet, luncurkan toko, pertahankan situs.

[Mulai Uji Coba Gratis](https://app-v3.shoprocket.io/signup?lang=id)[Hubungi kami](https://v3.shoprocket.io/id/kontak.md)

---

- HTML version: https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun
- Language: Bahasa Indonesia (id)
- Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)