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

How to configure the Product Page Shipping Calculator

Integrate and customize real-time shipping costs on product pages in Magento 2

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 or Shopify account
  • A Standard, Pro, or Enterprise ShipperHQ plan

Additionally, Magento 2 accounts will require:

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

Steps to Enable and Configure 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 Shopify

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

Enable App Embed

  • Within Shopify, Navigate to Online Store > Themes Page. Then select Customize

  • Navigate to App embeds in the side navigation

  • Search or navigate to the ShipperHQ App Embed and toggle it on

Add to App Block to Product Page

  • Still within the Theme Customization, navigate to your Product Page Template. Then click Add Section.

  • Select Apps tab, then select ShipperHQ Product Page Calculator App Block

PPSC7 - Add PPSC-2

  • 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

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.

Additional Configurations (Optional)

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