About the Delivery Date Element
The GemPages Delivery Date element automatically calculates and displays an estimated delivery date on the product page upon purchase based on your store’s shipping policies and the customer’s local time zone.
This feature helps customers make informed decisions by clearly stating delivery expectations. For example, suppose a customer needs an item delivered by a specific date. In that case, this element will show whether it will arrive on time, guiding their purchase decision and enhancing both customer satisfaction and trust.
How to Add the Delivery Date Element to your page
To add a Delivery Date Element, simply follow these steps:
Step 1: In the GemPages Editor, use the search bar to find the Delivery Date element.
Step 2: Drag and drop the element onto the design area, placing it below the product price.
Configure the Settings Tab
Custom Text
Here, you can customize the text displayed with the estimated delivery date for customers.
Estimate Days
In this section, you have the option to select between a specific estimated date or a date range. The estimated delivery date will be calculated from the day the customer visits the page and will be adjusted to their local time zone.
- Specific Estimated Delivery Date: This setting enables you to specify the number of delivery days. Then, the product page design automatically updates to show the precise delivery date.
- Estimated Delivery Range: This setting allows you to define the shortest and longest delivery times. Then, the product page design displays an estimated delivery window, showing both the earliest and latest possible delivery dates.
Date Format
You can choose the date format to give your customers the most precise information possible.
Note: You can also customize the date format. Supported date formats include:
And here is an example:
Visibility
You can decide whether to hide or display the estimated delivery date if the item is out of stock.
Custom Text
This section allows you to customize the style, font, size, color, weight, line height, letter spacing, and text transformation of the text displayed with the estimated delivery date.
Date Text
Like the text, you can change the estimated delivery date according to your preferences.
Size
This section lets you select the element’s width to full, fit content, or default. Remember to click on the device icon to review its appearance on all devices.
Background
Feel free to add a background color or image to make the estimated delivery time stand out and grab attention.
Align
Text alignment in this element can be set to left, center, or right.
Configure the Advanced Tab
Display On
In this section, you’ll decide which devices will display the element, ensuring it looks great on desktops, tablets, and smartphones.
Spacing
By customizing both margin and padding, you can fine-tune the positioning and spacing of your element to achieve the desired look and feel.
Shape
This section helps you enhance the element’s look by adjusting its border, rounding its corners, and adding shadows for a stylish touch.
Position
You can position the estimated delivery date in various ways: place it prominently above the product name, make it sticky below the price so it stays visible as customers scroll, or select any other option that enhances your layout.
Opacity
Adjusting the opacity level lets you control how see-through or opaque the element appears.
Animation
You can switch the animation feature on or off. To learn more about how it works, check out this article.
CSS Class
A CSS class applies the same style to multiple HTML elements. Define the class in CSS with a period and name, then use it in HTML with the “class” attribute for consistent styling.
Once you’ve finished customizing, this is how the element will look on your product page.
