How to customize the widget look?
STEP 1: Go to Design Settings in the App. To change the background color, click on the color palette as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c1_bt1but.png)
STEP 2: Select the day from which you want to start a week, Monday or Sunday, as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c2_1jik816.png)
STEP 3: Set the default delivery method as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c3_ugpirn.png)
STEP 4: If you want to keep the collapsible calendar, keep the checkbox enabled as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c4_1t3nils.png)
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-03-15-at-83226_1iffw06.png)
You can style the Delivery Method
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-012345_14vpp76.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-012317_x2i1g4.png)
You can style the Calendar
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-014910_1xe3l1y.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-014928_3sbcjn.png)
You can style the Input Field
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020048_1iygj7w.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020132_1g55vew.png)
You can style the Widget header, footer and error
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020855_gwqqol.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021803_17b23ba.png)
You can style the Pickup location styles
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021257_5cdb6v.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021238_19s4un2.png)
You can enter you own custom CSS
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-023142_w33e6z.png)
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c1_bt1but.png)
STEP 2: Select the day from which you want to start a week, Monday or Sunday, as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c2_1jik816.png)
STEP 3: Set the default delivery method as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c3_ugpirn.png)
STEP 4: If you want to keep the collapsible calendar, keep the checkbox enabled as shown below.
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/c4_1t3nils.png)
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-03-15-at-83226_1iffw06.png)
What else can you style?
You can style the Delivery Method
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-012345_14vpp76.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-012317_x2i1g4.png)
You can style the Calendar
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-014910_1xe3l1y.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-014928_3sbcjn.png)
You can style the Input Field
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020048_1iygj7w.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020132_1g55vew.png)
You can style the Widget header, footer and error
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-020855_gwqqol.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021803_17b23ba.png)
You can style the Pickup location styles
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021257_5cdb6v.png)
Result:
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-11-02-021238_19s4un2.png)
You can enter you own custom CSS
![](https://storage.crisp.chat/users/helpdesk/website/ca826b447482b000/screenshot-2023-10-28-023142_w33e6z.png)
Updated on: 03/13/2024
Thank you!