> 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\
\&#xNAN;**“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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.tipo.io/tipo-related-products/widget-setup/widget-overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.