> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/zox-zipcode-check/create-rule/app-block-setting.md).

# 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>