đ How to Customize Heading, Placeholder, and Error Messages of the Slot Picker
The default wording of the slot picker works for most stores â but sometimes you want it to speak your store's language đŦ
Whether you want friendlier text, a different tone, or a full translation, the Fields Text and Translations card lets you rewrite the heading, placeholders, and error messages â separately for Desktop and Mobile.
đ Before You Begin
- Hoppy Delivery Dates is installed and the app embed is enabled in your theme
- The slot picker is visible on your Cart page
- You're logged in to your Shopify admin
Step 1 â Open the Appearance Page
In the app navigation, go to:
Hoppy Delivery Dates â Appearance
Find the Fields Text and Translations card.
The card has Desktop and Mobile tabs â texts are configured separately for each device. Set up one tab, then switch and repeat for the other if you want different wording.
Step 2 â Add an Additional Pickup or Local Delivery Message
Use the Additional Pickup or Local Delivery Message field to show a short line of text with the picker.
- Placeholder example:
Pickup or local delivery - Leave it empty if you don't need an extra message
Step 3 â Customize the Heading
The heading is the question customers see above the date picker. Choose one of:
- Default (When would you like to get this Order?) â uses the built-in text
- Hidden â no heading is shown at all
- Custom â reveals a text field where you can type your own heading
Example
Choose your delivery date đWhen should we bring your order?
Heading styling
- Heading Font Size â choose Default, or select Custom and enter a size in the px field that appears (e.g.
18) - Use bold font for heading â check this to make the heading bold
Step 4 â Customize the Placeholder and Labels
These are the smaller texts inside the picker itself. Each one has Default and Custom options â choosing Custom reveals a text field for your own wording.
- CALENDAR PICKER PLACEHOLDER â the text inside the date box before a date is chosen. Default: Select date
- CALENDAR PICKER TIME SLOT LABEL â the text inside the time box. Default: Select time
- CALENDAR PICKER NO TIME SLOTS MESSAGE â shown when a day has no available slots. Default: No slots are available
Example
- Placeholder â
Pick a day - Time slot label â
Pick a time - No slots message â
Sorry, this day is fully booked
Step 5 â Customize the Error Messages
Under ERROR MESSAGE, you can adjust the two messages customers see when something isn't right:
- Slot Not Selected Error Message â shown when a customer tries to proceed without choosing a slot. Default: Select an order slot to proceed
- Minimum Order Value Error Message â shown when the cart total is below the minimum order value you've set for a fulfillment method. Default: Order value is below the minimum required.
Dynamic placeholders for the minimum order error
Inside your custom Minimum Order Value Error Message, you can use these placeholders, and they'll be replaced with real values:
{{cart_total}}â the customer's current cart total{{min_value}}â the required minimum order value
Example
Your cart total is {{cart_total}} â please reach {{min_value}} to select a delivery slot.
Error message styling
- Error Message Font Size â choose Default, or select Custom and enter a size in the px field that appears
- Use bold font for error message â check this to make error text bold
âšī¸ Errors are always shown in red on the storefront so customers can't miss them.
Step 6 â Save and Review
Click Save at the top of the page.
Check the preview panel on the right side of the Appearance page, then open your Cart page to see the texts live. Don't forget to review both Desktop and Mobile if you customized both tabs đ
â ī¸ Important Notes
â ī¸ Custom text fields only appear after you select the Custom radio for that setting â and the default text comes back if you switch back to Default.
âšī¸ The minimum order value itself is configured in your fulfillment settings â this card only controls the message customers see when the minimum isn't met.
đĄ To translate the calendar itself (month and day names), see How to Translate the Calendar.
đ Final Result
Once configured successfully:
â The heading, placeholders, and messages match your store's voice â Error messages clearly tell customers what to fix â with live cart values if you use placeholders â Desktop and Mobile can each have their own wording â¨
Updated on: 20/08/2026
Thank you!