Delivery messages
The active delivery message on your product pages depends on the respective transit time and the calculated delivery date.
| Delivery message | When is it used? |
|---|---|
| Delivery message with delivery date as range | Transit time is configured as a range of numbers, for example 2 to 3 days. |
| Delivery message with single delivery date | Delivery date is NOT tomorrow. |
| Delivery message for next day delivery | Delivery date is tomorrow. |
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
| Name | Description |
|---|---|
type | Required - 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. |
format | Required - See date formats table below. |
Date formats
| Symbol | Example | Description |
|---|---|---|
[dddd] | Monday | Day name |
[ddd] | Mon | First three characters of day name |
[dd] | 01 | Day of month number with trailing zero (from 01 to 31) |
[d] | 1 | Day of month number (from 1 to 31) |
[S] | st | Ordinal suffix |
[mmmm] | January | Month name |
[mmm] | Jan | First three characters of month name |
[mm] | 01 | Month with leading zero from 01 to 12 |
[m] | 1 | Month from 1 to 12 |
[yyyy] | 2022 | 4 digit year |
[yy] | 22 | 2 digit year |
The names of weekdays and months are translated automatically.
Countdown
{{countdown}} displays a countdown to the next available dispatch date.
Example
--- Template
Order within {{countdown unit_format="short" show_seconds="never"}}.
--- Output
Order within 14 hrs and 20 min.
Options
| Name | Description |
|---|---|
unit_format | long for written out or short (default) for abbreviated time units. |
show_seconds | always (default), never, 4_hours, 3_hours, 2_hours, 1_hour |
hide_zero_values | true (default) or false, for example: 20 min 20 sec versus 0 days 0 hrs 20 min 20 sec |
leading_zeros | true or false (default), for example: 20 min 1 sec versus 20 min 01 sec |
separator | Change unit separator, for example: 1 day, 2 hrs, 20 min and 10 sec |
last_separator | Change separator for last unit, for example: 2 hrs, 20 min and 10 sec |
day | Override translation for "day" |
days | Override translation for "days" |
hour | Override translation for "hour" |
hours | Override translation for "hours" |
minute | Override translation for "minute" |
minutes | Override translation for "minutes" |
second | Override translation for "second" |
seconds | Override 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.
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.
- Navigate to your Shopify themes
- Click "Edit code" on the theme you want to edit
- Open any
.liquidfile that is used on product pages - Paste the code snippet below in the desired location and save the file
- In Delm, change the CSS selector to
#delm-appand save
<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.
- Navigate to your Shopify themes
- Click "Edit code" on the theme you want to edit
- Search files for
theme.liquidand open it - Locate
</head>intheme.liquidand paste the code snippet below before</head> - Save your changes
<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.
