Shipping Information
Display shipping time and cost on your product pages to reduce cart drop-offs.
Shipping Information shows visitors how soon and at what cost their order can arrive, right on the product page. Customers get a clear answer before checkout, so they're not surprised by fees or delivery times at the last step.
Which mode should I pick?
| Pick Delivery Date if... | Pick Dynamic Shipping Rates if... |
|---|---|
| You want the simplest setup and one estimated delivery date for all customers. | Your shipping cost and speed vary a lot by country or carrier. |
| You ship from one location with consistent processing and transit times. | You want each visitor to see the rates that apply specifically to their country. |
| You'd rather not manage shipping zones inside Vitals. | You already have well-configured shipping zones in Shopify. |
| Example: "Order now to get it by May 30." | Example: "Ships to Germany in 3 to 5 business days, for $9.99." |
You pick the mode from the Mode card on the Settings tab. The rest of the settings change to match your choice. You can switch modes any time.
Delivery Date mode
Shows a single estimated delivery date (or date range) calculated automatically from your processing time, weekend toggles, transit time, and store timezone. No zones to maintain.
What customers see
Something like "Order now to get it by May 30" right below the Add to Cart button. The date updates automatically based on the time of day and when your daily cut-off passes.
Optional add-ons
- Live countdown — A ticking timer to your daily cut-off: "Order within 2h 14m to get it by May 30." Creates urgency for same-day shipping. The countdown automatically hides once the cut-off passes.
- Free shipping message — A note below the date when the order qualifies, using the threshold you set.
When to use the live countdown
Good for stores where same-day shipping is a real selling point. Skip it if you'd rather not pressure shoppers, or if your processing time is long enough that the countdown doesn't change the delivery date in a meaningful way.
Setup, step by step
- Open the Shipping Information app in your Vitals dashboard and go to the Settings tab.
- In the Mode card, pick Delivery Date.
- Set your Processing time (business days you need before handing the order to the carrier) and your Daily cut-off time.
- Toggle We ship on weekends for Saturday and Sunday based on your warehouse schedule.
- Set Minimum transit time and Maximum transit time, and toggle The carrier delivers on weekends to match how your carrier works.
- (Optional) Turn on Show live countdown for urgency.
- (Optional) Turn on Show free shipping message and set your Free shipping threshold.
- Match the widget to your store under Appearance — accent color, background, text color, corner radius, and margin.
- (Optional) Edit the message templates under Messages. Keep the
{{ date }},{{ time }}, and{{ price }}placeholders intact so real values fill in. - Open a product page on your storefront and confirm the date and copy look right.
Dynamic Shipping Rates mode
Detects each visitor's country and shows the rates that apply to that location, pulled straight from your Shopify shipping settings.
Before you start: Your shipping zones and rates must already be set up in Shopify admin → Settings → Shipping. Only the General Profile and price-based rates are imported. If no rates are configured, the widget stays hidden.
What customers see
A visitor in Germany sees German rates. A visitor in the US sees US rates. The widget filters those rates by the product's price too, so "Free shipping over $50" only shows up when it actually applies.
If more than two rates apply, customers get a See all shipping options button to expand the list.
Setup, step by step
- Confirm your shipping zones and rates are configured in Shopify admin → Settings → Shipping.
- Open the Shipping Information app in your Vitals dashboard and go to the Settings tab.
- In the Mode card, pick Dynamic Shipping Rates.
- Switch to the Shipping Estimates tab and click Sync now to pull in zones from Shopify.
- For each zone, click into each rate and set its Minimum Estimate, Maximum Estimate, and Interval Type (Days, Business Days, Weeks, or Business Weeks). Set Status to Active for the rates you want shown.
- Back in Settings, tweak the Free shipping text template and Paid shipping text template if you want different wording.
- Decide on Display all shipping rates — leave on if you want customers to expand the full list, turn off if you'd rather only show the most relevant ones.
- Set Background color, Border color, Text color, and Margin under Appearance.
- (Optional) Open the Translations tab and adjust time-unit labels and button labels for your store's languages.
- Open a product page from a country you've configured and confirm the right text appears.
Updating rates after Shopify changes
Whenever you change shipping in Shopify, come back to the Shipping Estimates tab and click Sync now. The last sync time appears under the button.
Tips for Getting the Most Out of It
- Be honest about transit times. Promising "2-3 days" and delivering in 7 hurts more than promising "5-7" and delivering in 4. Set ranges you can hit consistently.
- Match your store's look. Tune the colors and corner radius so the widget feels native to your theme rather than a third-party add-on.
- Check the mobile view. Most shoppers are on phones. Open a product page on your phone after setup to confirm the spacing and font look right.
- Use the free shipping message strategically. If your threshold pushes average order value up, surfacing it on the product page is a low-effort win.
- Don't over-rely on the countdown. It works best for fast-shipping stores. If your cut-off is 24 hours away and your transit is 7 days, the urgency feels manufactured.
- Translate the time units. If you sell in multiple languages, take 5 minutes on the Translations tab so customers don't see "Business days" in English on a Spanish store.
Frequently Asked Questions
How does Delivery Date mode calculate the date?
It uses today's date, the time of day relative to your daily cut-off, your processing time, weekend ship/deliver toggles, minimum and maximum transit time, and the store's timezone. Orders placed after the cut-off are pushed to the next eligible business day, then transit time is added. The result is either a single date or a date range, shown in the customer's locale.
What does the live countdown actually do?
It's a ticking time string ("Order within 2h 14m to get it by May 30") that counts down to your daily cut-off. Once the cut-off passes, the countdown hides and the date recalculates to the next business day. It's purely visual — nothing changes about how the order is processed.
Where do Dynamic mode rates come from?
Your Shopify shipping settings. Edit zones and rates in Shopify → Settings → Shipping, then click Sync now in the Shipping Estimates tab to refresh. Only the General Profile and price-based rates are imported.
Why isn't the widget appearing on my product pages?
In Delivery Date mode, it appears on every product page available for sale — no extra setup beyond picking the mode.
In Dynamic Shipping Rates mode, the widget only shows once at least one shipping rate is configured. If it's not showing, go to Shipping Estimates and click Sync now. The widget also stays hidden for visitors whose country has no matching rate — customers either see useful info or no widget at all.
Why doesn't the widget show all my rates at once in Dynamic mode?
By default it shows free shipping options and the rates that match the product's price. To let customers expand the full list, turn on Display all shipping rates in the Preferences section. A button will appear in the widget.
How do I change the wording shown to customers?
In Delivery Date mode, edit the templates in the Messages card on the Settings tab.
In Dynamic Shipping Rates mode, edit the Free shipping text template and Paid shipping text template in the Format card.
Keep the placeholders ({{ date }} , {{ time }} , {{ price }} , {{ country }} , etc.) so real values fill in.
Why is a shipping rate showing a "Profile has missing info" warning?
That rate is missing its Interval Type. Click into the rate, pick Days, Business Days, Weeks, or Business Weeks, and save. The warning clears and the rate appears on the storefront.
Can I customize text for different languages?
Yes. In Dynamic Shipping Rates mode, the time-unit words and button labels are editable per language on the Translations tab. In Delivery Date mode, edit the templates in the Messages card for each store language. The widget uses the right translation based on the visitor's language.
Where does the widget appear on the product page?
By default, just below the Add to Cart area. You can move it from the Position section in Settings. This works the same in both modes.
Will customers see updated rates immediately after I save?
Yes. New page loads use the new values right away.
Does it work with multiple currencies?
Yes. Prices in the widget (free shipping thresholds, paid shipping fees) follow whatever currency the customer is browsing in. Works in both modes.
Why doesn't the widget appear on some products in Dynamic mode?
The widget only appears on product pages where the product is available for sale and where there's a shipping rate that applies to the visitor's country. Out-of-stock products and unmatched countries hide the widget.
Settings Reference
Mode
| Setting | Type | Description |
|---|---|---|
| Mode | Radio cards | Pick Delivery Date (recommended, simple setup) or Dynamic Shipping Rates (zone-based, advanced). All settings below change based on your choice. |
Delivery Date — Processing time
| Setting | Type | Description |
|---|---|---|
| Processing time | Number field (business days) | Time between receiving an order and handing it to the carrier. Use 0 for same-day. Default: 1. |
| Daily cut-off time | Dropdown | The hour after which new orders process the next business day. |
| We ship on weekends | On/Off toggles | Saturday and Sunday, independently. |
| Show live countdown | On/Off toggle | Adds a ticking countdown to your daily cut-off. |
Delivery Date — Shipping time
| Setting | Type | Description |
|---|---|---|
| Minimum transit time | Number field (business days) | Lower bound of transit estimate. Default: 3. |
| Maximum transit time | Number field (business days) | Upper bound. Default: 5. Must be greater than or equal to minimum. |
| The carrier delivers on weekends | On/Off toggles | Saturday and Sunday, independently. |
Delivery Date — Free shipping
| Setting | Type | Description |
|---|---|---|
| Show free shipping message | On/Off toggle | Adds a free shipping note when the order qualifies. |
| Free shipping threshold | Number field (store currency) | Order value above which free shipping applies. |
Delivery Date — Appearance
| Setting | Type | Description |
|---|---|---|
| Accent color | Color picker | Accent color inside the card. |
| Background color | Color picker | Card background. |
| Text color | Color picker | Card text. |
| Corner radius | Slider (0–32 px) | How rounded the card's corners are. |
| Margin | Spacing | Top and bottom spacing, tunable separately for desktop and mobile. |
Delivery Date — Messages
| Setting | Type | Description |
|---|---|---|
| Delivery date message template | Text field | Default: "Order now to get it by {{ date }} ." |
| Delivery date countdown message template | Text field | Shown when live countdown is on. Default: "Order within {{ time }} to get it by {{ date }} ." |
| Free shipping message template | Text field | Shown when free shipping message is on. Default: "Free shipping over {{ price }} ." |
Dynamic Shipping Rates — Format
| Setting | Type | Description |
|---|---|---|
| Free shipping text template | Text field | Wording for free shipping options. Placeholders: {{ country }} , {{ min_value }} , {{ max_value }} , {{ min_interval }} , {{ max_interval }} , {{ interval_type }} . |
| Paid shipping text template | Text field | Same placeholders plus {{ price }} . |
Dynamic Shipping Rates — Preferences
| Setting | Type | Description |
|---|---|---|
| Display all shipping rates | On/Off toggle | When more than two rates apply, shows an expand button. On by default. |
Dynamic Shipping Rates — Appearance
| Setting | Type | Description |
|---|---|---|
| Background color | Color picker | Widget background. Default: white. |
| Border color | Color picker | Widget border. Default: light grey. |
| Text color | Color picker | Widget text. Default: dark grey. |
| Margin | Slider | Spacing above and below the widget. |
Dynamic Shipping Rates — Translations
| Setting | Type | Description |
|---|---|---|
| Hide shipping options button | Text field | Label shown after the list is expanded. |
| See all shipping options button | Text field | Label on the expand button. |
| Day / Days | Text field | Time-unit label for days. |
| Business day / Business days | Text field | Time-unit label for business days. |
| Week / Weeks | Text field | Time-unit label for weeks. |
| Business week / Business weeks | Text field | Time-unit label for business weeks. |
Per shipping rule (Dynamic mode, set on each zone's rate)
| Setting | Type | Description |
|---|---|---|
| Minimum Estimate | Number field | Lower bound of delivery time. |
| Maximum Estimate | Number field | Upper bound. Required, must be 1 or more. |
| Interval Type | Dropdown | Days, Business Days, Weeks, or Business Weeks. Required. |
| Status | Dropdown | Active or Inactive. Inactive rules are hidden from the storefront. |