> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/free-gift-userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.tek-labs.app/free-gift-userguide/user-guides/styling/product-selector-type.md).

# Product Selector

Style the You May Also Like product recommendations.

The Product Selector is the widget for [You May Also Like](/free-gift-userguide/user-guides/upsell-offers/you-may-also-like.md) offers: a list of recommended products with an **Add** button, shown in the cart drawer, on the cart page or on the product page.

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fgit-blob-86111affb297e8dc6ad29446438bbea5a10c8a17%2Fsp-st-product-selector.png?alt=media" alt="Product Selector style editor"><figcaption></figcaption></figure>

**Preview**: the preview shows a store page. Click the cart icon to see the widget in the cart drawer.

{% hint style="info" %}
If you see **New Product Selector design available**, click **Use new UI** to switch to the latest design. Your current styling is replaced with the new defaults when you save.
{% endhint %}

## Sections

| Section              | Settings                                                                                                                |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **General**          | Font family, background and border colours, border radius and width, padding.                                           |
| **Image**            | Image border radius and size.                                                                                           |
| **Header**           | Header size, weight, padding and colour; arrow and pagination icon colour.                                              |
| **Product item**     | Size, weight and colour of the **Product title**, **Product price**, **Product regular price** and **Product variant**. |
| **Button**           | **Add** button text size, weight and colour; background colour.                                                         |
| **Position**         | **Top of cart page** or **Bottom of cart page**.                                                                        |
| **Custom CSS**       | Your own CSS.                                                                                                           |
| **Widget placement** | **Change widget position** in the theme editor, or copy the code snippet `<div class="salepify-ymal-placement"></div>`. |