The Product-Page "Display Shortest Date" Block: Behavior and Settings

screens: Online Store → Theme → Customize → Product page → app block "Display Shortest Date"
verified_from: theme-develop shortestPorducts.ts / product/getMessage.ts / the theme extension block definition (product-cc-dellivery.liquid) / human-facing manual
note: This block only "displays". Selecting the date after adding to the cart is done by the widget on the cart side.

SUMMARY

An app block, “Display Shortest Date”, that shows the product’s shortest delivery date on the product page. The date shown is the same as the calculation result of the shortest-date settings in the admin (business days, calendar days, cut-off, holidays, adjustment by area) (S-* in 020).

RULES

P-1  The date is calculated for the variant being viewed. It is recalculated when the variant is switched.
P-2  When "Products Group is active" is ON, the shortest date of the group that the product belongs to (product link, product tag, tag::SKU, conditions) is shown.
     On the product page, other products in the cart are not taken into account.
     (The widget on the cart side uses the group with the smallest priority number among all products in the cart. This is a common cause of mismatches)
P-3  Conditional groups (weight / total price / stock) are judged by this variant's weight, price and quantity. If the same variant is in the cart, its quantity is used.
P-4  The whole block is not displayed in these cases:
     - a product set as a hidden product
     - "Delivery Date is Inactive" is set for that group (or delivery method)
     - "Do not display when out of stock" is ON and that variant is out of stock
P-5  The date format is the same as "Inputed Date Format" in "Settings for Calendar" of the admin.
P-6  The current time is the time of the IANA time zone if the delivery settings have one; otherwise the visitor's browser time (same as S-6).
P-7  "Show as selectbox for Shipping method, shipping area, etc." ON: when the delivery method / area is chosen on the product page, the shortest date changes by that option (S-7).
     When delivery methods (slots) are active, "delivery method name: date" are shown side by side.
P-8  If you choose a combination of variants that does not exist (an impossible combination), the previous display stays for a few seconds and then the default group's display appears.
P-9  This block is unrelated to dynamic checkout; it only "displays" on the product page. No delivery date and time is attached to the order.

UI_LABELS

Settings of the app block “Display Shortest Date” (right side of the theme customizer):

Field	Default
First sentence	Shortest Delivery Date is (the Japanese default text in the Japanese admin)
Last sentence	.
Note	(text)
Font size / Note Font size	16 / 14
Text Color / Text Color(note) / Text Color(shortest date)	#6A6A6A / #737373 / #121212
Do not display when out of stock	OFF
Show as selectbox for Shipping method, shipping area, etc.	OFF
Text to be displayed initially for options (such as delivery area)	-

PROC-P1 Show the shortest date on the product page

Where: In the Shopify admin: “Online Store” > “Themes” > “Customize” > Product page > “Add block” > the app’s “Display Shortest Date”

In the Shopify admin open “Online Store” → “Themes” → “Customize”
In the page selector at the top, choose “Product page” (the product template)
At the position where you want it, “Add block” → choose the app’s “Display Shortest Date”
Adjust the sentences, font sizes and colors on the right and save

PROC-P2 Switch the date by delivery area or delivery method

Where: App left menu “Settings” > card “Delivery Date” > the check “Determine the Minimum Delivery Date based on selection preferences, such as the delivery area.” (set it first) -> theme “Customize” > the “Display Shortest Date” block

In the settings screen, set “Determine the Minimum Delivery Date based on selection preferences, such as the delivery area.” (or the delivery method)
In the “Display Shortest Date” block, turn ON “Show as selectbox for Shipping method, shipping area, etc.”
If needed, change “Text to be displayed initially for options (such as delivery area)” (default ”-“)

QA

Q: What decides the product page’s shortest date? I want to adjust it. A: The calculation result of the shortest-date settings (business days, calendar days, cut-off, holidays, area additions). To adjust it, change the relevant fields in the settings screen (S-1 to S-7 in 020).
Q: I want a different shortest date per product. A: Set the shortest date per group with grouping products (tags, Products Management, conditions). The block on the product page shows the date of each group (P-2).
Q: I want a different shortest date per variant. A: Link the variant to a group with “tag::SKU” (C-5). Mind the priority (when several tags are attached, the smallest priority number is used).
Q: The product page date differs from the shortest date selectable in the cart. A: The product page is calculated only for the variant being viewed, while the cart uses the group with the smallest priority number among all products in the cart (P-2). Check for multiple products, conditional groups and hidden products. Area additions are not added on the product page unless the select box is used (P-7).
Q: The shortest date does not appear on the product page. A: Check P-4 in order (hidden product? date set not to be displayed? out-of-stock hiding?). Also check that the template where the block was placed is the product page.
Q: The date shown is “today” / old. A: Do not assert. Ask for the browser, theme and store URL (ESCALATE).
Q: I want to put a “calendar to choose the delivery date and time” on the product page. A: It can be placed on the product page too, but grouping by product is not reflected there (L-4).
Q: I want it to say “estimated shipping date”. A: The sentences can be changed with “First sentence” and “Last sentence”. What is calculated is the shortest date, not a shipping date. If a different calculation is needed, ask the developer.

ESCALATE

Situation	Information to request
The product-page date is not what is expected	Product URL, variant, the shortest-date settings in the settings screen, products in the cart, browser
The date does not change / changes late when switching variants	Product URL, theme name, the variant switched to, errors in the browser console
The block does not appear	Product URL, theme name, the screen of the theme customizer where the block was added

SEE

Articles