# 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).