# 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F2F2LC4NIBfVLGW2lCTVt%2FScreenshot_26.jpg?alt=media&#x26;token=ab73a1d6-ca88-4ea4-8b90-df0d56f9d553" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fk1v8p3R6a4y8OABVzuGc%2FScreenshot_27.jpg?alt=media&#x26;token=9b3e7f37-220c-45f6-9e0e-0c52a98307ab" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FFtScgZ5qJYwKHutVTLR0%2FScreenshot_28.jpg?alt=media&#x26;token=84eba39f-fa63-45bc-9767-384bffae35af" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FmA5COGds54poIaoAgWXb%2FScreenshot_36.jpg?alt=media&#x26;token=d18e0ca4-c340-4b24-bb76-1f750567a8b3" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FusM9uVxUvekSR58I2X9Q%2FScreenshot_29.jpg?alt=media&#x26;token=0077aeb4-1df1-484b-b89e-b0cec84cb823" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F4ISNp9gvy1zd8evp7xQq%2FScreenshot_30.jpg?alt=media&#x26;token=8d74a346-1ab5-4c1c-bba0-84d5dccd2992" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2Fh4pCvVtQjpYTJeAA9B0Y%2FScreenshot_31.jpg?alt=media&#x26;token=42731304-aaf2-4c66-a6f8-4275f0143ac0" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FxMJAiOLpcS9ZLSZnxLbt%2FScreenshot_33.jpg?alt=media&#x26;token=8ac0eed5-0e03-4aa4-94df-a6bd3381ffe7" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FHmOvhUForHplLxpMhtcW%2FScreenshot_34.jpg?alt=media&#x26;token=b68df93b-c4b6-4ae6-8ddf-b5ece51edbb2" 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="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FhFcDFFLH9V27XlAHVAYG%2FScreenshot_35.jpg?alt=media&#x26;token=e4d6bc55-1b83-4e2a-9aea-8d8db497c857" alt=""><figcaption></figcaption></figure>