Related product recommendations are carefully selected to complement the customer’s current exploration, offering items from the same category, collection, vendor, or more. This enriches the browsing experience by providing options that align with the shopper’s preferences. In this guide, we will explore how to establish related product recommendations for your Shopify store using SF Product Recommendations by WebToffee.

- Install the SF Product Recommendations.
- Navigate to Apps > SF Product Recommendations.
- Click on Create widget.
- Select the Product Page to display the Upsell recommendations.
- Under the recommendation type, choose Related products.
Related product recommendations are available on both the product and cart pages.
Customize recommendation
Selecting the template will provide you with various options to customize the recommendation.
Step 1: Select products to be recommended
Related product recommendations guide customers toward items that complement their interests in a friendly manner. You can personalize the products presented to customers from the Recommend products from section, depending on the page they are viewing.
If there isn’t enough sales data available, related product recommendations will display random products from the store.
Product page / Cart page
The product page displays related products based on the product the customer is currently viewing. You can choose to display products from any of the categories below.
Automatic
Utilizes a unique algorithm to recommend the most relevant products. If it can’t find matching products, it defaults to displaying random items from the store as an alternative.
Set filter
If you prefer personalized recommendations or if you don’t have enough inventory items for an automated recommendation, you can customize your preferences from the set filter tab to suit your needs.
You can choose one or multiple options from the list, and the system will present related product recommendations based on these selected conditions. The featured product will be the one currently being viewed on the product page, while on the cart page, it will be the most recently added item. The available options include:
- Display products from the same collection as the featured product.
- Display products with the same type as the featured product.
- Display products from the same vendor as the featured product.
- Display products from the same category as the featured product.
- Display products with the same tag as the featured product.
It is possible to select multiple options and display a combination of products. If you wish to prioritize a selected option, drag it to the top. For instance, the following combination will list products from the same category as the currently viewed products and products having the same tag as the currently viewed product. Products from the same category will receive high priority and appear first, followed by products with the same tag.
Step 2: Set up widget title
This text will display as the title of the product recommendation widget in the e-store.
Step 3 : Set up display rules
The recommendation widget will be visible on the selected page only when the filter set using the Display rule option matches the products on the front end. The available filters are:
The available filters under the Display rules will vary depending on the page selection you made.
Selected page | Available Display rules |
---|---|
Product page | Category | Collections | Products | Tags | Viewing date | User Status | Price |
Collection page | Category | Viewing date | User Status | Price |
Shop page | Viewing date | User Status | Price |
Cart page | Category | Collections | Products | Tags | Viewing date | User Status | Price |
404 page | User role |
Available display rules
Display rule | Explanation | Options |
---|---|---|
Category | The widget will only appear on the page if the product(s) on the page satisfies the category condition set here. | Include – Recommendations displayed for the products from the selected category. Exclude – Recommendations hidden for the products from the selected category. |
Collections | The widget will only appear on the page if the product(s) on the page satisfies the collection condition set here. | Include – Recommendations displayed for the products from the selected collection. Exclude – Recommendations hidden for the products from the selected collection. |
Products | The widget will only appear on the page if the product(s) on the page satisfies the product condition set here. | Include – Recommendations displayed for the products selected. Exclude – Recommendations hidden for the products selected. |
Product tag | The widget will only appear on the page if the product(s) on the page satisfies the product tag condition set here. | Include -Recommendations displayed for the products with the selected tag. Exclude – Recommendations hidden for the products with the selected tag. |
Viewing date | The recommendation widget will only appear in the store in the selected interval of time. | Start date – Recommendation starts to display from the selected date. End date – The recommendations displays till the selected date. |
User role | The recommendation widget will only be visible to the user roles selected here. Don’t configure if you want to display recommendations to all users. | User is guest – Recommendations visible for only guest users. User is customer – Recommendations visible for only customers. |
Price | The widget will only appear on the page if the value of the product(s) on the page matches the price condition set here. | Greater than – Recommendations will only be displayed on the product pages of items priced higher than the selected value. Less than – Recommendations will only be displayed on the product pages of items priced lower than the selected value. |
Step 4: Set up visual preferences
Click on Customize to customize the appearance of the recommendation widget at the store’s front end. The Visual preference window will provide a wide range of customization options and a live preview of how the widget will appear on the store. To learn more about how to customize the widget’s appearance, refer to the Personalize Appearance of Recommendation Widget in Shopify Store.
Step 5: Generate the widget
After the configurations, clicking the Create new recommendation generates the new widget.
If App embed functionality is enabled for SF Product Recommendations, the recommendation will automatically be added to the store. Otherwise, you have to install the widget manually in your store. To know more about manual widget installation, refer to the article, How to install a recommendation widget on the store manually.