How to add the estimated shipping time on your page

 

 

This article will guide you through the steps to display estimated shipping time on your store using the Shipping Time add-on.

 

What is the estimated shipping time?

An estimated shipping date is a guess on when the order will ship out. While not being 100% accurate and may end up being delayed, having estimated shipping information on your store provides customers with additional useful information at a glance, helping you increase the shopping experience and up your conversions!


In EcomSolid, the Shipping Time add-on automatically calculates and displays the shipping date based on your configuration. Let’s go over the add-on in the next sections.

 

Add the Shipping Time add-on to your theme

Step 1: Go to the EcomSolid Dashboard and enter the Theme Editor.



Step 2: Switch to the Add-Ons tab and hit “Add add-on” to open up the library



Step 3: Search for the Shipping Time add-on and hit “Add” to install the add-on on your theme.



Step 4: The add-on’s configuration will open on the left sidebar, select the “Change position” button to pick a position to show the message.

You can also use the drop-down menu to pick a position. A common position would be inside the Product details section, or on the Cart page.

 

Configure the add-on

Content tab

Display Position

This section lets you select a suitable position for the message. See Step 4 above.

 

General

Label Text 1
Edit the text before the minimum day's value in the message


 

Label Text 2
Edit the text after the minimum day’s value and before the maximum day’s value

 

 

Date Format
Choose from 4 available date formats:

  • MMMM Do
  • Do MMMM
  • DD/MM 
  • DD-MM-YYYY

 

Minimum Days (toggle)
Display the minimum day's value. This option is on by default. If you do only want to show estimated maximum shipping days, toggle this off.

Adjust the number of days using the input field or the arrows.


 

Maximum Days
Display the maximum day’s value.

Adjust the number of days using the input field or the arrows.


 

Exclude Saturday and Exclude Sunday
Toggle this on if you don’t ship products on Saturday, or Sunday, or both, and the value will be recalculated to exclude the mentioned dates.

 


 

Design tab

The Design tab is where you’ll find all necessary parameters to customize how the message looks on the live page.

General

 

Font Size: Adjust the font size in pixels using the slider or the arrows

Alignment: Align the message on the left, in the center, or on the right in relation to its position.

Content Width: Adjust the width of the message in pixels using the sliders or the arrows

Spacing: You can adjust the padding in 4 dimensions in pixels, em, rem, or percentage.

Pixels, em, and rem are all relative size scaling units. 1 em/rem equals 16 pixels. However, em differs from rem in that em represents the relative font size of its parent element, while rem is relative only to the root font size of the HTML document.


Color

 

Text Color: Adjust the text color and transparency from the color palette, or use a color hex code. You can check out HTML Color Codes for the hex codes.

Background: Choose to have a colored background or use an image for the background.

Background Color: If you pick a colored background, adjust the color and transparency here

Background Image: If you choose Image, click on the button to upload an image to use as the background.

 


When everything is in place, hit “Save” and “Preview” to check the page before publishing.



To publish the changes to your theme, hit “Update Live” and “Yes, Update”.



For any further questions, please don’t hesitate to contact our EcomSolid Support Team via email or live chat.

 


Was this helpful?