> 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/floating-widget.md).

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