Home > Docs > StoreFrog Product Recommendations > Personalize Appearance of Recommendation Widget in Shopify Store

Personalize Appearance of Recommendation Widget in Shopify Store

Last updated on October 4, 2024

Product recommendations are one of the most efficient ways to boost your sales, and SF Product Recommendations offers a comprehensive solution for enhancing product recommendations on a Shopify store. This article explains how you can customize the look and feel of the recommendation widget on the front end to catch the customer’s eye.

The application lets you customize each recommendation in your store based on your taste.

Customize widget appearance

Selected a recommendation to configure and under Visual preferences, click on Customize to access the customization options.

Customize recommendation widget
Customize recommendation widget

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.

Visual preference settings
Visual preference settings
  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

Customization options

The customization options are divided into three sections.

  • Widget layout – Customize the layout, title, 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.

Widget layout

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

Widget layout customization
Widget layout customization
  • Widget title – Text displayed as the title of the recommendation widget.
  • Total number of products to display – The selected number of products will be displayed on the widget in total.
  • 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:
    • Grid
    • Slider
    • List
Layout as list
Layout as list
Layout as grid
Layout as slider
Layout as slider
  • Total number of products per row – The selected number of products will be displayed in a single row of the widget. This count is independently adjustable for Desktop, Mobile, and Tablet views.

The Total number of products per row function is not applicable for List layouts.

  • 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:

Product info customization
Product info customization
  • Display – The selected data will be displayed on the widget.
    • Product price – Select to display product price on the widget.
    • Out of Stock – Select to display out-of-stock status for eligible items 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:

Action button customization
Action button customization
  • Display – Unselect to hide the Add to cart button.
  • Button text – Text displayed on the Add to cart button.
  • 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.

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.