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.

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.

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 collection for our templates.

If you want to use a different icon:

1. Visit a library like 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.

Updated on: 17/02/2026