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 |
Attributes set on the script tag take precedence over panel settings.
Example
<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>
| Code | Language |
|---|
en | English |
pl | Polish |
fr | French |
de | German |
es | Spanish |
<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:
<button class="cartally-trigger">Search</button>
data-trigger-selector=".search-btn, #header-search, .mobile-search-icon"
