> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/salemate-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/salemate-userguide/user-guides/how-to-set-up-funnel-step-by-step/checkout-page/customize-widgets-on-checkout-page.md).

# Customize widgets on Checkout page

{% hint style="danger" %}
Please note that **Checkout customization** features are **available only on the Shopify Plus plan**.

For more information, you can refer to this [Shopify's document](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations) :point\_left:. 
{% endhint %}

After enabling the **Post Purchase Block**, you can start adding widgets to the **Checkout page** based on your requirements.

{% hint style="success" %}
For step-by-step instructions on enabling the **Checkout Block**, refer to this [**document**](/salemate-userguide/user-guides/how-to-set-up-funnel-step-by-step/checkout-page/enable-and-place-widgets-on-checkout-page-editor.md).
{% endhint %}

* **Widget position**
  * Customize where you want to place the widgets. There are 10 positions, including:
    * Above Order Summary block
    * Below Order Summary block
    * Below Apply Discount block
    * Below button Pay Now block
    * Bellow Wallets block
    * Above Customer information block
    * Below Customer information block
    * Below Shipping block
    * Below Payment block
    * Below Remember block

{% hint style="warning" %}
This section will **only appear** after you enable a **Tek Labs Post Purchase block**. Its functionality and settings may differ from each block, so be sure to configure it accordingly.

The position will **apply to all widgets** customized in that block
{% endhint %}

<figure><img src="/files/joY0ErniP1vrwYzvhtqD" alt=""><figcaption><p>Widget position</p></figcaption></figure>

### **Reward**

To encourage customers to reach a specific goal (e.g., a required item count) before receiving a reward. It visually displays progress and updates dynamically based on the customer's order.

* **Reward Basis:** Choose how the reward progress is calculated. You can set it based on:
  * ***Item count***: The reward bar tracks the number of items in the cart, called *Item count.*
  * ***Cart total:*** The reward bar tracks the total value of the order in the cart, called *Minimum amount.*&#x20;
* **Text Before Achieving**: Write a text to encourages customers to add more items to their cart to receive the reward (e.g., "Just a little more to go!").
* **Text After Achieving**: Confirms success once the requirement is met (e.g., "You did it!!!").
* **Bar Foreground Color**: Choose a color for the filled portion of the progress bar.
* **Bar Background Color**: Select a color for the unfilled portion.&#x20;
* **Item count/Cart total:** Adjust the slider to preview how the progress bar will fill when the number of items or the total cart value changes. This helps you visualize the customer’s progress toward unlocking the reward.

Click **Save** to apply the settings.&#x20;

<figure><img src="/files/jyOSb7GgebCiRmqdpJwA" alt=""><figcaption></figcaption></figure>

### Trust Badges

Help build customer confidence by reassuring them that their payment and personal information are secure. Displaying trust badges on the checkout page can reduce cart abandonment and increase conversions by reinforcing the credibility of your store.

Click the **Add badge** button to start building the badge you are looking for.&#x20;

<figure><img src="/files/WW4TeaGReTuL7dHTyedC" alt=""><figcaption></figcaption></figure>

* **Title**: Name your badge.
* **Description**: Describe its purpose.
* **Select icon:** Pick an icon that fits the badge.
* **Select icon color:** Choose a suitable color.

<figure><img src="/files/TCWgRIsXoH5A8p7qZrqB" alt=""><figcaption><p>Badge creation</p></figcaption></figure>

* **Layout Direction:** Choose to display the description text vertically or horizontally.
* **Select icon or image size:** Adjust the slider to change the size of the badge icon.
*

```
<figure><img src="/files/KCAdzMgGKRlVd7kke3k5" alt=""><figcaption></figcaption></figure>
```

> If you have more than one badge showing up, you are able to switch the badge positions if you want :)

### Testimonials

Displaying testimonials on the checkout page helps build trust, reduce purchase hesitation, and reassure customers by showcasing positive experiences from others.

* **Customer Name:** Display the name of that customer.
* **Review Text:** Putting the kind words your customer gives to you there.
* **Number of stars:** Adjust the slider to choose the preferred number of stars.&#x20;

  <figure><img src="/files/rmIUAcll9hDR80GC5wiz" alt=""><figcaption></figcaption></figure>

### Notes

Display a **checkbox with notes** that gives customers additional information on the checkout page, such as a special gift or discount code, noted by the store owner or the customers themselves.&#x20;

* **Checkbox title:** Enter the text that will appear next to the checkbox.
* **Show text box when selected:** Enable this option to display a text box when the customer ticks the checkbox.
* **Text box placeholder:** Enter the default message or code that customers will see in the text box.

<figure><img src="/files/Nb3Yynspr6DKco4PYUQx" alt=""><figcaption></figcaption></figure>

### Images

Showcase a custom image or accepted payment methods on the checkout page.&#x20;

* **Choose image:** Decide to display either of the options below:
  * ***Payment image:*** Includes eight payment methods accepted by Shopify checkout (e.g., Apple Pay, Google Pay, PayPal, Visa, Mastercard).
  * ***Custom image:*** Upload a customized image from your device to showcase it at checkout. Only .gif, .jpg, and .png types are approved to upload.&#x20;
* **Image width:** Adjust the size of the payment icons using the slider.

<figure><img src="/files/hepAyr3qSlAuqH0SpzJL" alt=""><figcaption></figcaption></figure>

### Text

Add a **custom text** and adjust:

* **Select type**
  * Banner: Display the text on a banner with the outstanding light green background.&#x20;
  * Plain text: Texts would be displayed as normal as other elements on the checkout page.&#x20;
* **Spacing:** Adjust the spacing between the heading text and body text
  * None
  * Base
  * Extra tight
  * Tight
  * Loose
  * Extra loose
* **Heading Text:** Customize the header.&#x20;
* **Body Text:** Customize the body
* **Header text size:** Decide the size of the header.
* **Body text size:** Decide the size of the body.&#x20;

  <figure><img src="/files/jeb0DOoW30RcBWGGaIml" alt=""><figcaption></figcaption></figure>

***

{% hint style="success" %}
**Notes:**

* A widget can be added **multiple times** to the page without any limitations.
* Widgets can be freely repositioned by dragging and dropping them within the control panel.
  {% endhint %}

<figure><img src="/files/JcePuP2hmKWWIx0UAJwi" alt=""><figcaption></figcaption></figure>

If you have any difficulties or need any further help from our team, please do not hesitate to let us know via the Live Chat or our email here: **<support@tek-labs.app>**. We are all ears!! :person\_raising\_hand: