Setting Up Product Recommendations

In this guide, you can read and learn about product recommendations. It also includes an introduction of how to set it up, creating the recommendation box and designs.

What is Product Recommendations

Product recommendations from Hello Retail are a way to increase order size and conversion rate by displaying relevant products as your customers browse your store.

Product recommendations from Hello Retail is a very flexible system that can be used in many ways. Here are a few examples of how product recommendations can be used.

When viewing a product then show a list of alternatives to the current product. This will increase the conversion rate by making sure that the customer can find what they are looking for.
After a product has been added to the cart or at the beginning of a checkout flow then show a list of accessories to the current product. This will increase the cart size by giving the customer an easy way to add relevant products to the cart.
Show a list of products from categories the customer has shown interest in on a previous visit. This will increase the conversion rate by personalizing the front page to the customer.

Product recommendations can be configured to look any way you want and can be configured with a range of different recommendation strategies.

The recommendation strategy is the way Hello Retail chooses what products to recommend in a specific place in your shop.

How to Set Up Product Recommendations

Product recommendations are set up by logging into your Hello Retail account. Once logged in, you navigate to the shop you want to configure recommendations for.

When the shop is selected, you navigate to the Recommendations section and the subsection Overview.

From here you can see your current product recommendations and you can create new

A Word About Drafts

The following sections will describe how to set up and edit product recommendations.

Before starting it is important to know that while you are making changes to a recommendation box these changes will only be visible to you. So nothing will be shown to your customers before you are ready. When you start creating a recommendation box or once you start modifying an existing recommendation box, the system will create a "Draft" version of the box. The changes made in this draft can be viewed by you directly on your shop when you are logged into Hello Retail. Because your customers are not logged into Hello Retail they will not see any new recommendations that are still Drafts, and they will not see any changes made to existing recommendations while they are still Drafts. Once you are happy with the changes you can publish your changes and make them visible to everyone.

Create a Recommendation Box

Product recommendations are created from the Product recommendations section of the Hello Retail dashboard. There you will see a list of current product recommendations and you will find a button to create a new one. When creating or editing a product recommendation box a range of options is available.

General Settings

The general settings contains the following elements:

Product Box Key - The ID of the recommendation box.
Number of products - The number of products you want to load. The number of products displayed in the product recommendation is decided by the design template. So if a design template with a slider shows 4, and you set "Number of products" to 8, you would be able to slide from product 5 to 8.
Show - Do you want this recommendation box shown on both mobile & desktop.

Design Settings

Here you choose what design you would like for the recommendation box. For more details see the section Design later in this help article.

Recommendation Strategy

This section is used to configure what products to recommend. It is possible to choose from a list of recommendation strategies. The recommendation strategies can be further customized. Please contact Hello Retail support for help with this.

Placement Selector

A CSS selector used to find the DOM element on the website where the product recommendation box should be injected. E.g. a selector like div#main would inject the product recommendations on pages where a div with the id main can be found

Analytics Events

If this option is enabled Hello Retail will try to find any Google Analytics integration on the page and use that to send events to Google Analytics every time this product recommendation is shown and every time it is clicked.

Designs

Designs are the templates that are used to render the products found using the recommendation strategy as HTML. This HTML is what is injected into the website. A design consists of a liquid template that generates HTML markup, and a CSS style sheet that can be used to style the generated markup.

Note The CSS will be injected into the page along with the rendered product recommendations, so the styling rules will also affect any other content on the page. So make sure that the CSS rules are written in a way that only affects the product recommendation.

The designs are associated with a single customer account. This means that the same design can be used to render multiple product recommendations on any of the websites associated with the account. The advantage of this is that if the design needs to be modified it only has to be done in one place.

Since designs for product recommendations will often be reused across multiple product recommendations a special liquid tag as been created that allows injecting content into the design based on what product recommendation box is being rendered. A typical example would be to have the headline above the list of products depend on the recommendation box.

This can be achieved by using the input tag like this:

<h1>{% input headline %}</h1>
<ul>
{% for product in products %}
    <li><a href="{{ product.url }}">{{ product.title }}</a></li>
{% endfor %}
</ul>

When a template with content like the above is selected, an input field for the headline will automatically appear on the recommendation box. This makes it possible to, for instance, have a product recommendation box on the front page with the headline "Most popular products" and a recommendation box on the product page with the headline "Great alternatives" both using the same template.

If one of the input variables is optional it is possible to use the input tag in block mode.

<h1>{% input headline %}</h1>
{% input subheadline %}
    <h2>{{ subheadline }}</h2>
{% endinput %}
<ul>
{% for product in products %}
    <li><a href="{{ product.url }}">{{ product.title }}</a></li>
{% endfor %}
</ul>

In this example the interface will give the option to set values for both headline and subheadline. When rendering the content, if no value is set for the subheadline the entire input block for that variable will not be rendered.

Note Inside the "subheadline" block the "subheadline" is a normal variable.

Making Changes to Designs

When a design is changed it affects all product recommendations that are using it. When a change is made, all product recommendations that are using the design will be modified to use the updated version. The changes made to the product recommendations are not immediately made visible to the customers of the webshop. Instead, the product recommendations will have pending changes. When logged in to the Hello Retail dashboard you can preview the changes. Once you have verified that the changes are correct the changes can be published for each of the product recommendations.

Tip: When editing the design you can see a list of product recommendations that are using the design. From here you can also easily publish changes for the product recommendations in one central place.

How to Find the Product Box Key ID

Each product recommendation box has its' own unique product box key ID.

Start by logging into your Hello Retail account. On the dashboard view, navigate to the left-hand side menu. Under the On-Site section, click on Recommendations to unfold the drop-down menu.
Next, from the drop-down menu, click on Overview.
Go into your desired product recommendation box.
Inside the product recommendation box, unfold the drop-down menu for the General section to see the ID.

It is usually a string of approximately 25 characters containing both numbers and characters. You can copy and paste this ID.