Skip to main content

Configuration

Video tutorial​

General​

In the configuration panel you can choose how Visidea behave in your website.

Configuration sections​

Global settings

In the general section you can configure how the plugin works globally. It is structured in two panels:

  • Global settings
  • CSS settings

In the Global Settings pane, you can configure the following options:

The Global Settings panel allows you to control the main features and filters of the Visidea plugin. The available options include:

  • Display VS: Toggle to enable or disable the Visual Search (VS) feature.
  • Show after: Enter the CSS selector (e.g., .ast-icon.icon-search) to specify where the Visual Search icon should appear on your site.
  • Plugin image: Provide the URL for a custom image to be used by the plugin (optional).
  • Display SS: Toggle to enable or disable the Semantic Search (SS) feature.
  • Semantic search binding: Enter the CSS selector (e.g., .ast-header-search) to bind the semantic search functionality to a specific element.
  • Activate Auto Complete: Toggle to enable or disable autocomplete suggestions in the search bar.
  • Gender filter: Toggle to show or hide the gender filter in the search bar.
  • Price filter: Toggle to show or hide the price filter in the search bar.
  • Category filter: Toggle to show or hide the category filter in the search bar.
  • Brand filter: Toggle to show or hide the brand filter in the search bar.
  • Cart button: Toggle to show or hide the cart button in product listings.
  • Categories: Select one or more categories (e.g., "Apparel & Accessories") to define the scope of your catalog.
  • Currency: Choose the currency (e.g., Euro) for your store from a dropdown menu.
  • Format: Select the format for displaying currency values (e.g., 1900,00 Euro).

After making changes, click Save Configuration to apply your settings.

CSS settings

The CSS settings panel allows you to fully customize the appearance of Visidea’s recommendations and widgets on your website.

  • Custom CSS: Enter your own CSS code in the provided text area to override or extend the default styles. This field supports multiline input, so you can add as many rules as needed to match your branding or layout requirements.

After entering your custom CSS, click Save Configuration to apply your changes. The new styles will take effect immediately, allowing you to preview and refine the look and feel of your recommendations directly from the configuration panel.

Recommendations settings​

With Visidea, you can add and customize recommendation widgets in multiple sections of your website to maximize user engagement and sales. Widgets can be placed in the following areas:

  • Home Page: Showcase trending, popular, or new products to all visitors.
  • Product Detail Page: Suggest similar items, frequently bought together products, or complementary accessories based on the current product.
  • Shopping Cart Page: Recommend add-ons or related products to increase average order value before checkout.
  • Thank You Page: Display post-purchase recommendations to encourage repeat visits or additional purchases.

Each section can have one or more recommendation blocks (carousels), and you can fully configure what is displayed and how it appears. Widgets are highly customizable to fit your site's layout and user journey.

Widget configuration​

Each recommendations section can contain one or more configurable blocks (carousels). For each block, you can set:

  • Active: Toggle to enable or disable the block on your page.
  • Algorithm: Select the recommendation algorithm to use for this block (e.g., Collaborative Filtering, Popular Items, Last Seen, New Arrivals, Visual Similarity, Frequently Bought Together). Some algorithms may be disabled depending on the page context.
  • Heading: Enter the title or heading that appears above the carousel (e.g., "popular products").
  • Items: Set the total number of products to display in the carousel.
  • Rows: Choose how many rows of products to show in the carousel.
  • Arrows: Toggle to show or hide navigation arrows for scrolling through products.
  • Dots: Toggle to show or hide navigation dots below the carousel for quick navigation.
  • Show after: Enter the CSS selector (e.g., .elementor-74) to specify where the carousel should be inserted on the page.
  • Slides XS: Number of product slides to display on extra small screens (e.g., smartphones).
  • Slides SM: Number of slides to display on small screens (e.g., tablets).
  • Slides MD: Number of slides to display on medium screens (e.g., laptops).
  • Slides LG: Number of slides to display on large screens (e.g., desktops).

You can add, remove, or reorder blocks as needed. After configuring each block, click Save Configuration to apply your changes. Use the Delete Block option to remove a block from the section.

How to Get the CSS Selector​

  1. Go to the corresponding section on your website. For example, if you are setting the home page in the Visidea app, go to the home page of your website.
  2. Hover the cursor over the element after which you want to insert the recommendations and right-click.
  3. Select Inspect.
  4. Identify the highlighted element code.
  5. Right-click on the highlighted code.
  6. Select Copy > Copy selector.
  7. Paste the copied selector into the "Show After" field in the Visidea app.

Algorithms description​

Visidea offers several recommendation algorithms to optimize product discovery and increase conversions. Here’s a summary of each available algorithm:

Collaborative Filtering​

Recommends products based on the browsing and purchasing behavior of users with similar interests. This AI-driven approach helps users discover items they are likely to appreciate, even if they haven’t viewed them before.

Displays the best-selling or most popular products in your store. This algorithm is ideal for showcasing trending items that attract the attention of a broad audience.

Last Seen​

Shows users the products they have recently viewed. This feature makes it easy for customers to return to items they were interested in, improving the shopping experience and increasing the likelihood of a purchase.

New Arrivals​

Highlights the latest products added to your catalog. Use this algorithm to promote new inventory and keep your customers informed about fresh offerings.

Visual Similarity​

Suggests products that visually resemble the item currently being viewed. This is especially useful for fashion, accessories, or any category where appearance is a key factor in purchasing decisions.

Frequently Bought Together​

Recommends products that are commonly purchased together with the item being viewed. This algorithm is effective for cross-selling complementary products and increasing average order value.