Home > Docs > StoreFrog Product Recommendations > Related Products Recommendations for Shopify Product Page

Related Products Recommendations for Shopify Product Page

Last updated on October 4, 2024

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.

Related products on the store
Related products on the store
  1. Install the SF Product Recommendations.
  2. Navigate to Apps > SF Product Recommendations.
  3. Click on Create widget.
  4. Select the Product Page to display the Upsell recommendations.
  5. Under the recommendation type, choose Related products.

Related product recommendations are available on both the product and cart pages.

Available recommendation templates
Available recommendation templates

Customize recommendation

Selecting the template will provide you with various options to customize the recommendation.

Customize recommendation
Customize recommendation

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.

Automatic recommendations
Automatic recommendations
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.

Selecting recommendations based on filters
Single product page
Cart page
Cart page

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.

Sample configuration
Sample configuration

Step 2: Set up widget title

This text will display as the title of the product recommendation widget in the e-store.

Widget title
Widget title

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:

Display rules
Display rules

The available filters under the Display rules will vary depending on the page selection you made.

Selected pageAvailable Display rules
Product pageCategory | Collections | Products | Tags | Viewing date | User Status | Price
Collection pageCategory | Viewing date | User Status | Price
Shop pageViewing date | User Status | Price
Cart pageCategory | Collections | Products | Tags | Viewing date | User Status | Price
404 pageUser role

Available display rules

Display ruleExplanationOptions
CategoryThe 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.
CollectionsThe 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.
ProductsThe 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 tagThe 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 dateThe 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 roleThe 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.
PriceThe 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.

Visual preferences
Visual preferences

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.