> 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/en/express-checkout/page-builder.md).

# Page Builder

{% hint style="info" %}
Before you follow these steps make sure you:

* Already have the product you want to **create for express checkout**
* Already has its **own pages** for you to enter the **express checkout function**
* Already subscribed to Shoppego **Standard plan and above**
  {% endhint %}

## Get Product Variant ID

1\. Log in to your Shoppego account.

![](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\. Click on **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\. Click on the Product for which you want to enter the Express Checkout function.

![](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\. Click on **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\. Select the variant you want your customers to continue buying and save the link

![](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\. Make sure you save the URL of the link first as it will be used for setting on your pages.

### Settings on Page Builder <a href="#penetapan-pada-page-builder" id="penetapan-pada-page-builder"></a>

1\. Log in to your Shoppego account.

![](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\. Click on **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\. Click on the Edit button on the pages where you want to enter the **Express Checkout** function.

![](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\. Click on **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\. Next, you will be taken to your page builder page. To set the express checkout, you can drag the Button element to the space provided.

![](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\. Click on the **Button element** that you just dragged and insert into your body content. Type the text you want to appear on the Button element.

![](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\. In the URL section you can enter the **URL you just got from step 1.**

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

8\. In the **Target column** you can select the **Same Tab** or **New Tab** option while, in the other settings column you can set according to your design.

9\. Once done you can click **Preview** to test the button.

![](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)

## Additional Info

### Checkout 3 Products

1. If you want to change your button styling, you can refer to this link for more information: <https://getbootstrap.com/docs/4.0/components/buttons/>\
   \
   If you want to make your customers continue to checkout with **3 products directly**, you can separate each **product variant ID** with **a comma symbol**.\
   \
   For example: /cart /**57085:&#x20;**<mark style="color:blue;">**1**</mark>**,12345:&#x20;**<mark style="color:blue;">**2**</mark>**, 57779:&#x20;**<mark style="color:blue;">**3**</mark>

### Applying Discount Code

1. If you want to ensure that **customers checkout automatically with the discount code that you want**, you can **add ?discount=\[Your discount code] to your express checkout URL**.<br>

   For example, your discount code is "FREESHIPPING":\
   /cart/57085:1,12345:2,57779:3?discount=FREESHIPPING

{% hint style="info" %}
**\*\* The number after the colon refers to the&#x20;**<mark style="color:blue;">**quantity of items purchased**</mark>**.**

**\*\* A maximum of only&#x20;**<mark style="color:red;">**3 ID variants (valid)**</mark>**&#x20;can be read by our system.**
{% endhint %}
