How to Set Up Pages
In this guide, you can read and learn about how to set up the product Pages and what is needed to make them work efficiently and effortlessly plus the creation of a page and a design.
For an in-depth introduction to Pages then read this guide here.
For more about API documentation for Pages then check here.
There are three different methods for how to implementing and setting up Pages:
You can read about the different methods in their individual guide.
The following sections relate to the Introduction to Pages guide.
How to Set it Up - New Design
Start off with the creation of a design which will then be used
- 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 Pages to unfold the drop-down menu.
- Next, from the drop-down menu, click on Design.
- Click on the Create button to create a design for your page.
- You can create and customize your own design(s).
- When you create a new design, the design will have pre-filled fields to start off with. You can adjust these with what you find fitting for your webshop.
This video shows step 4 to 5.
- Click on the Save button when you have filled in the needed fields.
How to Set it Up - New Page
- 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 Pages to unfold the drop-down menu.
- Next, from the drop-down menu, click on Overview.
- Click on the Create button to create a new category page.
- Fill in with the category page with a name you find fitting for the purpose.
- Fill in the necessary fields that you identify to be appropriate for your use case.
- Choose between the default design available or choose your own design. This will be explained here on how to do it.
- Click on the Save button when you have filled in the fields you deem to be necessary for your page creation.
This video shows steps 4 to 7.
- At the bottom in the <> HTML & Page Key section, copy the auto-generated HTML code snippet.
Product Overrides
As mentioned in the Introduction to Pages guide, Hello Retail offers the feature of Product Overrides with Pages.
Product Overrides is divided into a Path/URL, Products, and Boosts sections.
To override a page, click on the Add button in the Product Overrides section and specify the URL of the page you need. Then you can manually add and sort the products you want to promote on the page so that the customer can see them first. The rest of the page will contain the other products ordered according to the boosting selected.
Toggling on the 'Only Manual Products' allows you to choose and prioritize only the products you want your customer to see on the page; the rest of the products related to that page will not be visible.
You can choose to override some or all products on a specific Category Page.
The Placement of the HTML Snippet
- Head to the backend of your platform for your webshop.
- Insert the HTML code snippet you copied into the <body> tag.
Note Placement of the code snippet will determine where the Category page will be generated. Paste the HTML code snippet within the <body> tag of your webshop wherever you find suitable for placement.
Our system will then recognize the tag and insert the page at that exact position. If you wish to change the location of the page then you can simply move the div tag to another place in the code.
Reach out to your own developer and have them build the functionality of dynamically adding this div tag with the corresponding data value.
Make sure that you adjust the values in the data that correspond to the chosen filters. The data must correlate exactly to what it is on your webshop. This means all naming conventions must be aligned.
Read the guide and this section here on how to do that.
Single Page Application (SPA)
A single-page application (SPA) is a website or web application that interacts with the user visiting the site. All necessary resources needed for the site will be loaded on the first-page load. It does so by dynamically rewriting the current web page with new data from the webserver.
This means it differs from the way a multiple-page application that uses the default method of a web browser has to load entirely new pages.
Read more about SPAs in the API Documentation here.
Reference: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
Advanced syntax
Pages will also support more advanced syntax by combining filters with AND/OR, as well as nesting filters.
Advanced Examples
Case 1: Show products on a category page from two different hierarchies. E.g. give me all products in Shoes OR Shirts.
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": {$or: [["Shoes"], ["Shirts"]]} }'>
</div>
Another way to write this:
<div id="helloretail-category-page-123456" data-filters='
{ "$or": [
{ "hierarchies": ["Shoes"]},
{ "hierarchies": ["Shirts"]},
] } '>
</div>
Case 2: Show products on a category page where they all belong in two hierarchies. E.g. give me all products in Female AND Shoes.
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": {$and: [["Female"], ["Shoes"]]}
'></div>
another way to do this is the following:
<div id="helloretail-category-page-123456" data-filters='
{
"$and": [
{ "hierarchies": ["Female"]},
{ "hierarchies": ["Shoes"]}
] } '></div>
If the hierarchy has multiple levels it could be presented as:
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": {$and: [["Female","Shoes"], ["Female","Shirts"]]}
'></div>
Case 3: Show products in a specific category that are on sale. E.g. all products in Women AND isOnSale is true.
<div id="helloretail-category-page-123456" data-filters='
{ "hierarchies": ["Women"], "isOnSale": "true"}
'></div>
The same as:
<div id="helloretail-category-page-123456" data-filters='
{"$and": [
{ "hierarchies": ["Women"]},
{ "isOnSale": "true"}
]}'
></div>
When having multiple filters in one object without any explicit AND/OR, it will default to AND - as shown in the first example in case 3.
Case 4: Show all products from two different hierarchies that are also on sale. E.g. all products in Women OR Shoes, but only those that are isOnSale.
<div id="helloretail-category-page-123456" data-filters='
{
"hierarchies":
{ "$or": [["Women"], ["Shoes"]] },
"isOnSale": true
}
'></div>
In the example above there is an implicit AND between the hierarchies and the isOnSale.
Case 5: Show all products that are in (brand “Nike” and isOnSale) or in brand “NoName”
<div id="helloretail-category-page-123456" data-filters='
{
"$or": [
{
"$and":[
{ "brand": "Nike"},
{ "isOnSale": true }
]
}
{ "brand": "NoName"}
]
}'></div>