> ## 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 Position the Slot Picker on the Cart Page

Every theme lays out its Cart page a little differently — so the slot picker should sit exactly where it makes sense for *your* store 📍

With the **Position** settings in Hoppy Delivery Dates, you can control where the slot picker appears on the Cart page, how it's aligned, and how wide it is — separately for Desktop and Mobile.

---

# **📌 Before You Begin**

* Hoppy Delivery Dates is installed and the app embed is enabled in your theme  
* You're logged in to your Shopify admin  
* (Optional) If you plan to use a custom CSS selector, it helps to know your theme's HTML structure — your browser's Inspect tool is your friend here 🔍

---

# **Step 1 — Open the Appearance Page**

In the app navigation, go to:

**Hoppy Delivery Dates → Appearance**

Find the **Position** card — it's the first card on the page.

---

# **Step 2 — Pick a Device Tab**

The card has two tabs:

* **Desktop** 🖥️  
* **Mobile** 📱

Settings are saved separately for each, so you can fine-tune the position for bigger and smaller screens. Configure one tab, then switch to the other and repeat if needed.

---

# **Step 3 — Choose Where the Picker Appears**

Under *"Where do you want position the date time picker?"*, choose one of the radio options:

* **Default (before checkout button or end of Cart page form)** → the app automatically places the picker near your checkout button. This works out of the box for most stores, since the app detects your theme and uses a matching placement — no configuration needed ✅  
* **Before a HTML element** → the picker is placed just before the element you specify  
* **At the start of a HTML element** → the picker is placed inside the element, before its existing content  
* **At the end of a HTML element** → the picker is placed inside the element, after its existing content  
* **After a HTML element** → the picker is placed just after the element you specify

### **Using a custom CSS selector**

Choosing any option other than **Default** reveals an extra text field. Enter the CSS selector of the element you want to target.

* Placeholder example: `.cart_input`  
* Class example: `.cart-footer`  
* ID example: `#main-cart-footer`

⚠️ If the CSS selector doesn't match any element on your Cart page, the slot picker may not appear at all. Double-check the selector using your browser's Inspect tool, and always view the Cart page after saving to confirm the picker is visible.

💡 If the picker vanishes after you set a custom selector, switch back to **Default** and save — that's the quickest way to restore it.

---

# **Step 4 — Set the Alignment**

Choose how the picker lines up inside its container:

* **Center**  
* **Left**  
* **Right**

### **Example**

* A wide, minimal theme often looks best with **Center**  
* If your cart summary sits on the right, **Left** can keep things balanced

---

# **Step 5 — Set the Container Width (Optional)**

Use **Slot picker container width** to control how wide the picker is:

* Enter a number in the width field (e.g. `100`)  
* Choose the unit from the dropdown next to it: **%** or **px**

### **Example**

* `100` \+ `%` → the picker stretches to fill the available space  
* `400` \+ `px` → a compact, fixed-width picker

ℹ️ This field is optional — leave it empty to let the picker use its natural width.

---

# **Step 6 — Save and Check Your Storefront**

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

Then open your store's Cart page and confirm the picker sits exactly where you wanted it. Remember to check on both desktop and mobile if you configured both tabs 👀

---

# **⚠️ Important Notes**

⚠️ Desktop and Mobile positions are configured independently — changing one tab does not affect the other.

ℹ️ The **Default** option is theme-aware: the app detects your theme and picks a suitable spot automatically, so it's the safest choice if you're unsure.

⚠️ A wrong or outdated CSS selector (for example, after switching themes) is the most common reason the picker stops showing — re-check it first if that happens.

---

# **🎉 Final Result**

Once configured successfully:

✅ The slot picker appears exactly where you want it on the Cart page ✅ Desktop and Mobile each get their ideal placement ✅ Alignment and width make the picker feel like a natural part of your theme ✨