--- title: "How to Show Related Product Recommendations on Shopify Product Pages" description: "Learn how to display related products Recommendations on your Shopify store with StoreFrog Product Recommendation." author: "Arjun" published_date: 2024-04-16 modified_date: 2026-08-18 canonical_url: "https://www.webtoffee.com/docs/storefrog/related-product-recommendations-shopify/" source: "https://www.webtoffee.com" reading_time: 6 min word_count: 1087 categories: - "Documentation" - "Recommendation Templates" - "StoreFrog Product Recommendations" --- ## Summary Learn how to display related products Recommendations on your Shopify store with StoreFrog Product Recommendation. ## Breadcrumb [Home](https://www.webtoffee.com/) > [Documentation](https://www.webtoffee.com/category/documentation/) > [StoreFrog Product Recommendations](https://www.webtoffee.com/category/documentation/storefrog/) > How to Show Related Product Recommendations on Shopify Product Pages # How to Show Related Product Recommendations on Shopify Product Pages *Last updated on August 18, 2026* 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](https://apps.shopify.com/storefrog-product-recommendation-app?search_id=c59738ab-ca24-4a08-aaa0-0378e560f590&surface_detail=storefrog&surface_inter_position=1&surface_intra_position=2&surface_type=search) by WebToffee. ![Related products on the store](https://www.webtoffee.com/wp-content/uploads/2024/04/2024-04-12_12-11-442112-1024x784.png) *caption: Related products on the store* - Install the [SF Product Recommendations.](https://apps.shopify.com/storefrog-product-recommendation-app?search_id=c59738ab-ca24-4a08-aaa0-0378e560f590&show_store_picker=1&surface_detail=storefrog&surface_inter_position=1&surface_intra_position=2&surface_type=search) - 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. ![Available recommendation templates](https://www.webtoffee.com/wp-content/uploads/2024/04/2024-04-12_09-38-33-1024x834.png) *caption: Available recommendation templates* ## Customize recommendation Selecting the template will provide you with various options to customize the recommendation. ![Customize recommendation](https://www.webtoffee.com/wp-content/uploads/2024/04/image-14.webp) *caption: Customize 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. ![Automatic recommendations](https://www.webtoffee.com/wp-content/uploads/2024/04/image-11.webp) *caption: 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](https://www.webtoffee.com/wp-content/uploads/2024/04/image-12.webp) *caption: Single product page* ![Cart page](https://www.webtoffee.com/wp-content/uploads/2024/04/image-13.webp) *caption: 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](https://www.webtoffee.com/wp-content/uploads/2024/04/image-15.webp) *caption: 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](https://www.webtoffee.com/wp-content/uploads/2024/04/image-16.webp) *caption: 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](https://www.webtoffee.com/wp-content/uploads/2024/04/image-14.png) *caption: Display rules* The available filters under the Display rules will vary depending on the page selection you made. #### Available display rules ### 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.](https://www.webtoffee.com/docs/storefrog/customize-recommendation-widget-shopify/) ![Visual preferences](https://www.webtoffee.com/wp-content/uploads/2024/04/image-15.png) *caption: 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.](https://www.webtoffee.com/docs/storefrog/install-recommendation-widgets-shopify/) Also read - [Frequently Bought Together Recommendations for Shopify Product Page](https://www.webtoffee.com/docs/storefrog/frequently-bought-together-shopify/) - [Upsell Recommendations for Shopify Product Pages](https://www.webtoffee.com/docs/storefrog/upsell-recommendations-product-page-shopify/) - [Our Picks For You Recommendations for Shopify](https://www.webtoffee.com/docs/storefrog/our-picks-recommendations-shopify/) - [Display Recommendations for Selected Category of Products in Shopify](https://www.webtoffee.com/docs/storefrog/category-based-recommendations-shopify/)## Plugin Spotlight Plugin spotlight StoreFrog Product Recommendation App for Shopify [View product](https://www.webtoffee.com/product/shopify-product-recommendations-app/) ## About the Author [Arjun](https://www.webtoffee.com/author/arjun/) Technical writer for WebToffee. When I'm not crafting words, you'll find me either exploring hidden trails on my bike or curled up with a good sci-fi movie on Netflix. ## Documentation Navigation - [Getting Started](#getting-started-storefrog-recommendations)- [Setup Guide](https://www.webtoffee.com/docs/storefrog/storefrog-recommendations-setup/) - [Install Recommendation Widgets](https://www.webtoffee.com/docs/storefrog/install-recommendation-widgets-shopify/) - [Recommendation Templates](#frequently-bought-together-storefrog-product-recommendations)- [Recently Viewed for 404 Pages](https://www.webtoffee.com/docs/storefrog/recently-viewed-recommendations-shopify/) - [Bestseller](https://www.webtoffee.com/docs/storefrog/bestseller-recommendations-shopify/) - [Related Products Recommendations for Product Page](https://www.webtoffee.com/docs/storefrog/related-product-recommendations-shopify/) - [Cross Sell Recommendations for Cart Page](https://www.webtoffee.com/docs/storefrog/cross-sell-recommendations-cart-shopify/) - [Upsell Recommendations for Product Pages](https://www.webtoffee.com/docs/storefrog/upsell-recommendations-product-page-shopify/) - [Frequently Bought Together for Product Page](https://www.webtoffee.com/docs/storefrog/frequently-bought-together-shopify/) - [New Arrivals](https://www.webtoffee.com/docs/storefrog/new-arrivals-recommendations-shopify/) - [Our Picks For You](https://www.webtoffee.com/docs/storefrog/our-picks-recommendations-shopify/) - [Hot Selling](https://www.webtoffee.com/docs/storefrog/hot-selling-recommendations-shopify/) - [Custom Recommendations](https://www.webtoffee.com/docs/storefrog/custom-product-recommendations-shopify/) - [Advanced Options](#advanced-options-storefrog)- [Hide Out of Stock Products from Recommendations](https://www.webtoffee.com/docs/storefrog/hide-out-of-stock-products-shopify-recommendations/) - [Display Recommendations for Selected Category](https://www.webtoffee.com/docs/storefrog/category-based-recommendations-shopify/) - [Customize widget appearance](https://www.webtoffee.com/docs/storefrog/customize-recommendation-widget-shopify/)