> 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-cart/page-builder.md).

# Page Builder

{% hint style="info" %}
Sebelum anda ikuti langkah penetapan ini pastikan anda:

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

## 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\. Berdasarkan link url tersebut anda hanya perlu simpan produk variant ID nya sahaja. Sebagai contoh link yang anda dapat ialah [**https://mirfaith.myshoppegram.com/cart/57085:1**](https://mirfaith.myshoppegram.com/cart/57085:1)

Jadi anda perlu simpan **57085** sahaja untuk digunakan pada langkah seterusnya.

## **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-06e98b3b69cbc413fefd8c648e22921c07037c72%2F-MUMbvfcKeFEwZTkkOtu.png?alt=media)

6\. Klik pada **element Button** tersebut yang anda baru lepas drag dan masukkan ke dalam body content anda. Taip teks 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-06e98b3b69cbc413fefd8c648e22921c07037c72%2F-MUMbvfcKeFEwZTkkOtu.png?alt=media)

7\. Dibahagian URL anda boleh masukkan /cart/**add?id**=**masukkan ID yang anda dapatkan pada langkah 1 .**

{% hint style="info" %}
\*\*<mark style="color:red;">**Perhatian**</mark> : Pastikan anda masukkan **add?id=** pada URL anda.
{% endhint %}

(Contoh: [https://mirfaith.myshoppegram.com/cart/add?id=57085](https://mirfaith.myshoppegram.com/cart/57085:1))

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

9\. Setelah selesai anda boleh klik **Preview** untuk lakukan percubaan bagi penetapan button tersebut.

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

## Info Tambahan

Jika anda ingin membuat pelanggan anda terus masukkan 3 produk terus kedalam cart mereka anda boleh asingkan setiap produk variant ID dengan simbol koma.\
\
Sebagai contoh : /cart/**add?id=57085,12345**

{% hint style="info" %}
**\*\*Maksimum hanya&#x20;**<mark style="color:red;">**3 variant ID**</mark>**&#x20;sahaja boleh dimasukkan.**

\*\*Jika anda ingin menambah **kuantiti dalam Express Cart** anda, pastikan anda ubah dan **tekan butang Update Cart.**
{% endhint %}