Docs
Author:
Matt Salmon
Changed on:
24 July 2024
Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.
Customise your app manifest
`fc.mystique.manifest.<web-app-name>`. Here is an example of how to add a customised OMS manifest:
Build out the custom help menu component`ComponentRegistry.register(['custom.helpMenu'], HelpMenu, { category: 'content' });`Next we will add the header field into our root level manifest`header` field at the root level in the manifest. Multiple components can be added within the `desktop` and `mobile` fields. Here is an example of the `header` configuration:There is no limit to the number of components that can be added, so screen size should be taken into account. Adding too many components may overrun onto adjacent components.Now we will configure the position of the help menu`position` field. Alignment options include 'left', 'right', 'center', or 'centre'. The `position` field is not mandatory; if it is missing or contains an invalid option, the default alignment is 'left'.Finally we will add the component configuration`HelpMenu` component from the previous steps to the configuration. Because we want the help menu to be available on both desktop and mobile we add the configuration to both.Results
And on mobile devices it will look like this: 
Help menu animation:
1import { Box, IconButton, Link, Tooltip, Typography, useTheme } from '@material-ui/core';
2import { MdHelpOutline } from 'react-icons/md';
3
4export const HelpMenu = () => {
5 const { spacing } = useTheme();
6 return (
7 <Tooltip
8 arrow
9 interactive
10 title={
11 <Box css={{ padding: spacing(2) }}>
12 <Typography variant="body2">
13 For Store documentation click{' '}
14 <Link target="_blank" href="https://docs.fluentcommerce.com/essential-knowledge/stores">
15 here
16 </Link>
17 </Typography>
18 </Box>
19 }
20 >
21 <IconButton>
22 <MdHelpOutline color="white" />
23 </IconButton>
24 </Tooltip>
25 );
26};
271{
2 "manifestVersion": "2.0",
3 "name": "store",
4 "title": "Fluent Store",
5 "orchestrationAlias": "servicepoint",
6 "homePath": "waves",
7 "header": {
8 "desktop": [
9 {
10 "position": "right",
11 "component": "custom.helpMenu"
12 }
13 ],
14 "mobile": [
15 {
16 "position": "right",
17 "component": "custom.helpMenu"
18 }
19 ]
20 },
21 "plugins": [
22 {
23 "type": "url",
24 "src": "/_plugins/store"
25 },
26 {
27 "type": "url",
28 "src": "/_plugins/returns"
29 }
30 ],
31 "context": {
32 "level": "location",
33 "role": [
34 "STORE_ASSISTANT",
35 "STORE"
36 ]
37 },
38 "routes": [
39 {
40 "type": "reference",
41 "settingName": "fc.mystique.manifest.store.fragment.waves"
42 },
43 {
44 "type": "reference",
45 "settingName": "fc.mystique.manifest.store.fragment.orders.awaitingpick"
46 },
47 {
48 "type": "reference",
49 "settingName": "fc.mystique.manifest.store.fragment.waves.inprogress"
50 },
51 {
52 "type": "reference",
53 "settingName": "fc.mystique.manifest.store.fragment.waves.complete"
54 },
55 {
56 "type": "reference",
57 "settingName": "fc.mystique.manifest.store.fragment.arrivals"
58 },
59 {
60 "type": "reference",
61 "settingName": "fc.mystique.manifest.store.fragment.customer.collections"
62 },
63 {
64 "type": "reference",
65 "settingName": "fc.mystique.manifest.store.fragment.carrier.collections"
66 },
67 {
68 "type": "reference",
69 "settingName": "fc.mystique.manifest.store.fragment.uncollected"
70 },
71 {
72 "type": "reference",
73 "settingName": "fc.mystique.manifest.store.fragment.returns"
74 }
75 ]
76}1 "header": {
2 "desktop": [
3 {
4 "position": "right",
5 // other MystiqueComponentInstance properties
6 }
7 ],
8 "mobile": [
9 {
10 "position": "right",
11 // other MystiqueComponentInstance properties
12 }
13 ]
14 },1 "header": {
2 "desktop": [
3 {
4 "position": "right",
5 "component": "custom.helpMenu"
6 }
7 ],
8 "mobile": [
9 {
10 "position": "right",
11 "component": "custom.helpMenu"
12 }
13 ]
14 },