Goal

Your home screen is a stack of sections you choose and order yourself — a search box, a category filter bar, featured listings, a map, banners, and more. Build that stack here, then fine-tune how the rows inside your lists render with the Layout Manager.

MAM Suite gives you two tools for this, and it’s worth knowing which does what:

• The home-screen stack builder (“Home Screen Content”) is where you build the home screen itself — add sections, drag them into order, and configure each one. This is the tool you’ll spend most of this article in.
• The Layout Manager (“List Layout”) controls how a single list row looks — which fields show, their colors and font sizes, whether a thumbnail appears, and more. It applies to list-type sections and list-type nav buttons, not to the home screen as a whole.

Think of it this way: the stack builder decides what appears on your home screen and in what order; the Layout Manager decides how the rows inside a list look.

Prerequisites

• A MAM Suite app with MAM Main active.
• Admin access to Mobile App Manager in WordPress.
• At least one source of content for the sections you plan to add (for example, listing categories for a Category Filter Bar, or featured listings for a featured section).
• If you intend to add a Geofilters section, location-aware content and the Geofilters feature configured for your app.

One thing to know going in: the home-screen stack is set per MAM role. If your app shows different home screens to different audiences, pick the right role before you start editing — the default is All users (mam-all).

Steps

1. Open the Home Screen Content builder

Start where the stack lives. In WordPress admin, go to Mobile App Manager and open the home-screen content area (the “Home Screen Content” / home-screen stack builder). If your app is role-aware, confirm the role selector is set to the audience you want to edit before you make any changes.

You’ll see the current stack laid out: a vertical list of section cards on the left, each one a section that renders on the home screen, top to bottom.

2. Add a section

Adding a section is how you introduce something new to the home screen — a search box, a banner, a map, whatever you need next. At the bottom of the section list, choose a section type from the Add section dropdown and click Add, and a new section card appears in the stack. Your options include, among others:

• Listing Search — the search box.
• Category Filter Bar — category chips for filtering (single row, multiple rows, or off).
• Geofilters — a location/nearby filter, with an optional label and prefix text.
• Image Section — a banner image with a chosen width and alignment.
• Label Section — a styled text heading.
• Spacer Section — vertical whitespace, sized in pixels or as a percent of screen height.
• Map Section, Collection View Section, Tagged Navigation, Tag Cloud, Special Offers, Listing Table, Radius Selector, Date and Time Filter, Bottom Tab Bar, and several config-driven sections (buttons, scrollers, profile/check-in widgets, and so on).

Add whatever sections your home screen needs. A common starting layout is Listing Search → Category Filter Bar → a featured/collection section.

3. Order the sections

Dragging a card is how you set its place in line. Each section card has a sort handle (the arrow control on the right of the card) — drag cards up and down to set the order they appear on the home screen. The top card renders first; the bottom card renders last.

A few sections play by their own rules no matter where you drop them: the search bar, the category filter bar, Geofilters, and the tag cloud are pinned to the top automatically when present, so they stay anchored above the scrolling content. Geofilters also has its own Pin to Top checkbox in its section settings.

4. Configure each section

Every section type has its own knobs to turn. Open a section card to set its options — the fields differ by type, for example:

• Category Filter Bar: choose Multiple Row, Single Row, or No chips, and set a background color.
• Label Section: enter the text, then set justification (left/center/right), font style (normal/bold/italics), font color, and font size.
• Image Section: upload the image, choose the width (10–100%), and set alignment.
• Spacer Section: choose the height type (pixels or percent of screen height) and the height value.
• Geofilters: optionally display as a label, set the label color, and provide Prefix and Nearby Prefix text.

When you’re not sure, leave the defaults — most sections render sensibly with no extra configuration needed.

5. Tune list rows with the Layout Manager

Any section that shows a list of items — plus list-type nav buttons elsewhere in the app — draws each row using a List Layout. To change how those rows look, open the Layout Manager (“List Layout”) for the relevant button or list.

From there you can:

• Pick a List Layout preset from the List Layout dropdown.
• Map up to several row positions (Field 1 through Field 5, plus a Top Right slot) to your content fields, choosing the field key, text color, font size, and bold for each.
• Toggle row options such as Show Image, Is Square Image, Show Distance, No Left Spacing, variable row height (Var Height Layout) with an explicit Layout Height, Hide Marker, and a row Background Color.
• Set the row Content Type (for example, default versus a web view).

Field keys are case-sensitive and come from the content class — the data structure that defines your listings’ fields — so use the dropdown rather than typing keys by hand. Save the Layout Manager form when you’re done.

6. Save and preview

Save the stack builder, then see it live: open the app (or your preview build) and pull the home screen down to confirm the section order, pinned bars, and row styling all look the way you intended. Adjust and re-save as needed.

How it renders in the app

Curious what’s happening under the hood? When the app requests its data, MAM Main walks your saved sections in order and emits a homescreen_stack list in the app’s payload — the bundle of data your app downloads from your site. A navigation header goes in first, and pinned sections (search, filter bar, Geofilters, tag cloud) are flagged so the app knows to keep them at the top. Each section card you configured becomes one entry in that stack, carrying the options you set — a Label Section, for example, becomes a text entry carrying your text, alignment, size, and color, while an Image Section becomes an image entry with the URL and aspect ratio computed from the uploaded file.

Add a Bottom Tab Bar section and the home screen switches into tab-bar mode for the app too.

None of this is anything you need to memorize to build a layout — it’s here so you can reason about what each section will produce.

Tips and gotchas

• Role matters. Edits apply only to the role you’ve selected. If a change doesn’t show up for a given user, double-check you edited the right role.
• Pinned bars stay put. If a search or filter bar seems to ignore where you dragged it, that’s expected — pinned sections always anchor to the top.
• Empty stack = no custom home. Remove every section and the app doesn’t render an empty screen — it falls back to its normal, non-stack home behavior.
• Layout Manager is per-list, not per-screen. Changing a List Layout affects how rows render everywhere that list or button is used; it won’t move anything on the home screen itself.

Related

• Home Screen Content (app setting home_screen_stack) — the underlying builder this article drives.
• Geofilters — configuring the location filter you can add as a section.
• Use tabs for the home page (app setting use_tabs_for_homepage) — what the Bottom Tab Bar section turns on.

What’s next

With your section order set, it’s time to refine the pieces: style the category chips and search bar, pick a featured/collection layout, and use the Layout Manager to make your list rows match your brand. Then build and preview the app to see the whole home screen come together end to end.