Table of Contents
- Overview
- Requirements
- Steps to Enable Product Page Shipping Calculator by Platform:
- Additional Configurations (Optional)
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
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
-
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.
Customize
- The Product Page Shipping Calculator button color is customizable using your Shopify store theme settings
-2.png?width=670&height=382&name=PPSC11%20-%20Color%20Settings%20(optional)-2.png)
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 2
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
- Enable Maintenance mode:
php bin/magento maintenance:enable - Run the following commands from your root Magento installation directory:
composer require shipperhq/module-shq-product-pagephp bin/magento module:enable --clear-static-content ShipperHQ_ProductPagephp bin/magento cache:flushphp bin/magento setup:upgradephp bin/magento setup:di:compilephp bin/magento setup:static-content:deploy
-
Disable Maintenance mode:
php bin/magento maintenance:disable
Steps to Sync with Magento
- Log into your Magento account.
- Navigate to Stores > Other Settings > Synchronize with ShipperHQ.
- Click the Synchronize button to enable the Product Page Shipping Calculator.
- Congratulations, you have successfully enabled the Product Page Shipping Calculator.
Follow these steps to enable and configure the Product Page Calculator.
- Log into your ShipperHQ account.
- Navigate to Manage Shipping > Advanced Features page.
- Click the toggle to enable the feature.
- Click the Proceed button.
- Click the Settings tab.
- Select the desired settings:
- Default country
- Hide Country Field
- Hide State/Region Field
- Hide Zip Code field
-
Click the Apply button.
You can additionally customize the look and feel of the Shipping Calculator. See How to Theme the Product Page Shipping Calculator on Magento 2 for details.
How to Install on BigCommerce
To enable the Product Page Shipping Calculator feature in BigCommerce, log in to your ShipperHQ account and go to Advanced Features.
Locate the Product Page Shipping Calculator feature and toggle it on to enable it.
This feature does not support Multi Store Front (MSF). Please note that the Product Page Shipping Calculator featurewill only work for your primary BigCommerce storefront.
You can customize the look and feel on your product page — see Customizing the Product Page Shipping Calculator on BigCommerce for details.