Product Page Widget

This guide walks you through creating a widget for related products and adding it to your Shopify product page using Shopify Online Store 2.0 themes.

✅ What this widget does

The Product Page Widget shows recommended products on your product pages. It helps shoppers discover related items and increases add-to-cart and average order value.

Common uses

• Cross-sell (e.g., “You may also like”)

• Bundle suggestions (e.g., “Frequently bought together”)

• Add-on extras (e.g., warranty, accessories)

How it works

• When a customer visits a product page, the widget loads product suggestions based on your configured rules (e.g. same collection, manual selection).

• The widget shows images, prices, and “Add to Cart” or “View” buttons for each suggested product.

• Any click, “add to cart,” or purchase from the widget is tracked so you can see which recommendations perform best.

• If a customer completes a purchase from a widget suggestion, it counts as a converted product and contributes to revenue metrics.

---

⚙️ How to set up

Step 1: Create a widget

1. Open the app > click Widgets section

2. Select Placement: Product Page

3. Choose a layout type (for example, “Related,” “Frequently Bought Together,” or “Recently Viewed Products”) > Click Next

1. Fill in your widget general details

• Title: Related products, recently bought together, You may also like

• Subtitle (optional)

1. Select Target

Choose which products the widget applies to (all products or specific ones

Example Target product: Sunglasses

This means: The widget will only show on the Sunglasses product page

It will not appear on other products

1. Choose Recommended Products

You can select products manually, by rule (same collection, same vendor, etc.), or let the app pick automatically.

Example: Sunglasses case

This means: When customers view the Sunglasses product, they will see Sunglasses case as a recommended add-on.

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

1. Configure the color and design of each widget you want

2. Save settings

3. 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 Product page template

3. Click Add Block > select Apps > select Tipo Related Products

1. Paste the widget’s shortcode into the block settings and save the theme editor

1. Click Save

---

Step 4: Enable app embed

In theme editor, toggle on the app embed of Tipo Related Products. Learn more

---

Result

• A customer opens the Sunglasses product page

• The Related Products widget appears

• The widget suggests a Sunglasses case

• The customer can add it to cart in one click

---

❓FAQs

Q1: Why Your Widget Might Not Be Showing

• The product you check must match the target product condition configuration in the Settings, so the widget does appear.

• Make sure that there are related products that meet the conditions you’ve set. For example, if you set the condition to "Same Tag" but no products share with that tag, nothing will display.

• The related products have already been added to the cart. Once a product is in the cart, it will no longer be displayed in the widget.

Q2: Can I have more than one widget on a product page?

Yes! You can create multiple widgets with different rules and positions (e.g. Upsell + Related) and place them using separate shortcodes or app blocks.

Q3: Will it slow down my store?

No. The widget loads asynchronously and is optimized for performance.