UI Customizations

Overview

This guide explains how to customize the look and behaviour of your Harbr marketplace using the Ecosystem Settings panel. To access UI customizations:

1. Navigate to Ecosystem Settings in the admin panel

2. Find the Branding and Exchange section in the sidebar

3. Select the area you want to customize:

   • Exchange (main product browse page)

   • Product page (individual product details)

   • Collection (user's subscribed products)

   • Footer

The Exchange

The Exchange is your main marketplace page where users browse and discover products.

Display Controls

Configure the default viewing experience.

a. Grid View

Customize how products appear in the grid/card view.

b. List View

Customize how products appear in the list view.

Categories Panel

Control the sidebar that shows product categories and tags.

For more information on configuring the Exchange and Product cards using templates, see here for the dedicated section - The Exchange

Featured Products

If you have a homepage with featured products, these settings control their appearance.

For more information on configuring your Homepage, see here Homepages

Product Pages

Control how individual product detail pages appear. As explained below, value templates can also be used in the Product Page sidebar for displaying metadata. When a metadata field has a registered template, that template is used instead of the default rendering for that field's display type.

Metadata Display

For each metadata field, you can configure:

Details to Display

There are numerous aspects you can include to the product page.

Asset View

Related Products

Configure the Related Products section shown on product pages.

Advanced: Template Editor

There is an option for more advanced users to include a template input to further customize the page presentation. Value templates let you customize how individual metadata fields are rendered using Liquid templates. This is useful when you need more control than the built-in display types provide.

To Register a Value Template:

1. Navigate to the Product Page on Eco Admin settings under ‘Product Presentation templates’

2. Click + Register a new template

3. Enter the Path (metadata field identifier) and click Next

4. Write your Liquid template and preview the output

5. Click Save

Note: Currently, only Liquid templates are supported. Liquid is a simple templating language that lets you insert dynamic values and add conditional logic.

Understanding the Path Field:

The Path is the metadata field's key/identifier - not a file path or URL. It tells the system which metadata field should use this template.
Path Examples - What it Targets

• The data classification field: XXClassification

• The data owner field : dataOwner

• The refresh frequency field: refreshFrequency

Your template receives the field's value in the value variable and the metadata field's value (string)

To find your metadata field keys, see Finding Your Packaging Metadata Keys.

Example Templates

Color-coded classification badge:

{% if value == 'Confidential' %}
  <span style="color: #d32f2f; font-weight: bold;">{{ value }}</span>
{% elsif value == 'Internal' %}
  <span style="color: #f57c00;">{{ value }}</span>
{% else %}
  <span style="color: #388e3c;">{{ value }}</span>
{% endif %}

Clickable email link:

<a href="mailto:{{ value }}">{{ value }}</a>

Value with icon:

<span>📅 {{ value }}</span>

My Collection

The Collection page shows users the products they are subscribed to.

Page Header

Controls

Platform Footer

A configurable Footer section is available for Ecosystem Administrators to enable and configure the Footer component that is shown at the bottom of the platform for all pages. The footer can be enabled or disabled at any time and the setting applies to all users in the platform. 

We recommend previewing the footer to ensure that the content is visible and usable. If configured, the footer will be displayed at the bottom of every page across the platform.

The footer has three sections arranged left to right:

Logo/Image (Left)

Links (Center)

Text (Right)

You can use {{YYYY}} to automatically insert the current year.