> 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/pages.md).

# Pages

{% 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**
  {% endhint %}

## Dapatkan Produk Variant ID

1\. Log masuk ke akaun Commerce 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 simban 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 Pages**

1\. Log masuk akaun Commerce 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 **icon < >** untuk masukkan custom code butang anda

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

5\. Seterusnya, anda hanya perlu masukkan **code** ini pada ruangan tersebut.

**Code** : \<a class="btn btn-success btn-lg text-white" href="/cart/add?id=**masukkan ID yang anda dapatkan pada langkah 1**" target="\_blank">Buy Now\</a>\
\
**\*\* Pada bahagian href tersebut, anda boleh masukkan link produk variant anda yang anda baru dapatkan pada langkah 1**

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

6\. Setelah selesai anda boleh klik **Save** dan lihat hasilnya dengan tekan pada butang **Preview**.

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

### Info Tambahan

Jika anda mahu ubah styling button anda, anda boleh rujuk link ini untuk maklumat lanjut : <https://getbootstrap.com/docs/4.0/components/buttons/>\
\
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 3 variant ID sahaja boleh dimasukkan.**
{% endhint %}