Short answer
Shopify normally calculates destination-specific shipping rates after a customer enters an address at checkout. To show those rates earlier, add a storefront shipping-calculator app through the Shopify Theme Editor. Choose the placement first—product page for item-level questions, cart page for the complete basket, or a compatible cart drawer for fast-cart themes—then test representative products, destinations, rates, and mobile layouts before publishing.
Choose the moment that needs an answer
Product-page placement is useful when delivery cost materially changes whether someone buys an individual item. Cart placement is better when the complete basket determines eligibility or price. A drawer placement prevents the answer from disappearing when the theme uses an overlay instead of a full cart page.
- Product page: answer before add-to-cart.
- Cart page: calculate against the assembled basket.
- Cart drawer: keep the quote inside a fast shopping flow.
Add the app block through the Theme Editor
Install the calculator app, open Online Store → Themes → Customize, select the relevant product or cart template, and add the app block near the price, buy buttons, subtotal, or checkout action. Save only after previewing the placement on desktop and mobile.
Cart drawers are implemented differently across themes. Some use an app embed or selector rather than an ordinary block, so follow the app’s drawer instructions and test every add, remove, and quantity-change interaction.
Use Shopify as the rate source
A display-focused calculator should use the rates and zones already configured in Shopify. Keeping one source of truth avoids a public rate table drifting away from checkout. The final checkout result can still depend on the full address, cart, fulfilment location, and any app-calculated rate provider.
Test like a shopper
Use real postcodes or ZIP codes from every important market. Test a lightweight product, a heavy or special-profile product, a mixed cart, a free-shipping threshold, an unsupported destination, and an address near a zone boundary. Confirm the wording explains that checkout makes the final calculation.
Checklist
- Confirm products are assigned to the intended shipping profiles.
- Verify every priority destination belongs to an active market and shipping zone.
- Test product, cart, and drawer placements on mobile and desktop.
- Compare the displayed options with a real checkout test.
- Check empty, invalid, unsupported, and no-rate states.
- Track quote use after launch and review support questions.
Questions
Does Shopify include a product-page shipping calculator by default?
Shopify’s standard calculated rates are shown at checkout. A storefront app is typically used to expose destination-specific estimates earlier.
Do I need to edit Liquid code?
Modern app blocks can usually be placed through the Theme Editor. Some cart drawers may need an app embed or theme-specific selector.
Should I add the calculator to both product and cart pages?
Use both when shoppers need an early item-level answer and a later order-level confirmation. Start with the placement closest to the strongest customer question.