You can customize the text and color settings for displaying messages by navigating to “Settings > Content Settings.”
Popup Image
Here you can choose or upload your check-in availability icon.
Choose Delivery Information Layout
Here you can choose the layout through which you can showcase the delivery information among the following:-
– Inline message layout: The messages will be displayed in text boxes.
– Text with icon message layout: The messages will be displayed in the text boxes along with icons.
– Square box message layout: The messages will be displayed with icons in square boxes.
There is also text ,color and font settings for these configurations.
Message Placement
Here you can select the placement of the success/error message – either above the input box or below.
Input Box & Button Styling
The following options are for Input Box Border:
– Input Box Border Radius: Adjust the radius of the input box border through here.
– Input Box Border Width: Adjust the width of the input box border.
– Input Box Border Style: Set your preferred border style.
– Input Box Border Color: Set the color of the input box border.
The following options are for Button Border:
– Button Border Radius: Set the button border radius.
– Button Border Width: Set the width of the button border.
– Button Border Style: Set the style of the button border.
– Button Border Color: Set the color of the button border.
Text Settings
You can configure & insert the texts for the following elements:
– Title Text: Insert a Title for the Zipcode checking option.
– Description: Insert a short description.
– Placeholder Text: Insert a Text caption that’ll be seen as a placeholder.
– Button Text: Insert the text caption for the Button.
– Shipping Availability Message: Insert the shipping availability message to display to the customer when the delivery is available.
– Shipping Unavailability Message: Insert the shipping unavailability message to display to the customer when the delivery is not available.
– Shipping Estimated Message: Insert the message to display the estimated date when the product will arrive.
– Waiting List: Insert the message instructing the customers to subscribe when the pin code (zip code) is not available for shipping.
– Detect Location Text: Inset the text for detecting location section.
– Email Address Placeholder Text: Enter the placeholder text for the email address field.
– Change Zipcode Text: Enter the text for changing the zipcode.
– Join Waiting List Text: Enter text for joining waiting list.
– Text for Popup to Add Zipcode on Product Details Page: Enter the text for the popup to add zipcode on the product details page.
– Text for Popup to Edit Zipcode on Product Details Page: Enter the text for the popup to edit zipcode on the product details page.
– Change Header Upper Text: Enter the upper header text.
– Change Header Lower Text: Enter the lower header text.
– Change Header Upper Text After Validate Zipcode: Enter the header text that is displayed once the zipcode is validated.
Color Settings
By clicking on the Color box, the custom color picker tool will appear. You can choose the color, or you can directly insert the Hex code (HTML code) of the color. You can choose the color from the custom color picker for:
– Title Text Color: Set the color for the title text.
– Description Text Color: Set the color for the description text.
– Button Text Color: Set the color for the button text.
– Button Background Color: Set the color for the button background.
– Success Message Text Color: Text color for Success Message.
– Success Message Background Color: Background color for Success Message.
– Unsuccess Message Text Color: Text color for Unsuccess Message.
– Unsuccess Message Background Color: Background color for Unsuccess Message.
– Estimated Message Text Color: Text color for Estimated Message
– Estimated Message Background Color: Background color for Estimated Message.
– Waiting List Button Background Color: Text color for the button’s text caption.
– Waiting List Button Text Color: Background color for the button.
– Automatic Detection Location Text Color: Color for the text of Automatic location detection.
Font Settings
In order to customize the font size, you need to Enable this option.
For the following you can resize the font:
– Block Label Text Size
– Placeholder Text Size
– Button Text Size
– Shipping Availability/Unavailability/Estimated Message Size
– Additional Notes / Waiting List Message Size
– Email Address Placeholder Text Size
– Change Zipcode Text Size
– Join Waiting List Text Size
– Detect Location Text Size
Preview
Based on the ‘Text’ and ‘Color’ settings, you can see the real-time preview on the right of how the “Zipcode Validator” block would display on the product detail page.
Once the “Content settings” are configured, click on the Save button to apply the changes.
Refer to this video for more detailed information: