Template UI Features

This is a breakdown of the Template UI's design and its main features.

Mod Browser

This is the main portal for searching available mods and managing subscriptions and purchases (if applicable). It has been built with scalability and compliance in mind — supporting multiple input devices, resolutions, and aspect ratios across all devices including ultrawide displays and the Steam Deck.

The mod browser’s content is split into 2 sections:

• RECENT and TRENDING for browsing the full set of mods for your game, sorted according to the selected category. These categories can be customized in the Project Settings -> Plugins -> mod.io UI.
• LIBRARY for browsing the current user's subscribed and purchased mods

On each page, use the Search or Filter options to find specific mods or narrow down the number of mods displayed.

note

Marketplace features must be enabled to allow the purchase of premium mods.

The browser’s footer has the Storage Tracker widget to show the total size of all installed mods. It also features the Operation Tracker widget to show the number of mods queued for installation, and the progress of the mod currently being installed. The Operation Tracker will show the downloading and extracting operations in sequence.

 

Mod Tile

The Mod Tile shows the base information of the mod including its thumbnail, name, metrics, and its current state (e.g. subscribed/unsubscribed, downloading, error, installed by another user).

When highlighted it also includes a tooltip button featuring a set of Mod Options. This allows quick access to contextual actions such as subscribing/unsubscribing, enabling/disabling, or reporting the mod.
 

Filter Panel

Filter categories can be check-boxes, where multiple options can be selected; or radio buttons, where only one option can be chosen. Filters can be applied when browsing any of the mod browser pages. Multiple filters can be applied at once to narrow down the list of mods shown; these are grouped into categories which can be expanded or minimized. Navigating away from a page will clear any applied filter settings.

 

Mod View

This page is viewed after clicking on a Mod Tile from the main browser page. It displays detailed information for the selected mod.

Mod name	The name of the mod concatenated to two lines
Creator name	The creator's mod.io username OR the console platform user name (with a platform icon). This name is clickable with the mouse or accessed with a face button on gamepad, and leads to a search of mods created by that user.
Description	A brief mod summary limited to 250 characters. If a longer description is available, Expand Description will be shown. Clicking this button displays a modal with the full description.
Subscribe / Unsubscribe	This will toggle the mod's state between subscribed and unsubscribed, queuing it for installation or uninstallation. If the mod has dependencies, a modal listing these will be presented upon pressing subscribe. This enables users to subscribe to the mod and all its dependencies at the same time. If Marketplace features are enabled, Subscribe will be replaced with Purchase Mod for any premium mods.
Like / Dislike	Mods can be rated with likes or dislikes. The buttons act as a toggle — only one can be active at a time. The ability to dislike a mod can be toggled on or off by checking Enable Mod Downvoting in UI in Project Settings -> Plugins -> mod.io.
Mod Options	This button opens a tooltip with a list of contextual options depending on the mod's current state.
Dependencies	If a mod is dependent on other mods, this button will be available to display a list of dependencies. This list is not interactive — it simply lists the names, size, and subcribed/downloaded state of each mod.
Metrics	The mod's file size, downloads, rating (%), subscribers, version number, release date, and the date it was last updated
Mod State	Indicates whether the mod is installed, queued, downloading (with %), errored, installed by others, or purchased.
Gallery	A set of images for the user to browse.
Category Tags	The tags assigned to this mod. Selecting one will open a unique search based on the tag value.

 

Mod Dependencies

If a mod has dependencies, a list of the required mods can be accessed from the Mod View via the Dependencies button. This modal lists the required mods, their individual and total file size, and installation status.

After pressing Subscribe on a mod with dependencies, the list of required mods will be shown in a confirmation prompt. Pressing OK will subscribe to the mod and all its dependencies.

note

This does not apply to premium mods — only free mods can have dependencies, or be used as dependencies. See Dependency Management for more information.

 

Mod Management

Developers can allow users enable or disable mods they have subscribed to as a way of managing their library. This is separate from unsubscribing — disabling a mod will keep it installed on the user's hard drive, but make it inactive in their game. Check Enable Mod Enable/Disable support widgets in UI in Project Settings -> Plugins -> mod.io to toggle the visibility of the relevant widgets for this feature.

The mod's enable/disable state can be toggled via the Mod Options menu of the Mod Tile or Mod View. The mod's installation status icon will be updated accordingly as either Installed or Disabled.

If Marketplace features are enabled, the mod's state indicator for a purchased mod will show:

• Subscribed and Enabled = "Installed"
• Subscribed and Disabled = "Disabled"
• Unsubscribed = "Purchased"
   

Reporting

The reporting modal can be accessed via the Mod Options tooltip on the Mod Tile and Mod View. It features:

• Mod name
• The mod version number
• Mod thumbnail
• Report reason list (Generic, Not Working, Illegal Content, False Information, DCMA, Rude Content, Stolen Content, Other)

Selecting any of the report reasons opens a reporting details modal, where a user can describe the issue further and submit their report. The details are a required field, so the Submit button will remain disabled until any text has been typed into the field.
 

Keyboard & Mouse Inputs

The Template UI has been designed with a "console first" mentality, ensuring all interactions and UX flows work well on gamepad, and then expanding them to suit keyboard & mouse interactions.

When any gamepad or keyboard & mouse input is detected, the UI will swap its key bindings and add or remove layout elements to suit the current platform. For example, modals having a clickable close button when using keyboard & mouse, or actions being assigned to a gamepad's face button rather than a UI button.

 

Marketplace features

If you have Marketplace features enabled for your game, check Enable Monetization widgets in UI in Project Settings -> Plugins -> mod.io. The Template UI will automatically toggle on the relevant UI elements and modify the user flows to accommodate the addition of the Marketplace features.

Mod Tokens & Premium Mods

The main change Marketplace brings to the mod browser is the addition of Mod Tokens. This is a currency unique to each game, and as such should be represented by an icon and name unique to your game.

The user's total tokens are shown in the Token Wallet in the mod browser's header, and will be visible on any screen that relates to browsing or purchasing Mods. Any premium mods listed in the browser will adjust the standard Mod Tile layout to add the token price or Purchased tag.

Any mods that are purchased can be found in the library page, where new options will be available to let the user filter between All Mods, Installed, or Purchased.

Mod View & Purchasing Mods

On the Mod View screen, premium mods will always be identified by a premium tag in the top right of the gallery image. Any mods not yet purchased will have their Subscribe/Unsubscribe button replaced with a Purchase Mod button showing its cost.

Pressing Purchase Mod will show a confirmation modal, displaying the mod's details and its price. If the user has insufficient tokens to purchase the mod, the modal will communicate this and block the purchase.

Successfully purchasing a mod also subscribes the user in the same action. Once a user owns a premium mod, the Purchase Mod is replaced with the Unsubscribe/Subscribe toggle again. Once purchased, a mod will stay in the user's library whether it is subscribed or not. Any purchased mods can be found in the Library page.

When prompted to buy more Tokens on PlayStation, Switch or Steam, the Template UI will call on the native platform marketplace UI to handle all token purchases. However, when prompted to buy tokens on Xbox & Oculus platforms, an internal modal will be used to list available token packs.

All token pack purchases will sync with the user's account and update their total tokens immediately.