Delivery messages

The active delivery message on your product pages depends on the respective transit time and the calculated delivery date.

Delivery messageWhen is it used?
Delivery message with delivery date as rangeTransit time is configured as a range of numbers, for example 2 to 3 days.
Delivery message with single delivery dateDelivery date is NOT tomorrow.
Delivery message for next day deliveryDelivery 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 .

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 delivery message with delivery date as range. Use delivery to display delivery date in single and next day delivery message. Use dispatch to display dispatch 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 dispatch date.

Shipping countdown

Example

--- Template
Order within {{countdown unit_format="short" 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.

SelectorGadget

We recommend using SelectorGadget if you are not familiar with Chrome DevTools. SelectorGadget is a tool that shows you the CSS selector for any element on a web page.

SelectorGadget

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 your 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. Stores with many installed apps can experience degraded script load times because of the ScriptTag API.

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.

If you disable the Shopify ScriptTag API in Delm, you must manually include the Delm JavaScript file.

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 your 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 your changes
html
<script async src="https://cdn.delm.io/deliverymessage.js"></script>

Frequently asked questions

Can I show different delivery messages for specific products?

That's not possible yet.

Delm
Delm is the simple solution for Shopify merchants to showcase estimated delivery dates that your customers can rely on.
Shopify App Store
© 2023 delm.io
Made in Germany