# Create a widget

Follow these general steps to create a widget and show product recommendations on your store.

### 🛠️ Step 1: Open the Widgets page

1. Open the app > click **Widgets**
2. Click **Add widget button**

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FxZw1x0jdm4KhOGBKmEpZ%2F2025-12-19_15-44-30.png?alt=media&#x26;token=30256c53-4239-4c0f-96c1-5068b1bc9aad" alt=""><figcaption></figcaption></figure>

***

### 🛠️ Step 2: Choose widget placement

Placement decides where the widget will appear on your store.

1. Select a **placement**:
   * **Product page**
   * **Collection page**
   * **Home page**
   * **Cart page**
   * **Search page**
   * **Thank you page**
2. Click **Next**.

<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>

**Example**\
Choose **Product page** to show recommendations on product pages.

***

### 🛠️ Step 3: Choose widget layout

Layout decides how the widget looks and works.

1. Select a **layout**:
   * **Related products**
   * **Frequently Bought Together**
   * **Add-ons**
   * **Recently viewed**
2. Click **Next**.

<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 4: Configure widget settings

Now you’ll see the widget editor.

1. Enter a **widget title** (optional)
2. Choose **where this widget applies** (targeting)
3. Choose **which products to recommend**
4. Adjust basic settings if needed.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FQ1trjnq1USerStUGdBki%2F2025-12-19_15-48-10.png?alt=media&#x26;token=ceae1c57-e9ae-49ea-91b5-644e372e0c8a" alt=""><figcaption></figcaption></figure>

***

### 🛠️ Step 5: Set targeting rules

Targeting controls which products or pages this widget applies to.

1. **Choose one option:**
   * **All products**
   * **Specific products**
   * **Collections**
   * **Product tags**
2. Save your selection

**Example**\
Show this widget only for products in the **“Silver”** collection.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FHGOGUaJqiwhj5I5ijv8e%2F2025-12-19_15-58-32.png?alt=media&#x26;token=4eacfd94-3f9d-4f94-b5a3-ec84c1382567" alt=""><figcaption></figcaption></figure>

***

### 🛠️ Step 6: Choose recommended products

Decide what products appear inside the widget.

1. Choose how products are selected:
   * **Manual** (pick specific products)
   * **Automatic** (same collection, tag, vendor, product type)
2. **Save** the widget

**Example**\
Automatically recommend products from the **same collection**.

***

### 🛠️Step 7: Customize the design (optional)

1. Click **Customize** > it directs you to the app **Settings**
2. Adjust layout, number of products, buttons, and colors
3. Save changes

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FK4D9i5Xbyq30lZGe17yK%2F2025-12-19_16-03-39.png?alt=media&#x26;token=0e2c1408-e48b-4af4-873c-5ae792d1618c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2Fi954SrAqSOVcAElMzKQP%2F2025-12-19_16-05-02.png?alt=media&#x26;token=28a51a00-f75d-4a4d-b478-0c36ea1dc6aa" alt=""><figcaption></figcaption></figure>

***

### 🛠️ Step 8: Activate and save

1. Set the widget status to **Active**
2. Click **Save**

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FdrWdZWH6c8yDWu8c7N9o%2F2025-12-19_16-11-42.png?alt=media&#x26;token=422e032d-9694-4703-9c83-69be6282e24d" alt=""><figcaption></figcaption></figure>

🎉 Your widget is now created.

***

### **▶️** A Tutorial video <a href="#a-reference-video" id="a-reference-video"></a>

{% embed url="<https://youtu.be/pPtFL6dSYi0?si=M2hAn7TE-uSXcl8u>" %}

***

### 👉 Next step

To make the widget visible on your store, continue to [**Display a widget**.](https://docs.tipo.io/tipo-related-products/~/revisions/qdRatoxOPwCce935iatJ/widget-setup/display-a-widget)