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
• Managing the homepage
• The creation of smart components
  • 1. Mosaic type componentThe mosaic component is the simplest to set up.
    • a. Type of Component
    • b. Datasource type
    • c. Conditional render
  • 2. Carousel component
    • a. Type of smart component
    • b. Datasource type
    • c. Conditional render
  • 3. Widget type componentTo set up a widget component, see our dedicated article on setting up widgets.
  • 4. Highlight component

On your back office, go to Platform > Layout > Homepage: from there you can manage the layout of your platform’s homepage.

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:

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 possible icon indicating that the smart component is attached to a dynamic list: My list , Resume Watching, Content recommendation , Purchase .

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. Widget.

4. Highlighting a video, audio or text component at the top of the home page.

The Carousels and Mosaics can be linked to different data sources: another smartlist, the “my list” component, the “resume reading” component, the content recommendation algorithm.

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 :

- Smartlist (which you choose from a drop-down menu)

- My list (dynamic lists) see our dedicated article.

- Resume reading (dynamic lists) see our dedicated article.

- Content recommendation (dynamic lists)
- Buying your users (dynamic lists)

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 :

- Smartlist (which you choose from a drop-down menu)

- My list (dynamic lists) see our dedicated article.

- Resume reading (dynamic lists) see our dedicated article.

- Content recommendation (dynamic lists)

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 component, see our dedicated article on setting up widgets.

4. Highlight component

To set up the Highlight component, see our dedicated article on Highlighting.