# Widget Appearance

This is where you configure the look and feel of your date picker & delivery validator widget

Editable formats available include: 

* **Layout:** 5 layouts to choose
* **Delivery time layout:**  1 row or 2 rows
* **Button shape:**  Sharp, Rounded, Slightly rounded
* **First day of the calendar:**  Monday, Tuesday, ...
* **Date format:**  Monday, 19 November 2024; 11-19-2024,19-11-2024.
* **Widget color:**  Flexible to pick your desired color for each component of the widget

{% hint style="success" %}
Don't forget to check the widget preview to ensure that it is aligned with your online store
{% endhint %}

<figure><img src="/files/Gq6ktjJhoPA4dLFRxkSe" alt=""><figcaption></figcaption></figure>

Please pay more attention to the **Widget Colors** where you can set your desired color for each component of the widget.

**Calendar**

<figure><img src="/files/euJvZto1lj8Gc343ewIZ" alt=""><figcaption></figcaption></figure>

**Header**

<figure><img src="/files/uGp1Q5N511FEwAUaWjma" alt=""><figcaption></figcaption></figure>

**Body**

<figure><img src="/files/qAO3ck4E1OgfVYbxpFYn" alt=""><figcaption></figcaption></figure>

If you are not confident in your taste in design & matching color and are scared of getting your widget messed up, please apply the available widget color settings (Dawn, Ride, Crave,...) that are fixed to be aligned with your theme.

<figure><img src="/files/inkvMSIANdLulEGdmoSt" alt=""><figcaption></figcaption></figure>

## Custom CSS&#x20;

If you want to custom CSS, you can edit here

<figure><img src="/files/DoceTyUn40F3S70tFVtc" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Reach out to us via the email [**contact@omegatheme.com**](mailto:contact@omegatheme.com) if you stumble upon something hard to solv&#x65;**.** Any messages from you guys are greatly appreciated!
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dingdoong.io/widget-settings/widget-appearance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.