Here you can enter all of your text variations. By default the `Prompt-Regular.ttf` font has been imported, but it is entirely possible to replace it in `src/static/font` (remember to read the `README.md` file)

The content of this page is automatically generated.

The content of this page is automatically generated.

All fields.

All buttons.

Here you see the ds-dropdown web-component. You can use it by simply adding a `<ds-dropdown>` tag inside of your liquid files (they can be nested). In this tag, you can use basic `<ds-trigger>` and `<ds-toggle>` components.

You can add a `mode="keep"` attribute to keep open all other toggles on interact.

For each toggle you can set a `style` attribute to apply a default status.

Here you see the ds-modal web-component, You can include it by simply adding a `<ds-modal>` tag inside of your liquid files. The component comes with no styling, so you have to do it by yourself (like position fixed 100vh/vw).

To show the component, you must access it via `let element = document.querySelector('ds-modal')` for example, and then use the methods `element.toggle()` | `element.open()` | `element.close()`

Alternatively you can use an other web component `<ds-trigger>` to show / hide a modal, you must specify a `target="my-modal-id"` attribute.

Here you see the ds-predictivesearch web-component. You can include it by simply adding a `{% render 'nav-predictive-search', predictive_search: predictive_search %}` liquid tag inside of your liquid files (usually in header). You can add an additionnal parameter `limit: number` which corresponds to the maximum number of elements displayed per category (product, page, etc.)

You can custom the HTML render inside of `src/snippets/nav/predictive-search.liquid` file.

To perform a search, you must add an input tag inside of `<ds-predictivesearch>` component.