> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/post-purchase-userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.tek-labs.app/post-purchase-userguide/user-guides/how-to-set-up-funnel-step-by-step/checkout-page/customize-widgets-on-checkout-page.md).

# Customize widgets on Checkout page

Design Checkout blocks and set up every checkout widget.

Open a funnel, go to the **Checkout** tab and click **Edit block**. The **Edit checkout block** editor opens.

## Blocks

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-073732af8289b990c8d606b945df5bed9f544963%2Fpp-chk-blocks.png?alt=media" alt="Checkout blocks"><figcaption></figcaption></figure>

The left panel lists **Checkout Block 1** to **Checkout Block 6**, with their status and number of widgets. Click a block to design it. **Open Shopify editor** in the **Place block in checkout editor** box opens the Shopify checkout editor so you can place the blocks.

## Inside a block

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-a9f4aedd8a2deb9bfb4079a0c847ec0bc2cff526%2Fpp-chk-block.png?alt=media" alt="A Checkout block"><figcaption></figcaption></figure>

* **Enable block**: **Enable** or **Disable** the block.
* **Widgets**: click a widget to expand its settings. Drag the handle to reorder, and click the eye icon to hide it.
* **Translation**: translate the block's text. See [Translation](/post-purchase-userguide/user-guides/translation.md).
* **Position**: previews the block in another place on the checkout. It's only a preview. The real position is set in the Shopify editor.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-91f4fc270a3a2628df633e5647e3a634b65bd844%2Fpp-chk-position.png?alt=media" alt="Preview position"><figcaption></figcaption></figure>

Click **Add widget** to add a widget:

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-70568ea5ca25cbccb97c64e37352e2c0a3013cfb%2Fpp-chk-add-widget.png?alt=media" alt="Checkout widgets"><figcaption></figcaption></figure>

To remove a widget, expand it and click **Delete Widget**. Click **Save** when you're done.

## Rewards

A progress bar that shows how close the customer is to a reward.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-91dac1a0d2e15483a816030f380220da5c310b52%2Fpp-chk-rewards.png?alt=media" alt="Rewards"><figcaption></figcaption></figure>

* **Reward basis**: **Cart total** or **Item Count**.
* **Min amount** or **Item count**: the goal to reach.
* **Text before achieving** and **Text after achieving**.
* **Bar foreground color** and **Bar background color**.
* Use the preview slider to see the bar at different cart values.

## Trust Badges

Short reassurance messages with an icon, such as secure checkout or free returns.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-377a5d04e6c4162ca1621fe559663e94b7c949cd%2Fpp-chk-trust.png?alt=media" alt="Trust Badges"><figcaption></figcaption></figure>

* **Badges**: click a badge to edit it, the bin to delete it, or **Add badge** to add one.
* **Layout Direction**: **Horizontal** or **Vertical**.
* **Icon size**: **Base** or **Large**.

Each badge has a **Title**, a **Description**, an icon (for example Lock, Truck, Gift or Calendar) and an icon color.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-3cb3c2853b41a8f038bba4e910778cb2fc255c5e%2Fpp-chk-edit-badge.png?alt=media" alt="Edit Badge"><figcaption></figcaption></figure>

## Testimonials

A customer review with star rating.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-b0ccbaf158cb27835118faddbfe2b2c3da2abe8c%2Fpp-chk-testimonials.png?alt=media" alt="Testimonials"><figcaption></figcaption></figure>

* **Customer name**, **Review text** and **Number of stars** (1–5).

## Notes

A checkbox that opens a text box. What the customer types is saved in the **order note**, for example gift messages or delivery instructions.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-fa15f500962b3d992773e95624e0e65815d2f1ff%2Fpp-chk-notes.png?alt=media" alt="Notes"><figcaption></figcaption></figure>

* **Checkbox title**.
* **Show text box when selected** (on by default).
* **Text box placeholder**.

## Images

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-9eb3956c1994415b65f9a6c8c2e274a1d0b1d92f%2Fpp-chk-images.png?alt=media" alt="Images"><figcaption></figcaption></figure>

* **Image type**:
  * **Payment image**: built-in payment method icons.
  * **Custom image**: upload a .jpg, .jpeg, .png or .gif image (up to 20 MB).
* **Image width**: 50–500 px.

## Text

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-2077de822ec912d72caf80323b7b6b020f80edcb%2Fpp-chk-text.png?alt=media" alt="Text widget"><figcaption></figcaption></figure>

* **Select type**: **Banner** or **Plain Text**.
* **Select type of banner** (Banner only): Information, Success, Warning or Critical.
* **Heading Text** and **Body Text**.
* **Header style** (Bold text or Heading) and **Body text size** (Small or Base).
* **Spacing**: the space around the widget.

## Single product upsell

Offers one product the customer can add to the order without leaving checkout.

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-b901e7a833133c558d2ca9972a91096e4e2b3c8c%2Fpp-chk-single.png?alt=media" alt="Single product upsell"><figcaption></figcaption></figure>

* **Product**
  * **Header** (default "You may also like").
  * **Product selection**: **Shopify recommendations** (choose **Related products** or **Complementary products**) or **Specific product**.
  * **Hide products already in cart** (on by default).
  * **Show product description**.
* **Price and discount**
  * **Automatic discount**: an amount with **% Off** or **Fixed amount**. The discount applies when the customer adds the product.
  * **Use "compare at" price**.
* **Quantity and variant selector**
  * **Display variant picker** and its label (default "Variant").
  * **Show variant picker for single-variant products**.
  * **Allow quantity selection** and its label (default "Quantity").
* **Button**: **Button type** (Secondary, Primary or Plain) and **Button text** (default "Add to order").

## Multiple products upsell

<figure><img src="https://2072184172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD7nJPiqs3PWuRTtrh4pP%2Fuploads%2Fgit-blob-d3e189544eb58e7846b8e6c3ed68b1621893e3f5%2Fpp-chk-multi.png?alt=media" alt="Multiple products upsell"><figcaption></figcaption></figure>

The same settings as the single product upsell, with **Specific products** instead of a single product, plus:

* **Number of products**: 1–6 (default 3).
* **Layout**: **List**, **Grid** or **Slider**.
* **Products per row**: 1–3 (default 2). Mobile always shows at most 2 per row.