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 StoreFrog Product Recommendations on your store.
- From the admin panel, head to Apps > SF Product Recommendations.
- Click on Create new recommendation.
- Under Select a page, select a page to display Recently viewed products.
- After selecting a page, click on the Related products template under Select recommendation type.
Customize recommendation
Selecting the template will provide you with a variety of 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.
Product page / Cart page
The product page displays related products based on the product that the customer is currently viewing. You can choose any display products from any of the below categories.
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 have the flexibility to choose one or multiple options from the list, and the system will present related product recommendations based on these selected conditions. On the product page, the featured product will be the one currently being viewed, 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, simply drag it to the top. For instance, the following combination will list products from the same category as the currently viewed products, along with 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 |
| 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 front end of the store. The Visual preference window will provide a wide range of customization options, along with a live preview of how the widget will appear on the store.
>> Know more about visual preferences.
Step 5: Generate the widget
After the configurations, clicking on the Create new recommendation will generate the new widget.
If you have App embed functionality enabled for SF Product Recommendations, The recommendation will be added to the store automatically. Otherwise, clicking on the Create new recommendation will only generate the widget. You have to install the widget in your store to display the widget on the store.
>> How to manually install a recommendation widget on the store.
