# App Block Setting

**Customize Your Pincode Widget**

From this section, you can personalize the appearance and messages of your ZIP code checker on the frontend according to your preferences, making it match your store’s look and feel.

### <mark style="color:$primary;">1.</mark> <mark style="color:$primary;">Widget Settings</mark>

* **Choose Icon:-**\
  Select an icon that will be displayed alongside the delivery options widget.

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

### <mark style="color:$primary;">**2.**</mark> <mark style="color:$primary;">Button and Input Box Style</mark>

These settings control the visual appearance of the input field and action button.

* **Input Box Border Style**\
  Options such as "Solid" define how the input box border appears.
* **Input Box Border Radius (px)**\
  Define the roundness of the input box corners (in pixels).
* **Button Border Radius (px)**\
  Define the roundness of the button corners (in pixels).

<figure><img src="/files/7ZZ0Z9DzN6EP9VelI2s4" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">**3.**</mark> <mark style="color:$primary;">Text Settings</mark>

* Customize all text labels and system messages shown in the widget.
  * **Heading**\
    Example: **"Delivery Options"**
  * **Input Box Placeholder**\
    Example: **"Enter your pincode"**
  * **Button Text**\
    Example: **"Check"**

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

### <mark style="color:green;">**4. Message Configuration**</mark>

You can personalize customer-facing messages using dynamic variables.

* **Availability Message**\
  Displayed when delivery is available.\
  Example: **"We deliver to your %pincode% pincode."**\
  Variable used: {**%pincode%**} where you have to enter your pincode
* **Unavailability Message**\
  Displayed when delivery is not available.\
  Example: **"Unfortunetly we do not ship to your {%pincode%} pincode. "**\
  Variable used: {**%pincode%**} where you have to enter your pincode
* **Estimated Delivery Message**\
  Shows the estimated delivery timeline.\
  Example: "**Estimated Delivery Time: {%est\_msg%}"**\
  Variable used: **{%est\_msg%}**
* **Exchange/Return Message**\
  Informs customers about return or exchange availability.\
  Example: **"Exchange/Return available within {%return\_and\_exchange\_days%}"**\
  Variable used: **%return\_and\_exchange\_days%**
* **Cash on Delivery Message**\
  Example: **"Cash on delivery available."**
* **Detect Location Text**\
  Example: **"Detect your current location."**

<figure><img src="/files/12OBvnPR2AoecGoGlNht" alt=""><figcaption></figcaption></figure>

### <mark style="color:$primary;">**5.**</mark> <mark style="color:$primary;">Color Settings</mark>

Use these options to match the widget with your store theme.

* **Icon Color**: #303030
* **Input Box Border Color**: #545660
* **Button Background Color**: #545660
* **Button Text Color**: #ffffff
* **Availability Text Color**: #009E12
* **Unavailability Text Color**: #f91010
* **Estimated Text Color**: #000000
* **Exchange/Return Text Color**: #000000
* **Cash on Delivery Text Color**: #000000
* **Waiting List Text Color**: #0457c8

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

{% hint style="info" %}
After implementing these custom view settings, if the customer’s pin code is validated with the product they want to order, a success message like *<mark style="color:green;">**“We deliver to your pin code.”**</mark>*  will be displayed to the customer.&#x20;

If their entered ZIP code is not validated, the app will display a failure message like, <mark style="color:red;">**“**</mark>*<mark style="color:red;">**Unfortunately, we do not ship to your PIN code.”**</mark>* to your customers.
{% endhint %}

**The output of the customization on your online store 👇**

* When delivery is not available to your pincode.

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

* When the delivery is available to your pincode.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://magecomp.gitbook.io/shopify/apps/zox-zipcode-check/create-rule/app-block-setting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.