How to place the date picker with custom HTML

You can place the Buunto date picker anywhere your theme or cart app allows custom HTML.

Add the placeholder

Add this HTML where you want the date picker to appear:

<div id="buunto-date-picker"></div>

Use this placeholder only once on the page.

Update Buunto settings

In Buunto, go to Widget placement. Set Placement method to Theme App Extension. This tells Buunto to use your custom placeholder instead of trying to place the widget automatically.

Before testing

Make sure the Buunto app embed is enabled in your Shopify theme.

If you are adding the picker inside a cart drawer, open the drawer and test the full flow before publishing. Some cart drawer apps rebuild their HTML after cart updates, so compatibility can vary.

If the picker does not appear

- Check that the HTML is exactly <div id="buunto-date-picker"></div> .

- Check that the Buunto app embed is enabled.

- Check that the placeholder is visible in the page or drawer after it opens.