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.
1. Widget Settings
Choose Icon:- Select an icon that will be displayed alongside the delivery options widget.
2. Button and Input Box Style
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).
3. Text Settings
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"
4. Message Configuration
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."
5. Color Settings
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
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 “We deliver to your pin code.” will be displayed to the customer.
If their entered ZIP code is not validated, the app will display a failure message like, “Unfortunately, we do not ship to your PIN code.” to your customers.
The output of the customization on your online store 👇
When delivery is not available to your pincode.
When the delivery is available to your pincode.
Last updated