> For the complete documentation index, see [llms.txt](https://docs.tipo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tipo.io/tipo-related-products/widget-setup/widget-overview.md).

# Widget Overview

### ℹ️ What is a widget?

A **widget** is a block that shows product recommendations on your store.

Each widget controls:

* **Where** recommendations appear (Product page, Cart page, etc.)
* **What** products are shown
* **How** they look (layout, design, style)

<figure><img src="/files/GxHUNWuCSw8fvuRBPZ3d" alt=""><figcaption></figcaption></figure>

***

### ⚙️ How to set a widget

Every widget follows the same simple flow:

1. **Create a widget** in the app
2. **Choose a placement**
   * Product page
   * Collection page
   * Cart page
   * Home page
   * Search page
   * Thank you page
3. **Select a layout**
   * Related products
   * Frequently Bought Together
   * Add-ons
   * Recently viewed
4. **Choose which products to recommend**
   * Automatically (same collection, tags, etc.)
   * Manually (you pick the products)
5. **Customize the design**
6. **Activate the widget** and add it to your theme

<figure><img src="/files/ekVWc6y05DZYuiAJY2F3" alt=""><figcaption></figcaption></figure>

***

### 📍 Where widgets appear

Widgets can appear on different pages of your store.\
Each widget can be used on one placement only.

Examples:

* Product page → Show “You may also like”
* Cart page → Show “Frequently bought together”
* Thank you page → Show post-purchase upsells

<figure><img src="/files/ir3ovWipFXJ2Vnqh5LG7" alt=""><figcaption></figcaption></figure>

***

### 🗂️ Manage multiple widgets

You can create **multiple widgets** for different pages and use cases.

On the **Widgets** page, you can:

* Create new widgets
* Edit existing widgets
* Duplicate widgets
* Delete widgets
* Enable or disable widgets

<figure><img src="/files/r1efpkYJcGuz180O6m2S" alt=""><figcaption></figcaption></figure>

💡 Tip: Use clear names like\
**“Related – Product page”** or **“Upsell – Cart page”** to stay organized.

***

### ✅ When a widget shows on your store

A widget will appear on your store when:

* The widget is **Active**
* The widget’s **placement matches the page**
* The widget is added to your theme
  * App block (Online Store 2.0)
  * Shortcode (Vintage themes)

<figure><img src="/files/0iKhUglqyWeYOvQmifMe" alt=""><figcaption></figcaption></figure>

***

### 📘 What you’ll learn in this section

The **Manage widgets** section includes these guides:

* Create a widget
* Display a widget on your store
* Edit a widget
* Duplicate a widget
* Delete a widget

👉 Start with **Create a widget** to build your first recommendation.

***

**🙋 Still need support?**

If you still need help, please feel free to contact us at <hi@tipo.io>. We’ll be happy to assist you further.