Outcome
You will apply a consistent, readable visual system to both the inventory hub and individual property pages.
Navigation path
Listing Hub > Appearance
Access
Company-level appearance controls require management permission. Available themes can vary by account.
On this page
What you will accomplish
Short animated UI capture. No audio.
Goals
- Choose a hub theme
- Choose or match the property-detail theme
- Test saved presentation with representative content
Before you start
Data, sources, and access to prepare
- At least one representative listed property
- Approved company colors
- Company-management permission
Prepare these details
- Choose a listed property with realistic images and long text for testing
- Record approved primary and secondary colors
- Decide whether property pages should match the hub or use another theme
- Choose the preferred default inventory view
Complete the task
- 1
Open Appearance
Listing Hub
Select Appearance.
Expected result: The hub-theme and property-page controls load.
If this does not happen: Ask an Admin when company settings are hidden.
- 2
Choose the hub theme
Appearance > Listing Hub theme
Select one theme card.
Expected result: The selected state moves to that hub theme.
If this does not happen: Open its full preview before keeping a theme based only on the thumbnail.
- 3
Choose the detail behavior
Appearance > Property page theme
Select Match Listing Hub or one separate detail theme.
Expected result: The property-page selection is visible.
If this does not happen: Use Match Listing Hub when one consistent visual system is preferred.
- 4
Choose the color system
Appearance > colors
Select one approved palette or custom color setting.
Expected result: The preview reflects the selected colors.
If this does not happen: Restore theme defaults if custom colors reduce contrast.
- 5
Set the default view
Appearance > inventory view
Select one available default inventory view.
Expected result: The public hub opens in that view for new visitors.
If this does not happen: Choose the simpler view when inventory cards become too dense.
- 6
Wait for Saved
Appearance header
Wait for the save state to report Saved.
Expected result: The selected appearance is stored.
If this does not happen: Use Try again only after a Save failed state appears.
- 7
Preview the public hub
Appearance > Preview
Open the Listing Hub preview.
Expected result: The public inventory renders with the selected presentation.
If this does not happen: Test with representative listed inventory when sample content does not expose real edge cases.
- 8
Preview one property page
Appearance > Preview
Open one property-detail preview.
Expected result: The property content renders with the selected presentation.
If this does not happen: Choose a listed property with long text and varied media when the first preview is too simple.
Surface responsibilities
| Surface | Primary purpose | Test content |
|---|---|---|
| Listing Hub | Browse and compare public inventory | Several property types, statuses, and image shapes |
| Property page | Understand and inquire about one property | Long title, facts, galleries, maps, contact and access areas |
| Embedded hub | Browse inside another website container | Mobile and narrow container widths |
Verify before you finish
- Hub and detail themes are intentional
- Colors meet company and contrast standards
- Default view works for the inventory
- Save state reports Saved
- Actual public pages were tested at desktop and mobile widths
Troubleshooting and next steps
A theme selection does not persist.
Likely cause: The appearance save may have failed or still be pending.
- Read the save state.
- Select Try again only after a failure.
- Confirm Saved before leaving.
The theme looks different on a real listing.
Likely cause: Real content length and image proportions differ from the preview card.
- Open the live property preview.
- Choose a theme or content treatment that handles the representative listing.
Final verification
- Appearance > inventory view: The public hub opens in that view for new visitors.
- Appearance header: The selected appearance is stored.
- Appearance > Preview: The public inventory renders with the selected presentation.
- Appearance > Preview: The property content renders with the selected presentation.
- No blocking warning, failed status, or unresolved validation message remains in the completed workflow.