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 ✨

Updated on: 20/08/2026