Frequently Bought Together Recommendations for Shopify Store

Enhance your online store with the power of intelligent product recommendations! This step-by-step guide explores various methods for setting up Frequently Bought Together (FBT) Recommendations on a Shopify store with SF Product Recommendations. Learn how to personalize recommendations, track performance, and gain valuable customer insights, all while unlocking a more profitable and user-friendly shopping experience.

1. Install the StoreFrog Product Recommendations app from the Shopify app store.
2. From your Shopify admin panel, navigate to Apps > SF Product Recommendations.
3. To begin with, click on Create widget.

Clicking Create widget redirects to the Create a widget page where the available pages in the store are listed along with the available recommendations that can be displayed on each page.

The application enables you to display recommendations on product pages and cart pages.

• FBT for Product page –Recommendations will generate based on the product that the customer is currently viewing.
• FBT for Cart page – Recommendations will generate based on the last product added to the cart.

To display FBT recommendations:

1. Under Select a page, select Product page or Cart page as required.
2. Then, under the section Select a widget type, choose Frequently bought together.

This will open up the configuration page for FBT recommendations.

There are a total of 4 methods to display frequently bought together recommendations.

1. Manual recommendations (Priority 1) – Set custom FBT recommendations for any product of your choice from the store.
2. Automatic recommendations (Priority 2)- Complex algorithms generate FBT recommendations based on the purchase history and other factors of each product.
3. Global recommendation (Priority 3)- Set up FBT recommendations to display for all products in the store.
4. Random recommendations (Priority 4)- FBT recommendations display random products from the same category, collection, or type. The main purpose of the method is to work as a fallback if there aren’t enough products available from other methods.

Manual recommendations enable to set of custom products as FBT recommendations for any product in the store.

1. To set it up, click on Set recommendation.

2. From the upcoming page, click on Add new bundle.

3. From the pop-up window, select the product that you want to assign the custom recommendations and click on Select.

4. From the next window, select the products that you would like to display as the FBT products. A maximum of 4 products can be selected. To create the custom recommendation, click on Add.

Now, the custom bundle will be listed under manual recommendations as shown below. You have the option to edit, delete, or add more custom recommendations as desired from this location.

Automatic recommendations are generated using a complex algorithm that takes into account purchase history and various other factors for each product in order to suggest frequently bought together products. Simply enable the checkbox to add automatic recommendations to your store.

Global recommendations allow any product in the store to be featured as a common recommendation for all products, regardless of category or collection. The selected product under global recommendations will be displayed as FBT (Frequently Bought Together) recommendation for all products in the store..

1. To set it up, click on Set recommendation.

2. From the upcoming page, click on Add recommendation.

3. From the popup window, select the products that you would like to display as the global FBT products. A maximum of 5 products can be selected. To create the custom recommendation, click on Add.

Now, the selected products will be listed under global recommendations. You have the option to delete, or add more custom recommendations as desired from this location.

Random recommendations are more like a fallback. Once you enable the method, if the application cannot find any FBT recommendation from other methods, the widget will display products from the same collection, category, or type based on your choice.

1. To set it up, Enable the method and click on Set recommendation.

2. Select what product to display as FBT recommendations. You can choose to display products from the same collection, category, or type.

Once you configure the recommendation methods as required, enter a title for the recommendation widget to display on the front end under the Widget title.

Next, to customize the appearance of the recommendation widget, click on Customize under Visual Preferences

Here, you have numerous options to customize the look and feel of the widget. These include options to limit the number of products displayed, select a display layout, customize various types of text, buttons, alignments, and much more. For additional information on customization options, refer to the setup guide.

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.

1. Customization options – The sidebar contains a wide range of customization options that can be used to customize the appearance of the widget.
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 customization options are divided into three sections.

• Widget layout – Customize the layout number of products to display, display style, and more.
• Product info – Customize product info content, including price, title alignment, font color, and more.
• Action button – Customize the Add to cart button’s display, text, action, background color, and font color.
• Discount – Customize the discounts related texts and background properties.

Widget layout

Widget layout section provides options to customize the layout of the recommendation widget as shown below

• Total number of products to display – The selected number of products will be displayed on the widget in total (Maximum number of 5).
• Display style – The recommendation section will be displayed on the selected style. This option is individually customizable for Desktop, Mobile, and Tablet views. the available options are:
  • List
  • Table (Amazon style)
  • Gallery

• Title alignment – The selected text alignment will be applied to the widget title. The available options are:
  • Align to the left
  • Align center
  • Align to the right
• Font color – Font color of the title.

Product info

Product info section provides options to customize the product info content in the recommendation widget as shown below:

• Display – The selected data will be displayed on the widget.
  • Product price – Enable to display product price on the widget.
  • Total price – Enable to display the total value of the bundle on the widget.
• Product title alignment – The selected text alignment will be applied to the product name. The available options are:
  • Align to the left
  • Align center
  • Align to the right
• Font color – Font color of the product title.

Action button

Action button section provides options to customize the product info content in the recommendation widget as shown below:

• Cart button – Disable to hide the Add to cart button.
• Button text for a single product – Text displayed on the Add to cart button if there is only one product on the recommendation widget.
• Button text for two products – Text displayed on the Add to cart button if there are two products on the recommendation widget.
• Button text for multiple products – Text displayed on the Add to cart button if there are more than two products on the recommendation widget.
• Button action – The selected action will be triggered on selecting the Add to cart button. The available options are:
  • Redirect to the cart page
  • Stay on the page
  • Redirect to the checkout page
• Button background color – Color of the Add to cart button.
• Button font color – Color of the text inside the Add to cart button.

Discount

The discount section provides options to customize the discounts related texts and background properties.

• Display Discount text – Enable the display of a discount-related text on top of the total price of the bundle. By default, the text is Buy this bundle at {discount} off.
• Discount text – Discount-related text displayed on top of the total price of the bundle. By default, the text is Buy this bundle at {discount} off.
• Discount text color – The color of the text related to the discount.

After adjusting the appearance to your preferences, simply click on the Back button located in the top left corner to return to the main recommendation configuration page. Your changes will be automatically applied.

Once you have configured the visual preferences as needed, get back to the FBT configuration window by clicking on the back button.

In the Display rule section, set conditions to determine when the recommendation widget appears in the store.

You can specify that the recommendation widget only shows for certain Categories, Collections, Products, Tags, User roles, users viewing the recommendation on specific dates, or products within a designated price range. If no conditions are specified, the recommendations will always be visible.

For this instance, we’ll have the recommendations displayed for all products under any conditions. So, no specific selections.

Finally, you have the option to set a discount for customers who choose to purchase the whole FBT bundle displayed.

Under the Discount tab, choose a discount type and specify the value as shown below. You can either provide a percentage discount or a flat rate discount on the total value of the product bundle.

Finally, click on the Create widget to generate the recommendation.

You have now created the recommendation for your site. It might take a couple of minutes to generate the recommendation based on the size of your store.

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.

Once you complete all the configurations as mentioned, your store will have an FBT product recommendation as shown below.