Skip to content
Visit ShipperHQ.com
  • There are no suggestions because the search field is empty.

How to configure the Product Page Shipping Calculator

Access real-time shipping costs on product pages

Table of Contents

Overview

The Product Page Shipping Calculator feature gives customers the ability to calculate and view the estimated shipping cost and delivery dates without having to navigate to the checkout page.

Requirements

Before starting, ensure you have:

  • A Magento 2, BigCommerce or Shopify account
  • A Standard, Advanced, or Enterprise ShipperHQ plan

Magento 2 accounts will require:

  • The module-shipper or module-shq-server installed (instructions below)

BigCommerce:

  • Multi Store Front (MSF) is not currently supported by this feature. The feature will only work on the primary store.

Steps to Enable Product Page Shipping Calculator

How to Install on Shopify

Use the steps below to enable and configure the Product Page Calculator within your Shopify store.

Enable Product Page Shipping Calculator in ShipperHQ:

  • Within ShipperHQ, Navigate to Advanced Features, and click the toggle for Product Page Shipping Calculator

  • image-png-Jan-28-2026-09-17-34-3127-PM 

Add App Block to Product Page in Shopify

  • Within Shopify, Navigate to Online Store > Themes Page. Then select Edit Theme (Customize).

  • Within the Theme Customization, click on "Home Page" > Products > Default Product.

  • In the "Default Product" page editor, click on "Apps" > "Add Block" > "Apps" > then select the Product Page Calculator

  • The Product Page Shipping Calculator App Block is now available on your product pages. Reposition where it sits on the page by moving the block within the layer panel.PPSC9 - Customize PPSC-2

 

Customize

  • The Product Page Shipping Calculator button color is customizable using your Shopify store theme settings

PPSC11 - Color Settings (optional)-2

Product Page Calculator Settings:

  • To access the Product Page Calculator settings, click on the App Block in the navigation menu, or by clicking the app block directly in the page editor.

  • On the right hand side, the Settings section will appear for the Product Page Calculator, where you can define the default country, and which fields are present. 

Test Product:

  • Once you save your changes above, the Product Page Calculator will appear on your products:

How to Install on Magento

Before you enable the Product Page Shipping Calculator feature, follow these steps to install the Product Page Calculator and sync with your Magento 2 store.

Steps to Install Product Page Shipping Calculator Module

  1. Enable Maintenance mode: php bin/magento maintenance:enable
  2. Run the following commands from your root Magento installation directory:

     

    • composer require shipperhq/module-shq-product-page
    • php bin/magento module:enable --clear-static-content ShipperHQ_ProductPage
    • php bin/magento cache:flush
    • php bin/magento setup:upgrade
    • php bin/magento setup:di:compile
    • php bin/magento setup:static-content:deploy

  3. Disable Maintenance mode: php bin/magento maintenance:disable

Steps to Sync with Magento

  1. Log into your Magento account.
  2. Navigate to Stores > Other Settings > Synchronize with ShipperHQ.
  3. Click the Synchronize button to enable the Product Page Shipping Calculator.
  4. Congratulations, you have successfully enabled the Product Page Shipping Calculator.

Follow these steps to enable and configure the Product Page Calculator.

  1. Log into your ShipperHQ account.
  2. Navigate to Manage Shipping > Advanced Features page.
  3. Click the toggle to enable the feature.
  4. Click the Proceed button.
  5. Click the Settings tab.
  6. Select the desired settings:
    • Default country
    • Hide Country Field
    • Hide State/Region Field
    • Hide Zip Code field
      Example showing how to configure Product Page Shipping Calculator after enabling it from Advanced Features menu.

  7. Click the Apply button.

How to Install on BigCommerce

Steps to Enable and Configure the Product Page Calculator

  1. Log in to your ShipperHQ account
    Use your admin credentials to access the dashboard.

  2. Go to the Advanced Features page

    • Navigate to Advanced Features.

  3. Enable the Product Page Calculator

    • Find the toggle for the Product Page Shipping Calculator (PPSC) feature.

    • Click the toggle to turn it ON.

Additional Configurations (Optional)

Enhance your Shipping Calculator by exploring these additional ShipperHQ configuration options: