> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.delm.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How do I use starter templates?

Starter templates allow you to quickly apply a professional design to your delivery widget. Instead of building from scratch, you can choose a layout that fits your brand and then customize the details.

---

## How to apply a template

When you apply a starter template, please be aware that it will **overwrite** the current HTML content, CSS, and date formatting for all languages added to that widget.

1. Go to the **Widget** section in the Delm app and click to edit your widget.
2. Click on **Starter templates** in the editor menu.
3. Browse the available layouts and click **Apply template** on the one you prefer.
4. Click **Save widget** to push the changes to your store.

![Starter Templates](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/starter-templates_1bddbva.png)

---

## Customizing your template

Since Delm uses standard HTML and CSS, you are not locked into the default look of a template. You can fully customize every aspect of the design once it has been applied.

### Changing colors

The easiest way to match your brand is by updating the color codes.

1. Locate the **CSS** field in the widget settings.
2. Find the HEX color codes (e.g., `#000000` or `#f3f3f3`).
3. Replace them with your own brand color codes.

![Changing Colors](https://storage.crisp.chat/users/helpdesk/website/-/a/4/8/8/a488abe1860c5800/changing-colors_f6anbg.png)

### Swapping icons

Most of our starter templates include icons as plain SVG code directly inside the **main.html** field. We personally use the [Material Design Icons](https://icones.js.org/collection/mdi) collection for our templates.

If you want to use a different icon:

1. Visit a library like [icones.js.org](https://icones.js.org/) to find a new icon and copy the **SVG snippet**.
2. In the Delm widget settings, find the **main.html** field for your language and replace the existing `<svg> ... </svg>` code with your new snippet.

### Editing text

You can modify your messaging directly within the **main.html** field. This allows you to change "Estimated delivery" to "Arrives by" or any other phrase that fits your store's voice. Remember that text changes must be made for each language added to the widget.