Recommendations Setup

By following these steps you will learn how to create a Recommendations Carousel from scratch.

Previous Requirements

• Single Script Installated or Updated
• Started Trial, or a Doofinder Plan that fits your criteria.

How to Configure Recommendations: Create your Carousel with Detailed Steps

These are the simplified steps for configuring a Carousel. Dive into the article to find out more about them:

1. Before creating a carousel, go to Recommendations and scroll down to the second section Page Type mapping configuration. Make sure to have it configured for the carousel to appear on the chosen page. Click here to learn how.
2. Now, after the Page Type mapping configuration is done. On the section above, click on Add carousel at the top-right side of the panel. From here, you have the power to Add, Delete, and Save the changes to your new recommendation carousel.
3. Select on which Page you want to display the Carousel.
4. Add the CSS Selector to place the Carousel.
5. Select Logic for your Carousel.
6. Add Search Engines.
7. Create Filters: filter the recommended products displayed (optional).
8. Enable or Disable Fallback (optional).

Once the panel is open:

1. Name the Carousel with your preferred internal name.
2. Select the Status: either enable or disable the carousel.
3. Select on which page you would like to configure the carousel. Learn about all the Page Types and their specificities.
4. Specify the Carousel Placement using the CSS Selector and define the relative position of the carousel. If you need help finding the CSS selector, read this documentation.

Keep in mind that you can add multiple CSS selectors. If the first one doesn't exist, Doofinder Recommendations will automatically use the next one.

To define the relative position of the carousel to the element choose between: Replace / At first / At least / Before / After.

The position is defined through two compulsory actions:

1. Input the CSS selector of the location on your website page.
2. Select one of the options to decide whether you want to:
• Replace that CSS with the widget
• Place it At First or Last element of that CSS
• Place it Before or After that CSS

5. Select a Logic for your carousel. Review each Logic here to find the perfect fit.

Note that some logics require training to show the desired results. Additionally, some logics work across all Pages, while others are designed for single Product Pages and Customized Pages.

• Logics for all Pages: Most Popular, Most Searched, Browsing History, and Custom Picks.
• Logics for Pages that show one single product: Similar Products, Visually Similar, People Also Viewed, and Personalized Match (these last two need training).

Once Saved, the Logic cannot be modified. You will need to create a new carousel.


6. Add Search Engines to your Carousel. Choose a public title for each Search Engine and add as many as you would like to show the carousel.

By adding all desired Search Engines in this step, you can streamline the setup process and ensure everything is configured in one go.

7. Indicate the maximum number of products you want to show in the carousel. By default, 10 products are displayed. You can increase up to 25, or decrease this number down to 5 to suit your needs.
8. To include or exclude out-of-stock products on the carousel, enable or disable Exclude out of stock products from carousel button on the right side of the section.

By following these steps you will have created your Recommendations Carousel. To add an advanced touch to your carousel and leverage your recommendations,configure Filtersand select Fallback if appropriate.

Learn by Example - Creating a Carousel

If you have followed the previous steps, this is how creating a carousel will look like:

On our Page Type mapping configuration we opt to write these URLs for our carousel to appear on:

Now, we click on “Add carousel” to create one, fill all the fields, and select where to display it:

We add the “Similar” title, and leave the Status enabled, as we want to show our carousel from the moment we save it.

We choose the Product pages which we have configured before in Page Type mapping and paste the following CSS selector where we want our carousel to display after inspecting the page, in this case: #main-content > div.container > div > h2.

And we choose for the widget to display by replacing the content on "h2".

Afterward, we select our desired logic, which in this case is Visually Similar, and display it in one of our Search Engines (doofinder_product) with a maximum number of products to display: 10; without out-of-stock products.

We disable Filters and Enable Fallback, then click Save:

This is how it looks like in the Admin Panel after its creation:

This is how it looks on our product page and with our configuration:

Now, the carousel shows 10 visually similar products to the one shown on the product page respecting our desired placement.