# Search by Date widget

A storefront search where customers choose their date, duration, delivery method and size, then see only the dresses available.

![Search by date widget on a storefront](https://thedressrentalapp.com/images/search-by-date.png)

## Set it up

1. Go to **Booking Fields & Add Ons → Search by Date**.
2. **Start with a preset:** Preset 1, Image hero, Split hero, Editorial hero, Card layout or Popup icon.
3. Adjust the **Search bar content** labels and the **Search bar style** (width, height, spacing, corners and colours).
4. For hero layouts, add **Hero content**: images or video, heading and buttons.
5. Under **Mobile behaviour**, choose whether phones show a search icon that opens the search panel.
6. Save. Your settings sync to the theme block.
7. Click **Open theme editor** and add the **Search by Date** app block to a section, for example on your home page.

Advanced users can add **Custom CSS**, scoped to `.dr-search-widget`.

Search by Date isn't included on the Free plan. The block only appears in the theme editor on Starter or above.

Source: https://thedressrentalapp.com/docs/search-widget