# 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FkYAzf8w4HzS3hLFPbnUT%2F2025-12-19_15-46-02.png?alt=media&#x26;token=4e32f42d-aebe-46c8-8ffa-17e713c501e4" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FWrCuuEQIdATK0fBFlKPn%2F2025-12-19_15-46-37.png?alt=media&#x26;token=8af92221-b897-4890-917d-a900314cdcb7" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FRrLbPwVWwyy3gdcIDDBa%2Fimage.png?alt=media&#x26;token=c0f690be-f10b-42f2-92b6-46bb1fbab684" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FxBKsyjkRGE7pPFU0s8bL%2F2025-12-19_17-38-15.png?alt=media&#x26;token=25b1e044-b9c1-49c5-988f-d18c8e46f982" 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.