The date picker is the customer-facing booking calendar that appears on your product page. It is delivered as a Shopify Theme App Extension block called Miko Rental Calendar, which means you add it to your theme via the Theme Editor, no code editing required.
Where to find it
In your Shopify admin, go to Online Store → Themes → Customize and open a Product template. The block is listed as Miko Rental Calendar among the app blocks.
How to set it up
Adding the date picker to your theme
Open the Theme Editor
From your Shopify admin, go to Online Store → Themes → Customize.Open a product template
In the Theme Editor, navigate to a Product page template (select a specific product page or the default product template).Add a block
In the left sidebar, click Add block (or Add section depending on your theme layout).Choose Miko Rental Calendar
Find Miko Rental Calendar in the list of available blocks and click it to add it.Position it
Drag the block to position it near your Add to Cart button so the flow is natural for customers.Save
Click Save in the Theme Editor.
You only add the block once. It shows the calendar on products you have activated in the app and stays hidden on every other product. In the Theme Editor, a product that is not set up as a rental shows a setup message in its place.
Options
| Block setting | What it does |
|---|---|
| Widget heading | The heading above the dates. Defaults to "Choose your rental dates". |
| Rental only product | Hides the regular price and the Add to cart button on this product page, for products that are rented but never sold outright. |
| App URL (advanced) | Leave this blank. |
To hide the regular price and Add to cart button on every rental product at once, turn on the Miko Rental Display Rules app embed from App embeds in the Theme Editor. It has separate checkboxes for the price on product pages, the Add to cart button on product pages, and the price on rental cards in collection pages. Minimum and maximum hire lengths are set per product in the app, under Inventory and duration.
Example
How the date picker works for customers
The date picker shows two dates for the customer to choose: Rental start and Return by. Miko then checks every day in that range. If any day is already fully booked by other customers or blocked, the widget shows "These dates are not available" and the booking button stays disabled. Otherwise it shows the rental fee, the security deposit and the total at checkout, applying your daily, weekly, or monthly pricing rules automatically, and the total updates whenever the customer changes the range. If you own more than one unit, the customer can also choose how many units to rent.
Plan required
Related articles