> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.postcodeshipping.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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. ## Adding the Widget to Your Store Your theme must support app blocks (all modern Online Store 2.0 themes do). 1. In Postcode Shipping, navigate to **Widgets > Shipping Estimate** 2. Click **Add widget to theme** 3. In the Shopify theme editor, find where you want the widget to appear 4. Click **Add block** and select **Shipping Estimate Widget** under Apps 5. Adjust styling and settings in the theme editor sidebar 6. Click **Save** The widget appears immediately on your live store once saved. ## Configuring the Widget ### Widget Title 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. ## How Customers Use the Widget 1. Customer views the widget on your store (e.g., cart page) 2. Customer enters their postcode and selects their country 3. If required, customer selects their state/province (hidden for countries like UK where not needed) 4. Customer clicks **Get Rates** 5. Available shipping rates display with prices and descriptions 6. 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: 1. Add products to your cart 2. Enter various postcodes from locations you ship to 3. 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 ### Widget Doesn't Appear * 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.