> For the complete documentation index, see [llms.txt](https://docs.shoppego.my/tutorials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shoppego.my/tutorials/ms/express-checkout/page-builder.md).

# Page Builder

Sebelum anda ikuti langkah penetapan ini pastikan anda:

* Sudah **mempunyai produk** yang anda ingin buat untuk **express checkout.**
* Sudah **mempunyai pages yang tersendiri** untuk anda masukkan **fungsi express checkout.**
* Sudah **langgan plan Shoppego&#x20;**<mark style="color:red;">**Standard**</mark>**&#x20;ke-atas.**

## Dapatkan Produk ID

1. Log masuk ke akaun Shoppego anda

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-b853fc0189b34fb1d3990f5b1f53fa71deb9d384%2FlCN7aw3FznaFFoOAyya2.jpg?alt=media)

2. Klik pada **Products**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-ed85fb87f9932975c9fe432eb80476f0c54bfd3b%2F3QYpKlTI5mdyrdLeiYts.jpg?alt=media)

3\. Klik pada Produk yang anda ingin masukkan fungsi Express Checkout tersebut.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-26a14abc50a6d860a5959ebc9ba339513ccd4228%2Fi3S3XPC8L5SjJS1W4hLs.jpg?alt=media)

4\. Klik pada **Express checkout**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-63331b50a798a09959bd25f4266257564261b27b%2Fbqs406u5zwylQ0lJnPQ6.jpg?alt=media)

5\. Pilih variant yang anda ingin customer anda terus beli dan simpan link tersebut

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-2bff2afddf3c01414e4255d589dda2a89fb84b60%2FiA6m613XvwBy9vep3yLN.jpg?alt=media)

6\. Pastikan anda simpan terlebih dahulu URL link tersebut kerana ia akan digunakan untuk penetapan pada page builder anda.

## **Penetapan pada Page Builder**

1\. Log masuk akaun Shoppego anda

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-b853fc0189b34fb1d3990f5b1f53fa71deb9d384%2FlCN7aw3FznaFFoOAyya2.jpg?alt=media)

2\. Klik pada **Online Store** -> **Pages**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-2f8191bbc0c8e548025e830d2511fd6b37e22bdb%2FYW5MKHAFthkHAX6ApmOw.jpg?alt=media)

3\. Klik pada butang **Edit** pada pages yang anda ingin masukkan fungsi Express Checkout tersebut.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-ed38d60c608e94ef30335b39b12ec99881aab367%2FE1metuuRouovYFNz12pX.png?alt=media)

4\. Klik pada **Edit with Builder**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-fe2a021936f9cfe048d02f49e313c938ec7bebef%2F6Ciuq7MNuHo6Vk382w6t.png?alt=media)

5\. Seterusnya, anda akan dibawa ke halaman page builder anda. Untuk penetapan express checkout tersebut, anda boleh **drag** **element Button** tersebut **ke ruangan yang disediakan**.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-082a2d0eb2f3a29ecb18dc96b0850723ff3c2eea%2F-MCtu97i3dGXrIXrW7bZ.png?alt=media)

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-a10d03cd8b353107f0fc754c810ca5987f0273d7%2F-MCtwYtM8tMRsG7tT1j4.png?alt=media)

6\. Klik pada **element Button** tersebut yang anda baru lepas drag dan masukkan ke dalam body content anda. Taip text yang anda inginkan supaya terpapar pada element Button tersebut.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-7f618390d54b619e49b3d5f01d749ad907ff4bca%2F-MCtuWxn71xRmG15Uzxb.png?alt=media)

7\. Dibahagian URL anda boleh masukkan **Url yang anda baru dapatkan dari langkah 1**

(Contoh: <https://mirfaith.myshoppegram.com/cart/57085:1>)

8\. Pada **ruangan Target** anda boleh pilih option **Same Tab** atau **New Tab** manakala, pada ruangan setting lain anda boleh setting mengikut design anda.

9\. Setelah selesai anda boleh klik **Preview** untuk test button tersebut.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-90fbdf10eb62785767e8d1468842944e42e5a94d%2F-MIRwulSdjAgIV067RsI.jpg?alt=media)

## Info Tambahan

### Checkout 3 Produk

1. Jika anda ingin membuat pelanggan anda **terus checkout** dengan **3 produk terus**, anda boleh **asingkan setiap produk variant ID** dengan **simbol koma**.\
   \
   **Sebagai contoh** : /cart/**57085:**<mark style="color:blue;">**1**</mark>**,12345:**<mark style="color:blue;">**2**</mark>**,57779:**<mark style="color:blue;">**3**</mark>

### Kod Diskaun

1. Jika anda ingin pastikan **pelanggan checkout automatik sekali dengan diskaun kod yang anda inginkan**, anda boleh **lakukan penambahan ?discount=\[Kod diskaun anda]** pada URL express checkout anda.\
   \
   Sebagai contoh kod diskaun anda ialah "**FREESHIPPING**":\
   /cart/57085:1,12345:2,57779:3<mark style="color:blue;">**?discount=FREESHIPPING**</mark>

{% hint style="info" %}
**\*\*Maksimum hanya&#x20;**<mark style="color:red;">**3 variant ID(yang valid)**</mark> sahaja yang boleh dibaca oleh sistem kami.

\*\* **Nombor selepas&#x20;**<mark style="color:red;">**titik bertindih**</mark> tersebut merujuk kepada <mark style="color:blue;">**quantity barang yang dibeli**</mark>.
{% endhint %}