Hi!
I followed the tutorial but when I select Canada, it doesn’t allow me to choose the province, so when I click calculate nothing happens.
Any idea on why this may be happening or how could I fix it?
Thanks!
Topic summary
Tutorial Overview:
This advanced tutorial explains how to add a shipping rates calculator to Shopify cart pages, allowing customers to estimate shipping costs before checkout. The implementation differs between sectioned (newer) and non-sectioned (pre-October 2016) themes.
Key Features & Limitations:
- Works with carrier-calculated and manual rates
- Uses customer’s default address if logged in
- Only functions on cart page (not cart drawer/popup)
- Does not calculate taxes
- Currently incompatible with Shopify Plus multi-currency stores
- Rates are approximations based on country/province/zip code only
Implementation Issues Reported:
- Most common problem: Calculator displays but “Calculate Shipping” button doesn’t work—shows “Calculating…” then returns to default state without results
- JavaScript conflicts: Many users report the code breaks other theme functionality (predictive search, quantity updates, menu navigation)
- Theme compatibility: Particularly problematic with Simple, Debut, and Supply themes
- Multi-currency: Calculator displays wrong currency symbol without conversions
Workarounds & Solutions:
- Some users successfully placed JavaScript in
theme.liquidbefore</body>tag instead ofvendor.js/theme.js - Third-party apps like “Shipping Rates Calculator” by Code Black or “In-Cart Shipping Rates” offer paid alternatives ($6.99/month)
- Community debate exists about whether showing shipping costs pre-checkout reduces abandoned carts or prevents email capture
Current Status:
Many users remain unable to implement the free solution successfully. The tutorial appears outdated for newer themes like Dawn 4.0, with ongoing requests for updated documentation or native Shopify integration.