Cross Sell Recommendations for Shopify Cart Page

Cross-selling is a strategy that involves suggesting complementary or related products to customers based on their current selection. Cross-sell recommendations aim to enhance the customer’s shopping experience by offering products that complement their existing choices, ultimately increasing the overall order value. For example, adding Cross-Sell Recommendations for Shopify Cart Page, and when a customer purchases a laptop, a cross-sell recommendation might suggest accessories like a laptop case, mouse, or external hard drive.

Implementing cross-sell recommendations in your Shopify store can significantly boost sales by encouraging customers to discover additional items that enhance their primary purchase. These recommendations are typically presented on product pages, in the shopping cart, or during checkout, offering customers a convenient way to add complementary products to their orders.

In this article, we’ll walk you through the steps to set up effective cross-sell recommendations on your Shopify store, helping you to increase your store’s revenue while providing customers with a richer and more personalized shopping experience.

1. Install SF Product Recommendations.
2. Navigate to Apps > SF Product Recommendations.
3. Click on Create new recommendation.

4. Select the Cart page to display the Cross-sell recommendations. Cross-sell recommendations are also available on Product pages.
5. Under the recommendation type, choose Cross sell.

Once the page and widget are selected, you will be redirected to a dedicated page for cross-sell recommendations. All created cross-sell recommendations are listed here.

1. Click on Add new bundle.
2. Select the product for which you want to see recommendations. Cross-sell recommendations will be displayed when the selected products are added to the cart.
3. Click Next.

4. Choose up to 3 products to display cross-sell recommendations.
5. Click Confirm.

6. Repeat the process for as many varieties of bundles as you wish, then click on Continue once all bundles are created.

The recommendations widget has a default title and subtitle that work well for most cross-sell scenarios, but you can customize them in the Widget title section as needed.

To spice things up, you can add a bonus discount to the offer. Under the discount section, you can provide discounts for users opting for cross-sell promotions.

• The discount is provided as a percentage value. Enter the corresponding value in the Discount Value field.
• You can combine the cross-sell special discount with ongoing product, order, and shipping discounts.
• You can also schedule the special discount to be available only on selected days.

Next, to customize the appearance of the recommendation widget, click on Customize under Customise widget appearance.

You have various options to customize the widget’s look and feel. These include selecting a display layout, customizing multiple text types, buttons, and alignments, and much more.

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.  

1. Customization options—The sidebar contains a wide range of customization options for the widget’s appearance.
2. Preview—The preview provides a clear idea of how the recommendation widget will appear in the store based on the customization options applied in real-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

Customization options

• Widget layout – Customize the design, 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 to texts and background properties.

After adjusting the appearance to your preferences, click the Back button at the top left corner to return to the main recommendation configuration page.

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 display it on the store. To know more about manual widget installation, refer to the article, How to install a recommendation widget on the store manually.

Once you complete all the configurations mentioned, your store will receive a cross-sell product recommendation, as shown below.