Introduction to Pages

Introduction to Pages

In this guide, you can read and learn about the product Pages. It will include an introduction to the product, a brief about the methods to set it up, and an explanation of why it can be a good fit for your webshop.


About Pages

Pages is a product that allows for less work and maintenance as a shop owner as it provides the option of letting Hello Retail help and easily generates the setup of your category pages on your webshop.

This is done by getting an autogenerated <div> code snippet copied from the Hello Retail Dashboard that needs to be put into the <body> tag on your webshop by your developer. After the <div> tag has been placed, the only thing needed from you is to fill out the data attributes and reach out to your own developer so they can build the functionality of dynamically adding this <div> tag with the corresponding data value.

This product allows for more control and for the ability to sort and filter your distinct needs, plans, and strategy.


Why should I use Pages?

With this product, it is possible to push for a more personalized experience for the visitors of your webshop.

At the same time, this means a higher conversion rate, reducing time spent on sorting and filtering while also getting a more dynamic experience instead of a static view of products within categories.

One of the key components of Pages is the feature Product Overrides. You can read more about it here and here.

This works for both the desktop and mobile experience of your webshop.

 


Requirements & Prerequisites

There are three different methods for how to implementing and setting up Pages:

Summary of the methods:

  1. Client-Side Integration, where the page is fetched and injected into a customer-provided div by the Hello Retail JavaScript.

  2. API Integration (HTML Response), where the initial page content is fetched and injected into the page by custom code on the webshop backend.

  3. API Integration (JSON Response), where JSON data is fetched from the Hello Retail backend, and the page UI is built from the ground up.

The three methods have their own advantages and disadvantages and require an increasing amount of work, and flexibility.

The three methods will be described in detail in each guide.

Each section will also contain an example of how an integration of that type could be implemented.


Creation of Pages

If you use Shopify for your webshop, you can read how to set up your Pages here.

Product Conditions

This section allows you to specify the products that you would like to have shown on page creation based on the filters you choose from the Field input and Value input. 

You can also toggle whether you would like to include out-of-stock products as well on this page.

Product Order

In this section, it is possible to adjust and manually configure the products you wish to be visible and the order of them.

Boosts

With boosting, you can automatically change the order of the products shown to your customer. Boosts are a good idea when you want to prioritize some products by specific criteria, like brand, availability, whether a product is on sale, etc. For instance, products currently on sale are more likely to be bought, so you’d probably like them to be on top of the page. Just select the category needed in the Field box, set the Value (either true or false), adjust the extent of boosting with the slider bar (you can use it to promote a product or vice versa), and click on Add Boost. If you need another boost, take the steps above once again. You can also click on the Delete button if you don’t need a boost anymore.

Note that normally, the number of boosts should not exceed 3 or 4, as this can significantly distort the order of products shown on the page.

Personalized Boosts

Personalized boosting allows you to automatically promote products that are most likely to align with each individual customer. This feature rests on the preferences we automatically detect for each user. For example, if you boost on brands, we will automatically promote the results based on the brands preferred by a user. You can adjust the extent of boosting using the slider bar. As with the Boosts section, you can delete personalized boosts by clicking on the Delete button.

Applying personalization to specific fields can take up to 1 minute to come into effect.

Product Overrides

Product Overrides allow you to modify and expand the overall strategy configured for any of your Category pages by reordering the products shown on that page. Product Overrides is a feature that aims to help you promote any particular product(s) you want by placing them at the top of a page. 

You can choose to override some or all products on a specific Category Page.

Design

In this section, you can choose the Design you wish to apply to your Category page.

<> HTML

A section of the HTML snippet will be prompted once you have saved the creation of your new category page. This is where the HTML code snippet will be generated along with the API Key.

This is the code snippet you will need to copy and paste into the <body> of your webshop and adjust for data. 

For examples of this, check this section here


Creation of Design

Filters & Sorting

This feature makes it possible to sort and filter the products displayed on the page based on the client's interests and, therefore, save their time browsing and finding what they need.
You can toggle on the Filtering and Sorting options, add specific product filtering and sorting criteria on the page and drag and drop between them, changing their order.
Filtering and sorting facilitate the customization and tailoring exactly after your needs and what works best for your strategy and priorities.

Design

In this section, you can add and arrange the elements you want to be available on the page, choose the number of products per row both for desktop and mobile versions of the page, adjust the size of elements on the page as well as specify titles and apply colours to the page elements.

You can choose a Default design or create your own. There is a possibility to utilize the fields or do more advanced styling within the Javascript, HTML, and CSS tabs.

Like Follow
  • 2 wk agoLast active
  • 3Replies
  • 633Views
  • 4 Following