> ## 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 Spacing Around the Slot Picker

Sometimes the slot picker sits a little too close to the elements around it — or feels cramped inside its own container. A few pixels of breathing room can make it look right at home on your Cart page 📐

With the **Spacing** settings in Hoppy Delivery Dates, you can adjust the margins around each part of the picker — 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 **Spacing** card.

The card has **Desktop** and **Mobile** tabs — spacing is configured separately for each device.

---

# **Step 2 — Understand the Four Spacing Groups**

The card is divided into four groups, and each one controls the margin around a different part of the picker:

* **SECTION MARGIN** → space around the whole slot picker section  
* **HEADING MARGIN** → space around the heading text (e.g. "When would you like to get this Order?")  
* **DATE & TIME PICKER MARGIN** → space around the date and time input boxes  
* **ERROR MESSAGE MARGIN** → space around error messages (shown when a customer hasn't selected a slot or is below the minimum order value)

Every group has the same four fields, all in pixels:

* **Top**  
* **Bottom**  
* **Left**  
* **Right**

ℹ️ All fields default to `10` px.

---

# **Step 3 — Adjust the Margins**

Enter the number of pixels you want in each field — no need to type "px", it's added automatically.

### **Example**

* The picker is touching the checkout button → increase **SECTION MARGIN → Top** to `24`  
* The heading feels glued to the date box → increase **HEADING MARGIN → Bottom** to `16`  
* On mobile, the picker boxes stretch edge to edge → set **DATE & TIME PICKER MARGIN → Left** and **Right** to `0`

💡 Make small changes (5–10 px at a time), save, and check your Cart page — spacing is much easier to judge on the live page than in the fields.

---

# **Step 4 — Repeat for Mobile (Optional)**

Switch to the **Mobile** tab if smaller screens need different spacing. Mobile layouts often need tighter margins than desktop, so it's worth a quick check.

---

# **Step 5 — Save and Review**

Click **Save** at the top of the page.

Then open your store's Cart page and check the spacing on both desktop and mobile 👀

---

# **⚠️ Important Notes**

⚠️ Desktop and Mobile spacing are independent — changing one tab does not affect the other.

ℹ️ These settings only control margins (space *outside* each element). They don't change the size of the picker itself — for that, see the **Slot picker container width** setting covered in How to Position the Slot Picker on the Cart Page.

---

# **🎉 Final Result**

Once configured successfully:

✅ The slot picker has comfortable space around it on the Cart page ✅ The heading, date & time boxes, and error messages no longer feel cramped ✅ Desktop and Mobile each get spacing that fits their screen size ✨