> 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-types-explained/search-page-widget.md).
# Search Page Widget
## ✅ What this widget does
Use the **Search Page Widget** to show recommended products on your store’s **search results page**. It helps shoppers discover items even when their search doesn’t match perfectly (or when you want to promote specific products).
***
## ⚙️ **How to set up**
### **Step 1: Create a Widget**
1. Open the app > go to the **Widgets** tab > click the **Add widget** button in the top right corner
2. For **Placement**, choose **Search page**
3. Click **Next** to go to the configuration page and begin setting up your widget
4. In the **General** section:
* **Title:** The heading shown above the widget (example: `What customers often search`)
* **Subtitle:** Optional helper text (example: *Popular items customers buy too*)
**5. Choose Recommended Products**
This section controls what products appear inside the Search Page Widget.
You can pick one option:
* **Specific products** – manually choose exact products to show
* **Specific product variants** – recommend specific variants
* **Specific Collection** – show items from one collection
* **Specific Product Type** – show items from a product type (e.g., “Shoes”)
* **Specific tags** – show items that share a tag (e.g., “gift”, “new”)
* **Specific Product vendor** – show items from a vendor/brand
* **The best selling products** – show top sellers
* **The latest products** – show newest items
* **Recently purchased products** – show items bought recently
* **Recently viewed products** – show items shoppers viewed recently
**Tip:** For Search pages, **Best selling** or **Latest products** usually works well because it doesn’t depend on the customer’s previous browsing.
Example:
* Shopper searches for: **“ring”**
* Search results show your ring products
* Under (or near) the results, the widget shows all products with tag "Rings"
6. Click Save
***
### Step 2: Configure widget style
1. Open the app > go to app **Settings** > click **Design**
2. Choose where it is shown: find **Position**
Choose one:
* **Use app block in theme editor** *(recommended)* Use Shopify Theme Editor to drag & drop the widget.
* **Before / After a HTML element** *(manual placement)* Use this if you’re adding the widget via shortcode and need full control.
3. Configure the color and design of each widget you want
4. Save settings
5. Use the Preview panel on the right to see real-time changes.
***
### Step 3: Display widget on the site
#### **Copy shortcode of the widget**
1. Return to the **Widgets** list
2. Locate your widget and click **Copy** under the **Shortcode** column
#### **Add widget block in theme editor**
1. Go to store backend > go to **Online stores > Theme > Edit theme**
2. On **Themes** **Editor** page > go to **Search** page template
3. Click **Add Block** > select **Apps** > select **Tipo Related Products**
4. Paste the **widget’s** **shortcode** into the block settings and save the theme editor
5. Click Save
***
### Step 4: Enable app embed
In theme editor, toggle on the app embed of Tipo Related Products. [Learn more](https://docs.tipo.io/tipo-related-products/setting-up/activate-app-embed-on-theme)
***
**Result**
* Shopper searches for: **“ring”**
* Search results show your ring products
* Under (or near) the results, the widget shows all products with tag "Rings"
