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
Open the app > click Widgets section
Select Placement: Product Page
Choose a layout type (for example, “Related,” “Frequently Bought Together,” or “Recently Viewed Products”) > Click Next
Fill in your widget general details
Title:
Related products, recently bought together, You may also likeSubtitle (optional)
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
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.
Click Save
Step 2: Configure widget style
Open the app > go to app Settings > click Design
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.
Configure the color and design of each widget you want
Save settings
Use the Preview panel on the right to see real-time changes.
Step 3: Display widget on the site
Copy shortcode of the widget
Return to the Widgets list
Locate your widget and click Copy under the Shortcode column
Add widget block in theme editor
Go to store backend > go to Online stores > Theme > Edit theme
On Themes Editor page > go to Product page template
Click Add Block > select Apps > select Tipo Related Products
Paste the widget’s shortcode into the block settings and save the theme editor
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.
Last updated