# Floating Widget

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

These settings control the availability and core behavior of the floating widget.

* **Status**\
  Enable or disable the floating widget.
  * **Active**: The widget is visible on the storefront.
  * **Inactive**: The widget is hidden.
* **Choose Icon**\
  Select an icon for the floating widget.\
  You can choose from multiple predefined options:
  * Icon 1
  * Icon 2
  * Icon 3
  * Icon 4
  * Icon 5

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

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

These options define the pop-up appearance and visual styling of the floating widget.

* **Popup Image URL**\
  Provide the image URL to be displayed inside the pop-up.\
  Example: <https://zipvalidator.magecomp.net/logo.jpg>

  **How to get Image URL:**\
  Upload your image to your server, Shopify files section, or any CDN, and copy the publicly accessible image URL.
* **Background Color**\
  Sets the background color of the floating button.\
  Example: #000000
* **Icon Color**\
  Sets the color of the icon displayed inside the floating button.\
  Example: #ffffff

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

#### <mark style="color:$primary;">**3. Floating Icon Position**</mark>

Control where and how the floating widget appears on the screen.

* **Position**\
  Select the placement of the floating widget.\
  Example: Bottom Right
* **Icon Size (px)**\
  Define the size of the floating icon in pixels.\
  Example: 48px
* **Button Padding (px)**\
  Set the internal spacing inside the floating button.\
  Example: 10px
* **Button Margin (px)**\
  Set the outer spacing around the floating button.\
  Example: 0px
* **Distance from Bottom (px)**\
  Adjust how far the widget appears from the bottom edge of the screen.\
  Example: 20px
* **Distance from Right (px)**\
  Adjust how far the widget appears from the right edge of the screen.\
  Example: 20px

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

Once configured and activated, the floating widget will appear at the selected position on your storefront, styled according to your chosen colors and dimensions, and will open the configured pop-up when clicked.

This ensures quick access for customers without interrupting their browsing experience.

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

## Header Widget

The **Header Widget** displays a delivery availability checker prominently at the top of your store. It allows customers to quickly verify serviceability by entering their pincode without navigating away from the page.

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

These settings control whether the header widget is visible on your storefront.

* **Status**\
  Enable or disable the header widget.
  * **Active**: The widget is displayed in the store header.
  * **Inactive**: The widget is hidden.

<figure><img src="/files/1nnXYECXa6ef6gFRxwNs" alt=""><figcaption></figcaption></figure>

#### <mark style="color:$primary;">**2. Header Customization**</mark>

Use these options to customize the appearance and text of the header widget to match your store’s branding.

**Appearance Settings**

* **Banner Text Color**\
  Sets the color of the banner text.\
  Example: #000000
* **Background Color**\
  Defines the background color of the header widget.\
  Example: #b4b4b4ff
* **Banner Text**\
  Main message displayed in the header.\
  Example: "Check delivery availability"

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

**Input & Button Settings**

* **Input Placeholder**\
  Placeholder text inside the pincode input field.\
  Example: **"Enter pincode"**
* **Input Border Type**\
  Defines the border style of the input field.\
  Example: "**Solid"**
* **Input Border Radius (px)**\
  Controls the roundness of the input field corners.\
  Example: **6px**
* **Input Border Color**\
  Sets the color of the input field border.\
  Example: **#cccccc**
* **Button Text**\
  Text displayed on the action button.\
  Example: **Check**
* **Button Color**\
  Sets the background color of the button.\
  Example: **#000000**
* **Button Text Color**\
  Sets the color of the button text.\
  Example: **#ffffff**
* **Button Radius (px)**\
  Controls the roundness of the button corners.\
  Example: **6px**

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

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

Configure the messages shown based on delivery availability and payment options.

* **Availability Text**\
  Message displayed when delivery is available.\
  Example: **Delivery available**
* **Availability Text Color**\
  Example: **#008060**
* **Unavailability Text**\
  Message displayed when delivery is not available.\
  Example: **Delivery not available**
* **Unavailability Text Color**\
  Example: **#D72C0D**
* **Cash on Delivery Text**\
  Message shown when Cash on Delivery is supported.\
  Example: **Cash on delivery available**
* **Cash on Delivery Text Color**\
  Example: **#000000**

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

#### <mark style="color:$primary;">**4. Location Detection**</mark>

* **Detect Location Text**\
  Text shown for automatic location detection.\
  Example: **Detect my location**
* **Detect Location Text Color**\
  Sets the color of the detection location text.

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

Once enabled and customized, the Header Widget appears at the top of the storefront, allowing customers to instantly check delivery availability and payment options, improving usability and reducing checkout friction.

<figure><img src="/files/y0gKYaMk3FhHe0QQxyNc" 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/floating-widget.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.