# Template customization

This section describes template customization tools and best practices for the following Nosto products:

* Product Recommendations
* Onsite Content Personalization
* Pop-Ups

These three products share the same templating technology and use [Velocity](https://velocity.apache.org/) based templates\
which are injected into the page via Nosto's client script.

In addition to Velocity-based server-side templating, we also have templating usage in other products:

* [Search Templates](https://docs.nosto.com/techdocs/implementing-nosto/implement-search/implement-search-using-code-editor)
* [Nosto Autocomplete](https://docs.nosto.com/techdocs/implementing-nosto/implement-search/search/implement-autocomplete-using-library)

### Web Components

For template customization we recommend the usage of both our own web component offering and third party tooling such as:

* **Swiper**\
  A modern touch slider used for creating responsive, mobile-friendly carousels. It offers smooth transitions, extensive configuration options, and high performance. Find more details at [Swiper Homepage](https://swiperjs.com).
* **unpic**\
  A lightweight, on-demand image optimization library that delivers optimized images with lazy loading. It helps improve performance and user experience by automatically adjusting image sizes. Visit the [unpic Homepage](https://unpic.pics) for additional information.
* **shoelace**\
  A collection of professionally designed, accessible, and customizable web components. It makes it easy to build modern web interfaces with consistent styling. Learn more on the [shoelace Homepage](https://shoelace.style).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/template-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.