👋Getting started
Welcome to Tipo Related Products & Upsell!
This app helps you increase sales and enhance customer experience by showing relevant related items, upsells, and cross-sells on your product pages.
Key Features
Automatic Related Product Suggestions: Instantly display relevant product recommendations on your product pages. The app automatically identifies related items based on tags, collections, or product attributes.
Manual Product Selection: You can manually select specific products to display as related or upsell items for each product page.
Upsell & Cross-Sell Widgets: Show beautifully designed widgets such as:
You may also like
Frequently bought together
Complete the look
Customizable Widget Layout
Choose widget placement (below description, in sidebar, after “Add to Cart,” etc.)
Set the number of products per row
Customize fonts, colors, and spacing to match your store’s theme
Flexible Display Rules: Control when and where widgets appear using filters like product tags, collections, or price ranges.
Analytics & Performance Tracking: Track impressions, clicks, and conversions from related product sections.
Multi-Language Support Fully compatible with multi-language stores. easily translate widget titles and text for global audiences.
Quick Start
1, Activation in the Theme Editor
You can activate the Tipo Related Products, Upsell app by clicking on the button Enable at the upper right. The app will display a widget in your Online Store if it has a visible status.
More detail here
To deactivate the app, follow the same steps and switch the embed app off.
2, Setting up a Recommendation Widget
Learn more here
Note
If you use a Shopify Online Store 2.0 theme, read Tipo Related Products, Upsell: Setting up in Online Store 2.0.
If you use a vintage theme, read Tipo Related Products, Upsell: Setting up on Vintage Themes.
If the installed app can’t determine your theme version, or you’ve changed your theme, please contact [email protected] to ensure the app works properly.
3, Types of Recommendation Widgets
Type
Description
Placement
Layout
Specific Product’s Variants
Displays product variants selected manually
Any page
Product page (Add-on), Homepage, Collection (Related, Add-on), Cart (Related, Add-on, Inline Offer), Search (Add-on), Thank You (Offers)
Specific Product
Displays products selected manually
Any page
Product page (Frequently Bought Together, Add-on), Homepage (Add-on), Collection (Related, Add-on), Cart (Related, Add-on, Inline Offer), Search (Add-on), Thank You (Offers)
Specific Collection/Tag
Randomly suggests products of a selected collection or tag
Any page
Product page (Add-on), Homepage, Collection (Add-on), Cart (Add-on, Inline Offer), Search (Add-on), Thank You (Widget)
Specific Product Type/Product Vendor
Randomly suggests products of a selected product type or vendor
Any page except Thank You page
Product page (Add-on), Homepage, Collection (Add-on), Cart (Add-on), Search (Add-on)
Manual Recommendations
Displays manually selected products based on: handpicked product, collection, product type, or tag
Product page, Collection, Cart
Product page (Related), Collection (Related), Cart (Related)
Same Tag
Displays products that have the same product tag. If there are many tags, it uses the first one from Shopify's tag list
Product page, Cart
Product page (Related), Cart (Related)
Same Collection/Product Vendor/Product Type
Displays products from the same collection, product vendor, or product type
Product page
Product (Related)
The Best Selling Products / The Latest Products / Recently Purchased Products
Displays the all-time bestselling, recently created, or recently published products
Product page, Homepage, Cart page, Search page
Product page (Add-on), Homepage, Collection (Add-on), Cart (Add-on), Search (Add-on)
Most Relevant Products Using Automated Rules
Recommends products bought with the viewed product in the same purchase. If unavailable, manual alternatives are shown
Product page, Cart page, Thank You page
Product page (Frequently Bought Together), Cart (Inline Offer), Thank You (Offers)
Recently Viewed Products
Displays recently viewed products
Any page, except Thank You page
Product page (Recently Viewed Products, Add-on), Homepage, Collection (Add-on), Cart (Add-on), Search (Add-on)
Additional Specifications
Manual Recommendation: Select the ‘Related’ layout for placement > Click Manual Recommendation > Choose recommendation type (Product, Collection, Product Type, or Tag) > You’ll be redirected to the corresponding setup page.
Most Relevant Products Using Automated Rules: Select a layout (Product Page - Frequently Bought Together, Cart - Inline Offer, Thank You Offers) > Click Most Relevant Products Using Automated Rules > Choose either:
Complementary Products: Recommended products are automatically pulled from the Shopify Search & Discovery app.
Related Products: You must configure Complementary Products in the Shopify Search & Discovery app.
4, Creating a Recommendation Widget
You add a recommendation widget to your Shopify store:
You can edit widget settings at any time from the Widgets page. Click on the widget title in the list to edit it. When you make changes, a notification will appear at the top of the page: “Unsaved changes”. Click Save or Discard.
5, Editing Widget Settings
On the Create a New Recommendation Widget page, you can configure: Common Settings
Title: Title displayed in your store.
Subtitle: Optional description under the title.
Target: Select target products (All Products, Specific Products, Specific Tags, Specific Collections).
Choose Recommended Products: Select how to display related products (Same/Specific Product Type, Vendor, Collection, or Tag).
Display Order: Higher order widgets appear first.
Random: Randomly displays products matching selected conditions.
6, Activate/Disable a Widget
In the left sidebar, click the Widget tab.
Check the box next to the widget you want to activate/disable.
Click the Active or Disable icon in the pop-up row of the recommendations list.
7, Deleting a Widget
To delete a widget:
In the widget list, check the box next to the widget you want to delete.
Click the Delete icon in the pop-up row.
Confirm deletion in the dialog box.
Note: If using Shopify OS 2.0, be sure to remove the app block in the Theme Editor after deleting a widget. See the relevant article.
8, Configuring Appearance
Click the Customize button in the widget window to go to the Design page.
General
Template: Choose the layout style.
Maximum Width: Set widget width.
Number of Products: Set max number of related products.
Position:
Below the Product Form: Default position.
Use App Block in Theme Editor (2.0 themes): Add block in Theme Customize > Paste widget shortcode.
Before/After/At Start/At End of an HTML Element: Enter the HTML element where the widget should appear.
9, Elements
Variant Select: Show variant selector in widgets.
Sale Label: Show "Sale" label if the price is lower than the compare-at price.
Price: Show product price.
Add to Cart Button: Show Add to Cart button in widgets.
10, Colors
Click on any item below to customize its color in the pop-up color board:
Heading
Subheading
Product Title
Product Price
Product Old Price
Sale Label
Sale Label Background
Button Text
Button Background
A reference video
Watch this demo video for a clearer visualization of the setup and demonstrating the feature to facilitate your reference.
Last updated