> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cartally.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Customization

> Customize the look and behavior of the Cartally search widget.

The Cartally widget is designed to blend into your store's design. You can customize its appearance through the Cartally panel and via HTML attributes.

## Panel settings

Go to **Widget** in the Cartally panel sidebar to configure:

* **Accent Color** — the primary brand color used throughout the widget UI (buttons, highlights, active states).
* **Logo URL** — a publicly accessible URL to your store's logo, displayed in the widget header.

## HTML attributes

You can further customize the widget by adding `data-` attributes to the script tag:

| Attribute                   | Description                              | Default                    |
| --------------------------- | ---------------------------------------- | -------------------------- |
| `data-color-accent-primary` | Accent color (hex)                       | Panel setting or `#ffff81` |
| `data-logo-url`             | URL to your shop logo                    | Panel setting              |
| `data-language`             | Force a specific UI language             | Auto-detected              |
| `data-currency`             | Force a specific currency                | Auto-detected              |
| `data-trigger-selector`     | CSS selector for custom trigger elements | Default search elements    |

<Note>
  Attributes set on the script tag take precedence over panel settings.
</Note>

### Example

```html theme={null}
<script
  src="https://app.cartally.co/widget.js"
  defer
  data-cartally-widget
  data-color-accent-primary="#e63946"
  data-logo-url="https://myshop.com/logo.png"
></script>
```

## Supported widget languages

The widget UI is available in the following languages:

| Code | Language |
| ---- | -------- |
| `en` | English  |
| `pl` | Polish   |
| `fr` | French   |
| `de` | German   |
| `es` | Spanish  |

The widget automatically selects the language based on the store page's `<html lang>` attribute or the platform's language object (e.g. `prestashop.language.iso_code`).

## Trigger elements

By default, the widget attaches to common search elements in your theme. You can override this with `data-trigger-selector` or by adding the `cartally-trigger` CSS class to any element:

```html theme={null}
<button class="cartally-trigger">Search</button>
```

Multiple selectors can be combined:

```html theme={null}
data-trigger-selector=".search-btn, #header-search, .mobile-search-icon"
```
