Shipping estimate

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.

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.

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).

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 rename or hide rates in the checkout only. The estimate shows Shopify’s rates before those rules.

Before you publish