Home > Docs > StoreFrog Product Recommendations > StoreFrog Product Recommendations- Setup Guide

StoreFrog Product Recommendations- Setup Guide

Last updated on May 9, 2024

SF Product Recommendations offers a comprehensive solution for enhancing product recommendations on a Shopify store. This app provides a diverse collection of recommendation widgets designed to seamlessly integrate with a Shopify store, allowing you to tailor these widgets to suit customers’ preferences. This setup guide is designed to quickly and effectively assist you in configuring Storefrog Recommendations for a Shopify store.

Features offered

The application provides:

  1. Access to a diverse selection of product recommendation widgets, including options like New Arrivals, Bestsellers, On-sale products, Recently Viewed items, Related products, and more.
  2. Recommendation widgets tailored for different store pages, such as Product, Shop, Collection, Cart, and 404 Pages.
  3. Recommendations widgets are categorized based on customer preferences and behaviors in to Generic, Contextual, and Personalized recommendations.
  4. Design your own custom recommendation widget using advanced customization filters.
  5. Personalize the appearance and style of the recommendation widget to match your unique preferences.

The below images show few of the available widgets displayed on different pages of the store.

Getting Started

Once the application is successfully installed,

  • From the Shopify admin panel, navigate to Apps.
  • Under the Installed apps section, select the option SF Product Recommendations.
Shopify - Home page
Shopify – Home page
  • This will open up the application’s Home page.
StoreFrog Recommendations - Syncing products
Syncing products

Enable app embed for StoreFrog

Once the application is installed and if you haven’t enabled app embed for StoreFrog there will be a warning on the home page.

To enable app embed, click on the Enable button on the warning message or from the admin panel navigate to Online Store > Themes > Customize > App embeds.

Enable the toggle inline to StoreFrog

Home

Upon installation, the Home page enables you to generate a new recommendation widget while also presenting initial analytics data depicting the performance of the recommendations on your store (Note: Upon installation, these values will be initialized to zero).

StoreFrog Recommendations - Home page
StoreFrog Recommendations – Home page
  • Total revenue – Total revenue received from the sales facilitated through the recommendation widgets.
  • Click through rate – The proportion of clicks on the recommendation widget to the overall impressions.
  • Impressions – The overall occurrences of a recommendation widget loading on a page.

Once recommendation widgets are created, the Home page displays all the generated widgets along with several control options:

Storefrog Recommendations - Home page
Storefrog Recommendations – Home page

The available options are:

  • Sync – Click to manually regenerate the recommendation (Automatically regenerates recommendations once a day).
  • Install widget Click to activate and display the recommendation on the store.
  • Edit – Click to customize the recommendation settings.
  • Delete – Click to remove a recommendation from the store.

Click on the Create new recommendation button from the home page to access the available recommendations.

Creating a new recommendation widget
Creating a new recommendation widget

The Create recommendation page offers an extensive selection of recommendation widgets that can be effortlessly integrated into your Shopify store with a simple click. These recommendation widgets are categorized based on the 5 types of pages available in the Shopify store.

Available recommendation widgets
Available recommendation widgets

The store pages available to display the widgets are as follows:

  • Product page
  • Collection page
  • Shop page
  • Cart page
  • 404 page

The available pages and the supported recommendation widgets are as follows:

PageAvailable Recommendation Widgets
Product pageRelated products | Best seller | New arrivals | Hot selling | Recently viewed | Our picks for you | Custom widget
Shop pageBest seller | New arrivals | Hot selling | Recently viewed | Our picks for you | Custom widget
Collection pageBest seller | New arrivals | Hot selling | Recently viewed | Our picks for you | Custom widget
Cart pageRelated products | Best seller | New arrivals | Hot selling | Recently viewed | Our picks for you | Custom widget
404 pageBest seller | New arrivals | Hot selling | Recently viewed | Our picks for you | Custom widget

Add a recommendation widget

Selecting a page from the Create recommendation page provides access to all available recommendations for that specific page. Simply click on any of the templates to incorporate the chosen recommendation into your store.

Choosing a recommendation template unlocks a variety of options for customizing the selected recommendations.

The options available under the configuration window will vary based on the page and recommendation template selected. Refer to the available recommendations to know more.

Available Recommendations

Recommend products from

This section enables you to select the products to be showcased as recommendations. While the recommendations are preconfigured for each template, the application provides a limited degree of customization for the displayed products. There might be situations where stores lack sufficient product or sales data to tailor these recommendations. This customization will prove useful in such scenarios.

Widget title

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

Recommendation widget in the front end
Recommendation widget in the front end
Setting products to be recommended
Setting products to be recommended

The Products to be recommended section allows the selection of the desired product groups to be displayed on the product recommendation widget. The application allows choosing multiple product groups to generate the product recommendation.

>> Know more about Products to be recommended

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.

https://www.webtoffee.com/wp-content/uploads/2023/11/2023-10-31_13-46-38-1024x557.png
  1. Customization options – The sidebar contains a wide range of customization options that can be used to customize the appearance of the widget like font size, layouts, number of products to display and more.
  2. Preview – The preview provides a clear idea of how the recommendation widget will appear on the store based on the customization options applied, in live time.
  3. Preview mode – Preview option for different devices. The preview will change based on the device type selected. The available preview options are:
    1. Desktop
    2. Tablet
    3. Mobile

The visual preference setting will vary based on the recommendation type selected.

>> Set up Visual preferences for Related products, Best sellers, New arrivals, Hot selling, Recently viewed, Our picks for you, and Custom widgets.

>> Set up Visual preferences for Frequently bought together

Display rules

The recommendation widget will be visible for the products on the front end only when the filter selected here matches the products on the front end. The available filters are:

https://www.webtoffee.com/wp-content/uploads/2023/11/2023-10-31_14-11-05-1024x176.png

>> Know more on Display rules and how to set them up

Sort products by

The products inside the recommendation widget will be sorted based on the selected filter. The available filters are:

  • Popularity – Sort the products inside the recommendation in the order of:
    • Most to least popular – The product with a high sale count comes first.
    • Least to most popular – The product with a low sales count comes first.
  • Created date – Sort the products inside the recommendation in the order:
    • Oldest to newest – The product added to the store first comes first.
    • Newest to oldest – The product added to the store at last comes first.
  • Price – Sort the products inside the recommendation in the order:
    • High to low – The product with the highest price comes first.
    • Low to high – The product with the lowest price comes first.
  • Randomize – The products inside the recommendation will be displayed randomly without any sort of order.

Analytics

This page offers an in-depth overview of the performance of the recommendation widgets on your store, providing insights into metrics such as the frequency of the recommendation widgets appearing on pages, the number of sales facilitated through the widgets, and much more data.

StoreFrog analytics page
StoreFrog analytics page
  • Average order value – Gross sales divided by the total number of orders places in the store.
  • Total revenue – Total revenue received from the sales facilitated through the recommendation widgets.
  • Total sales – Aggregate sales generated through the recommendation widget.
  • Click through rate – The proportion of clicks on the recommendation widget to the overall impressions.
  • Impressions – The overall occurrences of a recommendation widget loading on a page.
  • View rate – Overall occurrence of a customer engaging with a recommendation widget.
  • Conversion rate – The percentage of purchases made after clicking a recommendation widget,

Furthermore, this page furnishes data based on individual pages within the store, as well as specific information for each recommendation widget that you have created. This detailed breakdown enhances your understanding of performance metrics at a granular level.

Settings

This page lists a few general settings that apply to the entire store.

App general settngs
App general settings
  • Hide out of stock products – Enable to hide any out-of-stock products from showing up on the recommendation widget.
  • Remove StoreFrog branding – By default, there will be a branding on every recommendation widget created. Enable to remove the branding from the recommendation widget.