# Choose placement & layout

Placement and layout decide **where your widget appears** and **how it looks** on your store.\
This is the **first and most important step** when configuring a widget.

***

### ℹ️ What is placement?

**Placement** decides which page the widget will appear on.

Each widget can have one placement only.

Available placements:

* **Product page**
* **Collection page**
* **Home page**
* **Cart page**
* **Search page**
* **Thank you page**

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

***

### ℹ️  What is layout?

**Layout** decides how the widget behaves and looks.

Layouts control:

* Product grouping
* Buying behavior (upsell, cross-sell, bundle)

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

***

### 🛠️ Step 1: Choose widget placement

1. When creating or editing a widget, go to **Placement**
2. Select the page where you want the widget to appear
3. Click **Next** (or Save if editing)

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

#### Common examples

* **Product page** → Show related items
* **Cart page** → Upsell before checkout
* **Thank you page** → Post-purchase offers

***

### 🛠️ Step 2: Choose widget layout

After selecting placement, choose a layout.

Available layouts include:

#### Related products

* Shows similar or complementary products
* Best for product pages

**Example:**\
“You may also like”

***

#### Frequently Bought Together

* Shows bundle-style recommendations
* Encourages multiple-item purchases

**Example:**\
Camera + Lens + Bag

***

#### Add-ons

* Suggests accessories or upgrades
* Simple upsell layout

**Example:**\
Phone → Phone case

***

#### Recently viewed

* Shows products the customer viewed recently
* Helps shoppers continue browsing

***

### 💡 Placement & layout rules

* Some layouts are only available for certain placements
* Example:
  * **Frequently Bought Together** → Product page
  * **Add-ons** → Product or Cart page

<figure><img src="/files/3HLhLpU3eDbqXC8CVrUZ" alt=""><figcaption></figcaption></figure>

Tip\
If a **layout** is not available, it means it is not supported for that **placement**.

***

### 🧪 Example setup&#x20;

**Goal:** Show related products on product pages

* Placement: **Product page**
* Layout: **Related products**

This is the most common and easiest setup.

**🙋 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: 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.tipo.io/tipo-related-products/widget-setup/choose-placement-and-layout.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.