Articles on: Widgets

Shipping estimate widget

The shipping estimate widget displays on your storefront, allowing customers to see shipping rates before checkout. Customers enter their postcode and country to view available shipping options for their current cart

Add the widget to help customers:

Understand shipping costs before starting checkout
Compare shipping options for their location
See total order costs including shipping

Common placements include cart pages and product pages.

Your theme must support app blocks (all modern Online Store 2.0 themes do).

In Postcode Shipping, navigate to Widgets > Shipping Estimate
Click Add widget to theme
In the Shopify theme editor, find where you want the widget to appear
Click Add block and select Shipping Estimate Widget under Apps
Adjust styling and settings in the theme editor sidebar
Click Save

The widget appears immediately on your live store once saved.

Set a title like "Estimate shipping" or "Calculate shipping costs". Leave blank to hide the title.

Rate Source

Choose where the widget fetches rates:

Via Shopify (recommended)

Shows rates as they'll appear at checkout
Includes rates from all sources (Postcode Shipping and other carrier apps)
Works reliably across all browsers and shop configurations

Via Postcode Shipping

Shows only rates from Postcode Shipping
Slightly faster
May encounter browser security restrictions depending on your shop domain

If customers see errors when fetching rates, switch to Via Shopify.

Styling

Customize the widget to match your theme using the theme editor's visual controls:

Box styles:

Border radius (rounded corners)
Border width and color
Background color
Spacing above and below

Element styles:

Text color
Primary theme color (buttons)
Element corners (rounded edges)

All styling updates preview live in the theme editor. No coding required.

For additional customization not available in the theme editor, contact support.

Customer views the widget on your store (e.g., cart page)
Customer enters their postcode and selects their country
If required, customer selects their state/province (hidden for countries like UK where not needed)
Customer clicks Get Rates
Available shipping rates display with prices and descriptions
Customer clicks Reset to check a different location

The widget remembers the entered postcode and country during the browsing session for convenience.

Understanding the Country List

The country dropdown shows all countries in your store's Markets, not just countries you ship to.

Why so many countries? Markets define where your store operates, which may include countries you don't currently ship to. The widget displays rates only when shipping is available to the selected country.

If a customer selects a country you don't ship to, they'll see "No rates available for address and cart contents."

Common Messages

"Your cart is empty." The cart contains no items. Customers must add products before estimating shipping.

"No rates available for address and cart contents." No shipping options exist for the entered location or cart contents. This may mean:

You don't ship to that country or postcode
Cart contents don't qualify for any rates (e.g., too heavy, no matching product groups)
The postcode was entered incorrectly

"Please fill in all fields." Customer must enter postcode and select country. State/province required for some countries.

"Invalid address: [details]" The entered address doesn't match expected format. Customer should verify postcode and try again.

"An error occurred while fetching rates." Request failed. Customer should try again. If the problem persists, switch Rate Source to Via Shopify in widget settings.

Best Practices

Choose the Right Placement

Place the widget where customers naturally consider shipping costs:

Cart page - Helps customers understand total costs before checkout
Product page - Useful for high-ticket or heavy items where shipping significantly impacts purchase decisions

Test Before Launch

After adding the widget:

Add products to your cart
Enter various postcodes from locations you ship to
Verify rates display correctly and match what appears at checkout

Set Accurate Rate Descriptions

When configuring shipping rates in Postcode Shipping, add clear descriptions. These appear in the widget to help customers choose the right option.

Monitor for Issues

If customers report the widget not working:

Verify the widget is still added to your theme (theme updates can remove app blocks)
Check Rate Source setting - switch to Via Shopify if seeing errors
Test with your own cart to reproduce the issue
Contact support if rates don't match what appears at checkout

Troubleshooting

Confirm your theme supports app blocks (Online Store 2.0 themes)
Check the widget is added in the theme editor
Verify it's placed in a section that displays on the relevant template

Rates Don't Display

Ensure your cart has items
Verify you have active shipping rates configured in Postcode Shipping
Check the entered postcode is within a region you ship to
Try switching Rate Source to Via Shopify

Wrong Rates Showing

If rates differ from checkout:

Switch Rate Source to Via Shopify for the most accurate representation
Verify your shipping configuration matches your actual checkout settings

Error Messages

If customers see repeated error messages, switch Rate Source to Via Shopify in widget settings. This resolves most browser-related issues.

Updated on: 06/03/2026

Was this article helpful?

Thank you!