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 ✨

Updated on: 20/08/2026