Recently Viewed and compared products in Magento 2, are products that shoppers have recently viewed or added to their comparison list while navigating to your Magento 2 site.

Magento 2 Recently Viewed and compared products usually display in the left or right sidebar of a page, allowing shoppers, to save time on browsing the catalog to find the product they last viewed or added to their comparison list.

To display recently viewed and compared products at a specific page of your storefront, you need to configure their options, create a widget from the backend and select where to display the widget in the storefront.

Configure Recently Viewed/Compared Products Options

1. Log in to the admin panel, and go to Stores > Settings > Configuration

2. Expand Catalog and click on "Catalog"

3. Scroll-down, expand the "Recently Viewed/Compared Products" tab, and configure each option:

  • Synchronize widget products with backend storage: choose "Yes" to synchronize recently viewed/compared products widgets info ( eg. product ID), with your current product storage availability in the database. You can reuse this information on different devices. Choose "No" to disable recently viewed/compared products widgets Synchronizationwith backend storage.
  • Show for Current: choose the current website, store, or store view where the "recently viewed /compared products" will display.
  • Default Recently Viewed Products Count: enter the default number of recently viewed products to display in the viewed products blocks
  • Default Recently Compared Products Count: enter the default number of recently viewed products to display in the compared products blocks
  • Lifetime of products in Recently Viewed Widget: enter the max time (in seconds) to display viewed products in the recently viewed block. You can enter any time range in seconds, greater than zero.
    Lifetime of products in Recently Compared Widget: enter the max time (in seconds) to display compared products in the recently compared block. You can enter any time range in seconds, greater than zero.


4. Click Save Config

Viewed compared options

Create Recently Viewed/Compared Products Widgets

Once you have configured the recently viewed/compared products options, it's time to create the recently viewed/compared widgets and selects the page position to display in the frontend.

1. Log in to the admin panel, and navigate to Content > Elements > Widgets. Click Add Widget

Widget grid

2. In the Settings section:

Type: select the widget type: "Recently Viewed Products" or "Recently Compared Products"

Design Package/Theme: choose the theme to make the widget available

Click Continue

Widget settings

Widget Title: enter the title to appears in the recently viewed/compared blocks in the storefront

Assign to Store Views: choose to store views where the viewed/compared widget will be visible. You can choose one or multiple store views.

Sort Order: enter a number to determine the order display of the viewed/compared widget in the frontend (0 = first, 1 = second, 3 = third, and so on.)

Widget stores

3. In the Layout Updates section:

Click Add Layout Update, and configure the layout update of the widget:

  • Display On: choose the page type to display the widget in the frontend
  • Page: select the page to display the "recently viewed/compared widget"
  • Container: choose the area of the page layout where the "recently viewed/compared widget" will display
  • Template: choose the template you needs to display the "recently viewed/compared widget"

If you want to display the "recently viewed/compared widget" to more pages, click "Add Layout Update" and configure the layout update for the pages.

Widget layout settings

4. In the "Widget Options" tab:

Number of Products to display: enter the number of products to display in the widget

Product attributes to show: choose the product attribute to includes in the "recently viewed/compared widget" block

Buttons to show: choose the button to include in the "recently viewed/compared widget" block

Click Save, and flush the caches

Widget options

To edit the widget :

  • go to Content > Elements > Widgets.
  • search the widget. You can use filters above the grid to quickly search the widget
  • click on the widget to be edited
  • edit the widget
  • Click Save

To delete the widget :

  • go to Content > Elements > Widgets.
  • search the widget. You can use filters above the grid to quickly search the widget
  • select the checkbox of the widgets to be deleted
  • In the mass action list, set Actions to Delete
  • Click Submit, and OK to confirm the action

Frontend View

Example of recently viewed widget block that displays at the bottom of the page

Viewed products in frontend

Example of recently compared widget block that displays on sidebar of the page

Compared products in frontend

To edit the widget options, or to display recently viewed/compared products block at different pages and positions, you can reopen the widget in the backend, changes the layout and options settings per your needs.

Conclusion

Displaying recently viewed/compared products in Magento 2 store can greatly improve the shopping experience and customers engagements. It makes it easier for shoppers to select the product they last visited or compared instead of looking at them from the whole store catalog.

We hope you find this step-by-step guide to display "recently viewed/compared products" in Magento 2 helpful.
Feel free to share this article or leave a comment below. Your opinion is much appreciated!

Tags: magento-2-marketing-tutorials