How to set up the Estimated Shipping App for Shopify

How to set up the Estimated Shipping App for Shopify

Step 1: complete widget settings

Complete widget settings in order to specify shipping rates, estimated delivery dates and countdown timer displayed on product pages.

Main settings

Shipping method(s) displayed in widget

Select which rates you'd like to display in the widget. There are 4 options available:
  1. Cheapest available. Display one or multiple cheapest shipping methods you have in your "Shipping and delivery" settings. The cheapest shipping method will be displayed first.
  2. Fastest available. Display one or multiple fastest shipping methods you have in your "Shipping and delivery" settings. The fastest shipping method will be displayed first.
  3. Specific method(s). Select and display specific method(s) you have in your "Shipping and delivery" settings. Arrange sorting in the "Widget content and structure" section.
  4. None. Pick this option If you want to display a static shipping methods and rates or don't want to display any shipping rates.
The app supports Shopify default shipping rates as well as carrier rates and rates configured via 3rd party shipping apps (such as Calcurates).
Carrier rates and rates configured via 3rd party shipping apps available only with a "Pro" plan.

Widget display conditions

Display or hide widget for products with the specified tags. Leave empty to display on all product pages.


Fallback message

Display this text if for any reason shipping methods are not available for the product.


Widget display settings

Widget content and structure

Specify which information is displayed in the widget. Use formatting settings to set the font sizes and colours. Check widget preview on your right.

Available blocks:
  1. Title
  2. Address lookup
  3. Shipping method
  4. Text
Available variables:
  1. shipping rate - {rate}
  2. shipping method display name - {name}
  3. delivery date from - {delivery_from}
  4. delivery date to - {delivery_to}
  5. cut-off countdown - {countdown}

Google address lookup (optional)

The widget supports Google address autocomplete for easy addres lookup.
  1. Google Places API key. The API key is required for Google address lookup. Learn more where to get API Key.
  2. Placeholder name. Specify the placeholder text to explain your customer how to use the lookup.
As dynamic shipping rates require postal code we recommend using the following placeholder text or similar: Enter your postal code

Default destination address

This address will be used as a default address so widget can display initial information on the go, without the need for customer address input.


Make sure you enter the default destination address if you don't use static rates or Google address lookup in your widget. Otherwise dynamic shipping rates will not be displayed.

Countdown timer (optional)

Display countdown timer such as "Order within 1 hour, 39 minutes, 22 seconds".
  1. Cut-off time (required). Set up the cut-off time (hour in 24-hour format and minutes) in order to display the countdown timer.
  2. Timer format. Example: {{hours}}h {{minutes}}m {{seconds}}s
Make sure you use an {countdown} variable in the "Widget content and structure" window

Transit days (min, max days qty)

Will be used if not provided with the shipping rate selected in the "Shipping method displayed in widget" setting.
  1. Custom date format. Use Day.js format (e.g. MMM D, YYYY). Leave empty to display format according to customer’s locale.

Make sure you use {delivery_from} and/or {delivery_to} variables in the "Widget content and structure" window

Step 2: add App Block in the Theme Settings

Once you finished with the widget settings and happy with its preview you are ready to embed the widget to your product pages in theme settings.

1) Navigate to theme settings: Sales channels > Online Store > Themes 
2) Click "Customize" next to your current theme



3) In the top menu switch from "Home page" to Products > Default product
4) Choose the right place on your product page for the widget and click "Add block"
5) Find the "Estimated Shipping" block among Apps and add it



6) Save changes

Do you have any issues, questions or feature request? Contact Calcurates support team.