Floating Widget

The Floating Widget allows you to display a clickable floating icon on your storefront. When tapped, it opens a popup (such as delivery availability or zip validation) and remains eas

1. Basic Settings

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

2. Widget Settings

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

3. Floating Icon Position

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

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.

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.

1. Basic Settings

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.

2. Header Customization

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"

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

3. Message Settings

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

4. Location Detection

• 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.

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.