Delivery messages

Configure how estimated delivery dates are displayed.

Deprecated feature

This feature is deprecated and will be removed soon. We recommend all merchants to disable this feature and migrate to widgets .

The displayed delivery message depends on the respective transport time and the delivery date.

TemplateWhen is it used?
Template for delivery date as date rangeUsed when transit time is configured as a range, for example 2-3 days.
Template for single delivery dateUsed when delivery date is not tomorrow.
Template for next day deliveryUsed when delivery date is tomorrow.

Delivery messages

Variables

Variables are placeholders for dynamic content in your delivery messages. A variable is enclosed in double curly brackets, for example {{date}}.

Options for a variable are separated by a space, for example {{countdown show_seconds="never"}}.

Date

{{date}} displays a date in a specific format.

Example

--- Template
Delivery between {{date type="delivery_min" format="[dddd], [mmm]. [dd]"}} and {{date type="delivery_max" format="[dddd], [mmm]. [dd]"}}.

--- Output
Delivery between Monday, Mar. 07 and Thursday, Mar. 10.

Options

NameDescription
typeRequired - Use delivery_min and delivery_max to display delivery dates in the template for delivery date as date range. Use delivery for other templates. Use dispatch to display shipping date.
formatRequired - See date formats table below.

Date formats

SymbolExampleDescription
[dddd]MondayDay name
[ddd]MonFirst three characters of day name
[dd]01Day of month number with trailing zero (from 01 to 31)
[d]1Day of month number (from 1 to 31)
[S]stOrdinal suffix
[mmmm]JanuaryMonth name
[mmm]JanFirst three characters of month name
[mm]01Month with leading zero from 01 to 12
[m]1Month from 1 to 12
[yyyy]20224 digit year
[yy]222 digit year

The names of weekdays and months are translated automatically.

Countdown

{{countdown}} displays a countdown to the next available shipping date.

Shipping countdown

Example

--- Template
Order within {{countdown show_seconds="never"}}

--- Output
Order within 14 hrs and 20 min

Options

NameDescription
unit_formatlong for written out or short (default) for abbreviated time units.
show_secondsalways (default), never, 4_hours, 3_hours, 2_hours, 1_hour
hide_zero_valuestrue (default) or false, for example: 20 min 20 sec versus 0 days 0 hrs 20 min 20 sec
leading_zerostrue or false (default), for example: 20 min 1 sec versus 20 min 01 sec
separatorChange unit separator, for example: 1 day, 2 hrs, 20 min and 10 sec
last_separatorChange separator for last unit, for example: 2 hrs, 20 min and 10 sec
dayOverride translation for "day"
daysOverride translation for "days"
hourOverride translation for "hour"
hoursOverride translation for "hours"
minuteOverride translation for "minute"
minutesOverride translation for "minutes"
secondOverride translation for "second"
secondsOverride translation for "seconds"

Delivery message position

The delivery message can be displayed anywhere on your product pages. We recommend placing it below or near the "Add to Cart" buttons.

Delm uses a CSS selector to insert delivery messages into your product pages. CSS selectors are generally used to target HTML elements on web pages.

Get in touch

Please contact us if you need help integrating Delm with your Shopify theme.

Change position in Shopify theme code editor

Alternatively, you can set up Delm to control the position of the delivery message directly in your theme code editor.

This is useful if you want to move the delivery message freely in your theme code editor, or if you can't find the right CSS selector.

  1. Navigate to Shopify themes.
  2. Click "Edit code" on the theme you want to edit.
  3. Open any .liquid file that is used on product pages.
  4. Paste the code snippet below in the desired location and save the file.
  5. In Delm, change the CSS selector to #delm-app and save.
html
<div id="delm-app"></div>

Disable Shopify ScriptTag API

The Shopify ScriptTag API allows us to install JavaScript files on your storefront. If you want to include our JavaScript file manually, you can disable the Shopify ScriptTag API in Delm.

Note

Shopify has announced that the ScriptTag API will no longer be available the future. We are working on a solution to replace the ScriptTag API with a theme app extension.

How to manually include the Delm JavaScript file?

Note

JavaScript files that you include manually are not removed automatically when you uninstall Delm.

  1. Navigate to Shopify themes.
  2. Click "Edit code" on the theme you want to edit.
  3. Search files for theme.liquid and open it.
  4. Locate </head> in theme.liquid and paste the code snippet below before </head>.
  5. Save changes.
html
<script async src="https://cdn.delm.io/deliverymessage.js"></script>

Common questions

Can I show different delivery messages for specific products?

That's not possible yet.

Delm
Delm is a fully customizable and multilingual Shopify app for calculating and displaying delivery data.
Shopify App Store
Made in Germany