The components editor of your homepage

Modified on Fri, 16 Aug at 9:25 AM

Components are all the elements that are displayed on your home page. How do you set them up and manage them? We'll explain everything below.


OKAST offers a module for organising and customising the home page of your platform: the Component Editor. Accessible via the menu > PLATFORM > Layout > Home page.



TABLE OF CONTENTS

 

 

Organizing the homepage by device

You can organize this homepage according to the devices on which your platform has been deployed: Web, Android Application, iOs Application.


If you want to manage the layout for different devices in the same way, leave only the web tab.

If you now want to manage the layout across devices independently, you can choose to duplicate the layout of the homepage of another device:

Duplicate homepage by device

If you want to manage the layout by device independently, you can add a device and not check the box “Duplicate an existing page?”

From now on, with this organization by device, when you create a smart component in a device, it will be done independently from the others. You can therefore have a content strategy that is specific to each device on which your platform has been deployed.

 

Managing the homepage

Once your different devices are set up, you can manage from here the organization of the homepage of your platform.

You have the list of the smart components of your homepage with different useful information.

  • The name of the smart component, which will only be visible on the back office side.

  • The smartlist to which the smart component is attached.
    If no smartlist is indicated, it means that the component is attached to a dynamic list.

  • The status of the smart component and/or the smartlist:
  • Green icon means that the smart component and/or the smartlist is active on the homepage.

    Red icon means that the component and/or the smartlist is inactive, therefore not visible on the platform.
  • The image format that the smart component displays (ex: 16:6, 3:4, etc.)

  • The type of display of the smart component: carousel, mosaic, highlightend widget.

  • A icon indicating that the smart component is attached to a dynamic list: My list , Resume Watching, Content recommendation , Purchase end Now.

The order in which the smart components are displayed determines the order in which they are displayed on your homepage. If you want to change the display of a particular smart component, you can simply drag and drop it to reorganize your homepage.
 

The creation of smart components

There are 4 types of smart components: Mosaic, Carousel, Widget and Highlight.

1. Mosaic display the contents one after the other and on as many lines as necessary.


2. Carousel are displayed on a single line and scroll horizontally.


3. Widgets are interactive tools for displaying information, entertainment, articles, links, advertising, games, etc.Dedicated article on setting up widgets.


4. Mise en avant launches a video automatically when the home page is opened.Dedicated article on highlighting.


Carousels and mosaics can be linked to different data sources:

- A 'Standard' or 'Automatic' Smartlist

- Personalised Smartlist 'My list' (linked to users)

- The dynamic 'Resume Reading' Smartlist (linked to users)

- Dynamic Content Recommendation Smartlist (linked to users)

- The dynamic 'Buy' Smartlist (linked to users)

- The dynamic 'Now' smartlist (linked to channels)


1. Mosaic type component
The mosaic component is the simplest to set up.

 

a. Type of Component

  1. Choose a name for your smart component that will be visible only from the back office.

  2. Activate or deactivate the smart component on the storefront.

  3. Choose the image format you want for your smart component. You have 4 different formats:
    - 16/6 “banner” format,
    - 16/9 “thumbnail” format,
    - 3/4 “poster” format,
    - 1/1 “square” format (in the mobile version, the number of visible elements must be 1 or 4 and more for reasons of phone screen ratio)


    For a reminder of the exact dimensions, see our dedicated article.


  4. Display parameters :
    1. Display the Smartlist title above the component.
    2. Display item titles below each item.
    3. Display the dialogue (for more information, see our article on the dialogue option)
    4. Choose the order in which the items in your Smartlist are displayed
      - Random on first load
      - Random on each refresh
      - Alphabetical
      - Newest to oldest
      - Oldest to newest


b. Datasource type


You must then choose a data source on which to base your component. This can be based on :

- Standard' or 'Automatic' Smartlist to choose from a drop-down menu.

- Dynamic Smartlist: 'My list'. See our dedicated article.

- Dynamic Smartlist 'Resume reading'. See our dedicated article.

- Dynamic 'Content recommendation' smartlist

- Dynamic 'Buy' smartlist for your users

- The dynamic 'Now' smartlist. See our dedicated article.


c. Conditional render

You can enable or disable the display conditions of each smart component you set up.

These display conditions are linked to the connection to the platform and to the subscription to the platform:

  • The user is/is not logged in
  • The user has/has not an active subscription

It is possible, within the limits of the possible, to link two conditions, as for example: The user is connected AND The user has not have an active subscription.



2. Carousel component

The Carousel-type component is the most widely used in home shopping platforms.

Each carousel component can be customized according to different parameters:

a. Type of smart component

  • Choose a name for your smart component that will be visible only from the back office.

  • Activate or deactivate the smart component on the storefront.

  • Choose the image format you want for your smart component. You have 4 different formats:
    - 16/6 “banner” format,
    - 16/9 “thumbnail” format,
    - 3/4 “poster” format,
    - 1/1 “square” format (in the mobile version, the number of visible elements must be 1 or 4 and more for reasons of phone screen ratio)


    For a reminder of the exact dimensions, see our dedicated article.



  • Display settings :
    • Display the smartlist title above the smart component.

    • Display the titles of the elements below each of these elements.

    • Display the dialog (for more information,see our article on the dialog option).

    • Enable the circular carousel where the smart component and its elements scroll indefinitely.
    • Enable the automatic scrolling where the elements of the smart component scroll automatically when you browse the homepage.

    • Display the navigation arrows (inside or outside the image) and choose to display the arrows only when hovering over them.

    • Choose the number of items visible and displayed on the home page (between 1 and 10).

    • Choose the order in which the items in your Smartlist are displayed.



b. Datasource type

You must then choose a data source on which to base your component. This can be based on :

- Standard' or 'Automatic' Smartlist to choose from a drop-down menu.

- Dynamic Smartlist: 'My list'. See our dedicated article.

- Dynamic Smartlist 'Resume reading'. See our dedicated article.

- Dynamic 'Content recommendation' smartlist

- Dynamic 'Buy' smartlist for your users

- The dynamic 'Now' smartlist. See our dedicated article. 


c. Conditional render

You can enable or disable the display conditions of each smart component you set up.

These display conditions are linked to the connection to the platform and to the subscription to the platform:

  • The user is/is not logged in
  • The user has/has not an active subscription

It is possible, within the limits of the possible, to link two conditions, as for example: The user is connected AND The user has not have an active subscription.

3. Widget type component

To set up a widget-type component, see our article on setting up widgets. These are interactive tools that display information, entertainment, articles, links, advertising, games, etc.


4. Highlight component


To set up a Highlight component, see our dedicated article on Highlighting. This enables a video to be highlighted automatically when the home page is opened.