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 recommendation boxes to appear on your site.
What is a <div> Element?
A <div> tag defines a division or a section on a website or in a HTML document.
Quite often, a <div> element is used as a container for other HTML elements. This makes it possible to style them with CSS and this is also used to do certain tasks using Javascript.
Why Use a <div> Element?
Hello Retail uses 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:
<div></div>
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 be shown.
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 wherever you want them to appear.
Steps on How to Set It Up
- 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.
- From Recommendations view page, click on the recommendation box of what page that you wish to edit.
- From here, you can scroll down to the Placement settings section and unfold it.
You will see the automatically assigned div tag that you can copy and insert in the HTML code of your website where you find appropriately.
Our system will then recognize the tag and insert the product recommendations at that exact position.
- Each individual product recommendation box that you have from the overview list will have its' own unique div ID. They are all placed individually under the placement settings section as described from above.
You can place them as you find fitting in the code where you want them to appear. When they are ready, you'll be able to review them directly on your site at 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. You can test it out and make sure to check that it still looks good.