How to set up the Product Page Shipping App for Shopify

How to set up the Product Page 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 "Product Page 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

    • 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 ...

    • What is Shipping Rule

      What is Shipping Rule Shipping Rule — a certain change of the shipping option or/and method and its rates that is applied under specified conditions or a condition set (also defined as shipping segment). Shipping Rule example: 20% surcharge for ...

    • What is Shipping Segment

      What is Shipping Segment Shipping Segment — a preset condition (or a condition set) configured using different attribute types such as GEO, Cart, Product, Date & Time, Promo, Customer and Custom. Use these preset conditions to configure Shipping ...

    • How to add or edit a Shipping Segment

      Video: How to Set Up Shipping Segments and Rules in Calcurates Shipping Segments grid To see Shipping Segments grid you should follow Menu > Shipping Segments. There are 7 columns in the Shipping Segments grid: ID. Internal ID of the Shipping ...

    • How to add or edit a Shipping Rule

      Video: How to Set Up Shipping Segments and Rules in Calcurates Shipping Rules Grid Note, that at least one Shipping Segment must be created before you add your a Shipping Rule, because shipping rules are created using shipping segments as conditions. ...