> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🚀 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 ✨