Documentation

Set up and use ShipCalc.

This guide walks through installing ShipCalc, adding the shipping calculator to your storefront, customising the look, and using the analytics and marketing event features. If you get stuck, please reach out.

1. Install ShipCalc

ShipCalc installs from the Shopify App Store. Once installed, the 7-day free trial starts and ShipCalc opens in your Shopify admin.

Open the Shopify App Store and search for ShipCalc.
Click Install and approve the app.
The ShipCalc onboarding screen opens in your Shopify admin.

From the onboarding screen you can jump straight to adding the Product Page Block, Cart Page Block, or Cart Drawer embed.

2. Add the Product Page Block

The Product Page Block is the most common placement. It lets shoppers check shipping before they add an item to the cart.

From the ShipCalc onboarding page, click Add Product Page Block. This opens your Theme Editor on a product page.
Find a position in the Product Page layout where you want the calculator. Common spots are below the price, below the buy buttons, or in a tab near the product description.
Click Add block and choose ShipCalc — Calculate Shipping.
Drag the block into the position you want.
Click Save in the Theme Editor.

Tip. If you sell to multiple countries, consider enabling the country selector for the Product Page Block.

3. Add the Cart Page Block

The Cart Page Block shows shipping options for the items the shopper has already added.

From the ShipCalc admin, click Add Cart Page Block. This opens your Theme Editor on the Cart Page.
Click Add block and choose the ShipCalc Cart Page Block.
Drag the block into the position you want, usually near the cart totals.
Click Save.

4. Cart Drawer Support

ShipCalc supports compatible Cart Drawers through an app embed. Cart Drawers vary by theme, so this placement may need a small configuration step.

Open your Theme Editor and switch to the App embeds section in the left sidebar.
Find ShipCalc — Cart Drawer and turn it on.
If your theme uses a non-standard drawer, set the drawer selector in the embed settings. Most themes work with the default selector.
Click Save.

Need help. If the calculator does not appear in your drawer, share your theme name from the contact page and we will help you set the right selector.

5. Customise the widget

All visual and copy settings live in the ShipCalc admin under Appearance. Changes are previewed live before they go to the storefront.

Layout and colours

Choose between a card layout or a minimal layout.
Set accent, background, text, and border colours.
Adjust border radius and vertical spacing.
Set title size, body text size, and result text size.
Optionally inherit your theme typography and basic control styles.

Wording

Title text, helper text, and button label.
Postcode label, postcode placeholder, and country label.
Calculating label, no-rates message, error message, and empty-cart message.

Custom CSS

For finer control, the CSS editor lets you target the widget with custom rules. Use this for layout tweaks, hover states, or theme-specific adjustments.

6. Country and postcode

You can set a default country and decide whether shoppers can change it. If you sell internationally, the country selector helps shoppers pick the right destination before getting a quote.

Set a default country for the calculator.
Show or hide the country selector.
Choose which countries appear in the selector.

ShipCalc validates postcodes against the country chosen, so the quote returns rates for the correct destination.

7. Rate display options

You can choose how returned rates are presented to shoppers.

Show all available rates from Shopify.
Focus on a single rate style, such as the cheapest or most expensive.
Show delivery details under a rate when Shopify returns them.

8. Analytics

The Analytics page in the ShipCalc admin shows how shoppers are using the widget across your storefront.

Total quote requests over time.
Recent quote activity.
Quotes from Product Pages versus Cart and Drawer.
Popular postcode and country combinations.
Delivery methods shown.
Errors, if any.

9. Marketing events

ShipCalc can send a Calculate Shipping event to your existing analytics tools. This works with Google Analytics, Google Tag Manager, and Meta Pixel when those scripts are already on your storefront.

Enable events

Open the Marketing events page in the ShipCalc admin.
Choose which platforms to send to.
Set the event name, category, label, and value if you want to override the defaults.
Save your settings.

What is included

Event name, category, label, value, and any custom parameters.
Source of the widget (Product Page, Cart Page, or Cart Drawer).
Country and whether a postcode was entered.

Privacy. Marketing events do not send customer email, customer name, full address, or cart contents.

10. Diagnostics

The Diagnostics page lets you run a real shipping quote without testing through your live storefront. This is useful when checking new shipping rates or zones.

Open the Diagnostics page in the ShipCalc admin.
Pick a product, country, and postcode.
Click Run quote to see what Shopify returns.

11. Troubleshooting

The widget does not appear on my product page

Open the Theme Editor and confirm the ShipCalc Product Page Block was added and saved.
Make sure the block is positioned somewhere visible.
Try a different position if it is hidden by another section.

No rates are returned

Check that your Shopify shipping settings include rates for the destination country and weight of the product.
Run a quick check from the Diagnostics page to see what Shopify returns.
Update the no-rates message in the appearance settings so shoppers see a helpful note.

The calculator does not show in my Cart Drawer

Confirm the Cart Drawer app embed is enabled in the Theme Editor.
Check the drawer selector in the embed settings.
Contact us with your theme name if the default selector does not work.

12. Support

The ShipCalc admin includes a Support page with quick answers and a contact form. You can also message us through this site and we will reply by email.