# Shipping estimate

> A form where the visitor types a country and a postal code and reads the delivery options Shopify has for that address, with their prices, before the checkout.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/features/shipping-estimate  
Updated: 2026-10-30

With a shipping estimate form, a visitor types a country and a postal code and sees the delivery options Shopify has for that address, with their prices, before going to the checkout. Smootify puts the address on the visitor’s cart and asks Shopify for its rates. The visitor picks one, and the cart total follows. The checkout then opens with that country, postal code and option already filled in. The cart is the usual place for it, under the lines and above the total.

> [!NOTE]
> It works on every Smootify plan, the free one too, with no add-on to turn on. The options and their prices are the shipping rates you set in Shopify (**Settings › Shipping and delivery**).

## 1. Add the form

Add a Custom element with the tag `shipping-estimate`, and put a Form Block inside it. It can go anywhere, inside the cart too: the cart never takes this form as its own.

Inside the Form, add these fields. Smootify reads their **Name**, a setting of the field in Webflow, not a custom attribute, in any case:

- **Country**: a Select named `Country`. Smootify also reads `Country Code`, `Paese` and `Nazione`. Leave it with only its placeholder option: Smootify fills it with the countries of your Shopify markets and chooses the cart’s country, or the market’s when the visitor has no cart yet. Without a country field, or with none chosen, that country is used.
- **Postal code**: a Text field named `Zip`. Smootify also reads `Zip Code`, `Postal Code`, `Postcode` and `CAP`.
- **Province**, optional: a Text field or Select named `Province`. Smootify also reads `State`, `Region` and `Provincia`. Add it for countries where Shopify’s rates change by province or state.
- a Form Button. Its **Waiting text** setting, such as “Calculating…”, shows while Smootify asks Shopify.

## 2. Show the options

Under the form, add one element with `shipping-option="item"`. Smootify copies it once per delivery option. Inside it:

- `shipping-option="title"`: the name of the rate in Shopify, such as “Standard”.
- `shipping-option="price"`: its price, in the site’s price format. A rate at 0 shows “Free”, or the text you write in `data-free-text` on `shipping-estimate`, such as `data-free-text="Gratis"`.
- `shipping-option="description"`: the rate’s description, hidden when the rate has none.

The three are optional: use only the ones your design needs.

```html
<shipping-estimate data-error-no-options="No delivery options for this address" data-free-text="Free">
  <div class="w-form">
    <form>
      <select name="Country"><option value="">Country</option></select>
      <input name="Zip" placeholder="Postal code">
      <input type="submit" value="Estimate" data-wait="Calculating…">
    </form>
    <div class="w-form-fail"><div>No delivery options for this address</div></div>
  </div>
  <div shipping-option="item">
    <div shipping-option="title">Standard</div>
    <div shipping-option="description">3–5 business days</div>
    <div shipping-option="price">€0.00</div>
  </div>
</shipping-estimate>
```

The option in the cart’s total gets the class `is-selected`: style it as the chosen one. A click on another option selects it, and the cart total and `cart="shipping"` follow (see [Build the cart](https://www.smootify.io/docs/build/cart)).

The form stays visible after the estimate, so the visitor can try another address: there is no Success message to design. Leave the form’s **Redirect URL** setting empty.

## 3. States and the error

Smootify puts these classes on `shipping-estimate`:

- `is-loading` while it asks Shopify;
- `is-estimated` when the options are shown;
- `no-options` when Shopify has no option for that address.

With `no-options`, the form’s Error message shows. Smootify writes “No delivery options for this address” in the Text block inside it, unless you write your own in the custom attribute `data-error-no-options` on `shipping-estimate`. Use it to write the message in your site’s language.

## How it follows the cart

- **The options follow the cart.** Adding, removing or changing a line asks Shopify again, so a free shipping threshold shows as soon as the cart reaches it.
- **An address already on the cart** fills the form and shows its options when the page loads: one the visitor typed before, or a logged-in customer’s.
- **The checkout starts from the estimate.** It opens with the country, the postal code and the option the visitor chose.
- **An empty cart asks nothing.** Shopify has rates only for lines that ship.
- **Delivery rules apply at the checkout.** The Smootify app’s [delivery rules](https://www.smootify.io/docs/features/delivery-rules) rename or hide rates in the checkout only. The estimate shows Shopify’s rates before those rules.

## Before you publish

> [!STUCK]
> - **No country in the select.** The select has options of its own besides the placeholder. Leave only the placeholder, and Smootify fills it with your markets' countries.
> - **"No delivery options for this address" for an address you ship to.** Check the shipping zones in Shopify (**Settings › Shipping and delivery**): the country or the postal code is not in a zone of the products' shipping profile.
> - **Nothing happens on submit.** The cart is empty: add a product first.
> - **A rate shows in the estimate and not in the checkout, or with another name.** A delivery rule changes it at the checkout.
> - **The error message is in English.** Write your own in `data-error-no-options`.