ShipCalc
Start free trial

Documentation

Set up and use ShipCalc.

Install ShipCalc, add the calculator to your storefront, make it match your theme, and use analytics and diagnostics. Most stores are live in a few minutes.

Last reviewed by MerchantOS.

See it before you install.Open the demo store (password: 1) or view the Shopify App Store listing.

1. Install ShipCalc

ShipCalc installs from the Shopify App Store. The 14-day free trial starts when you install, with every feature available.

  1. Open the ShipCalc listing on the Shopify App Store.
  2. Click Install and approve the app.
  3. ShipCalc opens in your Shopify admin with an onboarding checklist.

The onboarding page has one-click links that open the Theme Editor in the right place for each placement.

2. Add the product page block

The product page block lets shoppers check shipping before adding an item to the cart. It uses the currently selected variant and quantity.

  1. In ShipCalc onboarding, click Add Product Page Block. The Theme Editor opens on a product template.
  2. Click Add block in the product information section and choose the ShipCalc block.
  3. Drag it into position — under the price or under the buy buttons works well.
  4. Click Save.
TipIf you use more than one product template, add the block to each template your live products use.

3. Add the cart page block

The cart block quotes every item and quantity in the cart, so shoppers see delivery for the whole order.

  1. In ShipCalc, click Add Cart Page Block. The Theme Editor opens on the cart template.
  2. Click Add block and choose the ShipCalc cart block.
  3. Place it near the subtotal and checkout button, then Save.

4. Enable cart drawer support

Cart drawers (slide-out carts) are built differently by every theme, so ShipCalc supports them through an app embed that looks for the open drawer and places a compact, collapsible calculator above the checkout button.

  1. Open the Theme Editor and select App embeds in the left sidebar.
  2. Switch on the ShipCalc cart drawer embed.
  3. Most themes work with the automatic detection. If yours doesn’t, enter your drawer’s CSS selector in the embed settings.
  4. Click Save, then open the drawer on your live store to check placement.
Need a selector?Send us your theme name and store URL and we’ll help configure it.

5. Customise the widget

Visual and copy settings are on the Appearance page in ShipCalc, with a live preview before changes reach your storefront.

Layout and style

  • Card or minimal layout.
  • Accent, background, text, and border colours.
  • Corner radius, spacing, and text sizes.
  • Inherit your theme’s typography and basic control styles.

Wording

  • Title, helper text, and button label.
  • Country and postcode labels and placeholders.
  • Calculating, no-rates, error, and empty-cart messages.
  • A label for free delivery methods.

Custom CSS

For finer control, the CSS editor lets you add rules that target the widget — useful for theme-specific spacing or hover states.

6. Countries and postcodes

Choose where the destination country comes from:

  • Fixed country — always quote for one country you choose.
  • Shopper’s Shopify country — follow the localisation country from Shopify Markets.
  • Country selector — let shoppers pick from the countries you allow.

Then choose how postcodes work:

  • Required — the shopper must enter a postcode or ZIP.
  • Optional — shoppers can add one for a more precise quote.
  • Country only — hide the postcode field; ShipCalc can return an estimate for the chosen country.

You can also hide the calculator for visitors in selected countries, or show it only to visitors in the countries you choose.

7. Rate display options

  • Show every available rate, only the cheapest, or only the most expensive.
  • Show delivery details under a rate when Shopify returns them.
  • Use your own label for free methods (for example, “Free delivery”).

8. Manual placement (advanced)

If your theme layout doesn’t allow an app block where you need one, add a placeholder element and the ShipCalc loader to your theme:

<div data-shipcalc-m="product"></div>
<script src="/apps/shipcalc/manual.js" defer></script>

Use data-shipcalc-m="cart" for a cart placement. The manual calculator uses the same settings, styling, and analytics as the app blocks.

9. Analytics

The Analytics page shows how shoppers use the calculator:

  • Total quote requests over time and recent activity.
  • Quotes by source: product page, cart page, or cart drawer.
  • Popular postcode and country combinations.
  • Delivery methods shoppers were shown.
  • Errors, so you can spot destinations with no rates.

10. Marketing events

ShipCalc can send a Calculate Shipping event to Google Analytics 4, Google Tag Manager, and Meta Pixel when those tools are already on your storefront. ShipCalc does not install tracking scripts.

  1. Open Marketing events in ShipCalc.
  2. Choose which platforms to send to.
  3. Optionally override the event name, category, label, value, or add custom parameters.
  4. Save.

Events include the widget source (product, cart, or drawer), the country, and whether a postcode was entered.

PrivacyMarketing events never include a shopper’s name, email, full address, or cart contents.

11. Diagnostics

The Diagnostics page runs a real quote without going through your storefront — useful after changing shipping zones or rates.

  1. Open Diagnostics in ShipCalc.
  2. Pick a product, country, and postcode.
  3. Run the quote to see exactly what Shopify returns.

12. Troubleshooting

The calculator doesn’t appear on the product page

  • Check the block was added to the template your products actually use, and that you saved.
  • Make sure the block isn’t inside a hidden or collapsed section.
  • Check visitor country rules in Appearance aren’t hiding it for your location.

No rates are returned

  • Confirm the destination belongs to an active market and shipping zone in Shopify.
  • Check the product’s shipping profile and weight meet your rate conditions.
  • Run the same destination in Diagnostics to see what Shopify returns.
  • Reword the no-rates message so shoppers know what to do next.

For a deeper checklist, read Shopify shipping rates not showing.

It doesn’t show in my cart drawer

  • Confirm the cart drawer app embed is switched on and saved.
  • Try setting the drawer selector in the embed settings.
  • Contact us with your theme name.

13. Support

The ShipCalc admin has a Support page with quick answers and a contact form. You can also message us here and we’ll reply by email.