Estimate Shipping

Author: Charlotte Tran 1854 views

The Estimate Shipping element in EComposer allows customers to estimate the shipping cost for their order based on the shipping settings configured in your Shopify store.

To calculate the estimated shipping cost, customers typically need to enter information such as their destination address. The estimate is then generated based on your Shopify shipping rates and rules.

1. How to add Estimate Shipping element

Before using the Estimate Shipping element, please make sure your shipping information is set up correctly in Shopify.

Step 1: Update your shipping rates in Shopify => Settings => Shipping and Delivery.

Step 2: In the EComposer editor, go to the Elements panel => Cart => drag and drop the Estimate Shipping element onto your page.

Then, you can click on the Estimate Shipping element to customize its content in the Content settings:

General content settings: You must change the desired content in the General setting. For example, the information for each box includes labels for the Submit button, Calculating button, Country text, Province text, Zip/Postal Code text, Shipping rate text after calculated, and Text when do not ship to a location.
Gap: The gap from each box in the Estimate Shipping element can be increased or decreased.

2. How to style the Estimate Shipping element

General: You can adjust the Alignment, Background, Box Shadow, Border, and Border Radius of the whole area of the element.

Label: You can change the Typography and Text Color of the labels.

Location select: You can customize the Width, Height, Text Alignment, Typography, Color, and Spacing of the select input field. In the Normal and Focus tabs, you can adjust the Background, Box Shadow, Border, and Border Radius to define the appearance of the input field in different states.

Input box: You can customize the Width, Height, Text Alignment, Typography, Color, and Spacing of the input box. In the Normal and Focus tabs, you can adjust the Background, Box Shadow, Border, Border Radius, and Outline to define the input box appearance in different states.

Button: You can customize the Typography, Alignment, Box Shadow, and Spacing of the button. In the Normal and Hover states, you can adjust the Width, Height, Text Color, Background, Border, and Border Radius to define the button’s appearance in different states.

Price text: You can change the Typography and Text Color of the price.

To make it easier to modify and preview the changes, you can tick the Preview shipping rate after calculated option first to show the calculated price directly in the editor:

Invalid zip/postal text: You can change the Alignment, Typography, Text Color, and Spacing of the text.

To make it easier to modify and preview the changes, you can tick the Preview invalid zip/postal code option first to show the calculated price directly in the editor: