International Shipping & DDP

Adding the landed-cost widget to Shopify

Drop a single script tag into your theme and shoppers see real-time DDP duties and taxes right in the cart.

How the widget works

The landed-cost widget is a small JavaScript file—landed-cost.v1.js—that reads the customer’s cart and destination, calls ShipWave (which calls Zonos), and renders the duties/tax breakdown directly in the cart sidebar or on the checkout page. The widget never sees secrets—auth is via a public store key tied to your domain.

Embedding in your Shopify theme

Open your theme editor and add the script tag near the bottom of theme.liquid:

<script async src="https://shipwave.app/widgets/landed-cost.v1.js" data-store-key="YOUR_STORE_KEY"></script>

Find your store key in Admin → Settings → Landed Cost → Widget. The widget auto-attaches to a div with id shipwave-landed-cost—or you can pass data-target="#my-custom-id" to mount somewhere else.

CORS allowlist

For security, ShipWave only responds to widget calls from domains you have allowlisted. Add your store domain (and any preview domains like your-store.myshopify.com) under Settings → Landed Cost → Allowed Origins. Calls from other domains return 403, so a competitor cannot scrape your duty pricing.

Cart attribute writeback

When the shopper accepts a DDP quote, the widget writes two attributes onto the Shopify cart: shipwave_incoterm (set to DDP or DDU) and shipwave_landed_cost_quote_id (a stable UUID for the quote). ShipWave reads these attributes when the order syncs, so the warehouse knows to print a DDP label without any manual flagging.

What shoppers see

The widget renders a clean breakdown: items subtotal, shipping, duties, import taxes, brokerage fee, and a final landed-cost total. Currency follows the shopper’s Shopify market (USD, CAD, GBP, EUR, etc.). A toggle lets the shopper switch between DDP and DDU when both are enabled for their country. The breakdown updates live as they change destination or cart contents.

FAQs

Does the widget slow down my checkout?
No. The script loads <code>async</code>, weighs about 18KB gzipped, and only fires the quote call once a destination address is known.
What if the shopper changes the cart after seeing a quote?
The quote auto-refreshes within 600ms of the cart event. The quote ID rotates and the old one is invalidated server-side.
Can I customize the widget styling?
Yes. The widget exposes CSS custom properties (<code>--sw-bg</code>, <code>--sw-text</code>, etc.) so you can theme it to match your store.
Does the widget work outside Shopify?
Yes. The same script works on any storefront&mdash;BigCommerce, custom React storefronts, even WooCommerce&mdash;as long as it can mount a script tag and read the cart in a known shape.

More in International Shipping & DDP