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

1) Shipping method displayed in widget

Select on of your existing shipping methods, which rates you'd like to display in the widget. The app supports Shopify shipping rates as well as carrier rates and rates configured via 3rd party shipping apps (such as Calcurates).  If you want to display a static shipping method and rate, then leave this field empty and set it in the "Widget content and structure" window.

Main settings


Carrier rates and rates configured via 3rd party shipping apps available only with a "Pro" plan.

2) Widget display conditions

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

3) Fallback message

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

Widget display settings

1) 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 variables:
  1. shipping rate - {rate}
  2. shipping method display name - {name}
  3. delivery date from - {delivery_from}
  4. delivery date to - {delivery_to}
  5. Google address lookup - {address_lookup}
  6. cut-off countdown - {countdown}

2) Google address lookup (optional)

The widget supports Google address autocomplete for easy address 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


Make sure you use an {address_lookup} variable in the "Widget content and structure" window

3) 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.

4) 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


5) 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 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 APP BLOCKS and add it



6) Save changes

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


    • Related Articles

    • Delivery Dates: get and display estimated delivery dates from Carriers

      Video: How to Set Up Delivery Dates in Calcurates Overview With this feature you may display estimated delivery dates or days in transit next to the shipping method at checkout in order to give your customers an idea when they are going to get their ...

    • How Product Page Widget feature works

      General Information Product Page Widget (aka Shipping on Product Pages) is an advanced feature that is available in the left menu in the section Pro Features. Product Page Widget allows you to provide your customers with certain shipping methods and ...

    • Duties & Taxes: get estimated international duties & taxes

      Overview With this feature you may get estimated international duties & taxes together with carrier’s real-time shipping rates and use them in your shipping methods (Carrier Services or Table Rates methods). Enabling Duties & Taxes feature will cause ...

    • Delivery Dates: set and display own delivery dates calculations

      Video: How to Set Up Delivery Dates in Calcurates Overview With this feature you may display estimated delivery dates or days in transit next to the shipping method at checkout in order to give your customers an idea when they are going to get their ...

    • Multi-Origin Shipping: set up methods and rates for multiple origins or vendors

      Video: How to Set Up Multi-Origin Shipping in Calcurates? Overview With the "Multi-Origin" feature you may set up individual shipping methods and rates for your multiple Origins (warehouses, vendors, suppliers, 3PLs), display Merged Shipping Option ...