How to add Product Recommendations to your webshop

How to add Product Recommendations to your webshop

Preparing your shop for recommendations

The Hello Retail product recommendations can display relevant products on any kind of page on your shop. The exact location on a page depends on the placement of a so-called "div" that Hello Retail uses as a target for the product recommendations. Therefore you will need to edit the HTML on your shop and input the "div" at the location you wish for the recommendations to appear.

What is a <div> element?

A <div> tag defines a division or a section in on a website or in a HTML document.  

Often, a <div> element is used as a container for other HTML elements, so it's possible to style them with CSS and it is also used to do certain tasks using Javascript.  

Why use a <div> element?

We at Hello Retail can use these tags for placements of our product recommendations. E.g. let's say you want our product recommendations in a specific place on your site. Then you can add a <div> to help us locate the specific location placement for the product recommendations.

A div tag looks like this:


Now we have a completely empty <div> tag. By adding an ID, you can make it easier for us at Hello Retail to target, where on your webshop or website you want our product recommendations to show. 

Find <div> tags for your product recommendation boxes

If you have already created product recommendation boxes or are creating new ones, you can find automatically assigned div tags making it easy for our system to place the correct boxes where ever you want them to appear.

  1. Find the relevant product recommendation box under Recommendations -> Recommendations  on your Hello Retail account:
  2. Go to Placement settings. Here you will find the automatically assigned div tag that you can copy and insert in the HTML code of your website in a place you find appropriate. Our system will then recognize the tag and insert the product recommendations at that position.
  3. Each individual product recommendation box that you have will have it's own unique div ID. You find each of them as shown above and then place them in the code where you want them to appear. When they are ready you'll be able to review them directly on your site in the location that you have chosen.

If you wish to change the location of the product recommendation, you simply move the div to another place in the code. The product recommendations will follow. Make sure to check that it still looks great.

Like Follow
  • 10 mths agoLast active
  • 755Views
  • 1 Following