Delivery Time

This element provides customers with estimated/specific delivery times for their orders.

The Delivery Time element can improve the customer experience and increase customer satisfaction. It can also help reduce customer inquiries about delivery times, freeing up customer service resources for other tasks.

Overall, this element can be a valuable tool for e-commerce websites looking to provide a better customer experience and streamline their delivery processes.

1. How to add the Delivery Time element?

To add the Delivery Time element, please follow these steps:

• Step 1: In the EComposer Editor, please click on the Elements.
• Step 2: Click on the Single Product drop-down to display the basic elements, then select the Delivery Time element to display element variations.
• Step 3: Drag and drop your desired Delivery Time element variation into the page editor. Now you can start configuring that element.

2. How to configure the Delivery Time element

The Delivery Time element gives you many settings to design clear delivery information based on the current time.

Let’s get started by clicking on the Delivery Time element that you have added. Then:

• Go to the Content tab to edit the content, time, exclude dates, date format, and translation
• Open the Design tab to style the delivery content — you can change the font size, color, spacing, and more to match your desire.

2.1 Content

First of all, there are some settings that let you set the Delivery Time element to hide when the product is unavailable or sold out and modify the appearance of the icon on the text. Here are the description of the settings:

• Hide element when product unavailable: This will hide the delivery time when the product is out of stock.
• Icon/Image: You can choose to use an Icon or an Image before the text.
• Position: Set the position for the icon/image to be before or after the text.
• Animation: Set the animation for the icon/image.

Scrolling down, you will see the settings for the delivery text:

• Delivery Text: This option allows you to customize the text that will be displayed to customers for estimated delivery times.
• Delivery Start Date: This option allows you to set the earliest date that an order can be delivered. For example, if you need a certain amount of time to process an order before it can be shipped, you could set the Delivery Start Date to reflect that processing time.
• Delivery End Date: This option allows you to set the latest date that an order can be delivered. For example, if you know that orders shipped to a certain region typically take a certain amount of time to arrive, you could set the Delivery End Date to reflect that estimated delivery time.
• Exclude Days: This option allows you to exclude specific days of the week from the estimated delivery time. For example, if you don’t deliver on weekends, you could exclude Saturday and Sunday from the estimated delivery time.
• Date delivery format: This option allows you to choose the format to show the date.
• Hide days of the week: This option allows you to show the Days of the week or not.

Note: The Delivery text option can not work if you enter the HTML code. Please enter normal text only.

• Delivery cut off: This setting helps you inform your customers that orders placed after the cut-off time may not arrive within the expected delivery window.
• Text hours and Text minutes: These settings let you edit the hour and minute texts that show on the delivery text.

• Translation: This option allows you to enter the Days of Week and Months of Year in your language. Please make sure that you enter the items by ordering and separate them by the comma “,”.

Here is a video that you can refer to for clarity:

2.1 Design

General

• Alignment: You can set the alignment of the text here.
• Typography: This is for changing the font, font size, and weight…
• Text color: Changing the color of the text.
• Text gradient: Allows you to set multiple colors for text.
• Text shadow: You can add the shadow to the text here.

Date

This has the same options as the General tab, aside from alignment.

Icon

• Color: Set the color for the icon.
• Size: Set the size of the icon.