Skip to content

Recommendation banners 

Recommendation banners are elements of your online store that present recommended products. They help you increase conversion as customers willingly use product recommendations and upsell offers displayed to them to buy more.

Recommendation banners use both customer behavior data you collect and product data. These are the types of recommendations you can create and display using banners:

  • Personalized recommendations
  • Complementary products
  • Bestsellers
  • Popular products
  • Similar products
  • Cross-selling products
  • Alternative recommendations (for new customers with no purchase or visit history).
     

You can place recommendation banners anywhere in your online store, e.g., on home page, product pages or shopping cart page. Using an intuitive editor you can easily customize the appearance of your banners, so it matches the style and desing of your online store.

Requirements

Recommendation banners need data from your online store. To be able to display them correctly, make sure that the Web Tracking channel is configured correctly.

Banners – dashboard

In the side panel select Automation > Banners. A list of all your banners will be displayed, grouped by status:

  • All – All recommendation banners you have created.
  • Active – Banners that are currently in use. You can preview active banners, pause their display or delete them, but you cannot edit them.
  • Inactive – Banners that are no longer displayed – you can preview, edit, activate and delete them.
  • Drafts – Banners that you have started creating – you can preview, edit or delete them.
  • Deleted – All removed banners – you can only preview them.

The banner list contains the following columns:

  • Status – Displays the current status of the banner: draft, active, inactive.
  • ID – Scenario identification number.
  • Name – Title given to the banner.
  • Views – Number of times a given banner has been displayed.
  • Clicks –  Number of times a customer clicked on the banner.
  • Actions related to banner management: preview, activate, deactivate, edit, delete.

You can sort and apply advanced filtering to all tables with banners. Below the table you can find pagination and set the number of rows to be displayed in the table.
 

Now it’s time to create your first recommendation banner

Creating recommendation banners

Above the table, on the right-hand side, click the Create Banner button.

At the top you can see a progress bar showing 5 stages of the process. The stage you are currently working on is highlighted with a colored line. You can freely move between stages by clicking on them – it will not result in the loss of data you have already entered.

Step 1: Basic settings

  1. Enter the name of the banner that will be visible in your control panel.
  1. From the drop-down list, select the URL where the banner will be displayed.
  1. Optionally, set the time range – date and time – in which the banner should be displayed.

Step 2: Conditions and recipients

Here you can decide when the banner will be displayed. This is not a mandatory step and you can skip it – in that case the banner will be displayed on all pages of your online store.

In the Conditions section you can choose from:

  1. Page type – Display your banner only to the selected page type:
    • Product pages – The banner will be displayed on product pages in your store.
    • Cart pages – The banner will be displayed when the customer enters the cart page.
    • Payment confirmation pages – The banner will be displayed on the order confirmation page.
    • Other – The banner will be displayed on other pages in your online store.
  1. Page address – Specify what keywords, phrases or domain name elements must be included in the website’s URL address for the banner to be displayed on it. You can choose from:
    • Condition: equals, begins, contains, regular expression – This option opens up a window for entering a maximum of 10 regular expressions.
    • Value – Here you enter the keyword or URL.
    • Test value – Enter the address of the page where you want to test the banner. Once entered, click Test and check if the banner displays on the page correctly.
  1. Session duration – Set the time interval after which the banner will be displayed to the user, e.g., between 10 and 20 seconds.
  1. Number of pages visited – Set the number of pages visited after which the banner should be displayed. Also indicate the type of pages the user has to visit for the banner to be displayed: any page, product page, cart page, payment confirmation page.

In the Recipients section set which customers will see the banner:

  • New / returning – Select the user type from the drop-down list.
  • Customer / non-customer – Choose whether the banner should be displayed to your current customers or only to visitors who are not your customers yet.
  • Consents – decide how many and what kind of consents should the users grant before displaying them a banner.
  • Session source – Clients to whom the banner will be displayed, e.g., those coming from a specific social media channel, search engine or article linking to the website with the banner. You can also provide the UTM tag for a specific marketing campaign.

Step 3: Content

An editor is used to design recommendation banners – it is the same editor that you create your emails and pop-ups with. 

If this is your first contact with the ExpertSender editor, please read this article: How does the message editor work? for a detailed description of its features.

Let’s move on to the recommendation banner settings: 

  1. Click Content in the progress bar. 
  1. An editor window will open with a workspace containing the Recommendation block. Click on the block and the edit menu will appear on the left. 
  1. From the drop-down list select the URL where the banner should be displayed. 
  1. Select Recommendation type: 
    • Items-to-user – It displays recommendations based on the contents of the customer’s cart or placed orders. 
    • Items-to-item – It displays recommendations based on the product currently viewed by the customer. 
  1. Select one of the Recommendation modes. They are different for the previously mentioned types: 
    • For items-to-user, these are personalized, complementary, bestsellers and popular recommendations. 
    • For items-to-item, these are similar, bestsellers and cross-selling recommendations. 
  1. Check the Show alternative recommendations option if you want to display your banners also to new customers. They do not require behavioral data, i.e., information about user behavior in your store and their purchase history. 
  1. In the following sections specify the maximum number of recommended products to be shown on the banner. Additionally, decide on the number of products in one line and their arrangement in the banner – one below the other or side by side. 
  1. Go to banner styling to set the Margin, Product Card Background Color and Card Frames. 
  1. In the Product card composition section, decide which information about the product will be displayed in the banner: Photo, Name, Sale price (Price after discount), product ID number, Price and Call to action button.

Step 4: Placement

Here you can decide where your recommendation banner will be displayed. CSS selectors are used for this purpose – you will find a short explanation of what they are can in the What is a CSS selector section. [link] 

  1. In the CSS selector section, enter the name, ID or class of the selector that will be the landmark for the recommendation banner. We will place the banner in your online store according to this selector. How do you find a CSS selector on any page? 
  • Open the page where you want to place a recommendation banner in a separate tab. 
  • Hover over the element on the page where you want to place a recommendation banner (above, below or inside the element). 
  • Right-click on the element and select Inspect from the context menu. 
  • A window with the website code will open on the right-hand side of the browser. 
  • You will see the page element you selected highlighted in blue. 
  • Hover over it, right-click and select Copy > Copy selector. 
  • Go to the banner editor and paste the copied text into the CSS Selector section. 
  • Pay attention to whether the ID selector is preceded by a hash and the class selector by a dot. 
  1. In the Placement relative to selector section, select the banner placement relative to the previously selected selector: on your website relative to other elements on it: 
  • First inside the element – The banner will be displayed as the first element in a group of other elements. It may be a permanent module visible in your online store, containing, e.g., text, photos and buttons. The banner will be displayed inside such a module, in front of the elements contained in it. 
  • Last inside the element – The banner will be displayed as the last element within a group of other elements. 
  • Before the element – The banner will be displayed before a single element, e.g., a block of text or a product photo. 
  • After the element – The banner will be displayed just below a single element, e.g., a block of text or a product photo. 
  • Replace the element – The content from the provided selector will be replaced with a banner created in ECDP.
  1. Live test – Insert the address of the page where you want to display the recommendation banner and click Test. Check if the banner you designed is displayed correctly. Remember that the preview will only work on pages where our tracking script has been placed.

What is a CSS selector?

A CSS selector indicates a specific element on a website, e.g., text or a photo, but also entire modules composed of many elements, e.g., menu bar, page footer, module with blog articles, etc. 

Using the selector, you can find the element you are interested in in the website code and give it a unique style, e.g., change its color or size. 

In recommendation banners, the CSS selector is used as a landmark. It indicates in relation to which element on the page you place your recommendations banner, e.g., in relation to the menu bar or a photo of a given product. 

The following selectors are used in recommendation banners: 

  • name – e.g., ‘p’ is an element called ‘paragraph’, ‘h’ is ‘heading’: h1 
  • id – element identifier, e.g., footer; this selector is always preceded by the hash: #footer 
  • class – always preceded by a dot: .yellow

Step 5: Summary

The Summary displays a checklist with the elements necessary to display the banner and their status: 

  • We highlight in green elements which have been entered correctly. 
  • Elements in red require improvement. You can correct them by clicking the pencil icon. Red markings will also appear on the top strip indicating steps that require attention. 
  • We add an orange marking to elements that may work better. If you do not make changes to them, it will not affect the banner display. 

Using the checklist you can quickly check whether the settings you have selected are correct. To change any element, click the pencil icon. 

There are two buttons at the access bar level: 

  • Save and Close – Clicking this button will save the banner as a draft and take you to the banner list in the dashboard. 
  • Activate – Clicking this button will publish the recommendation banner in your online store.
Privacy policy