Per-feature styling with the Scope dropdown

Beyond the global foundations, each feature of your app has its own look: how feed posts are carded, how products are displayed, how courses are laid out. All of it is edited in one place, the Scope dropdown at the top of the Style Manager's Styles tab.

One place, on purpose

Style controls live here, in the Style Manager, and not on the feature pages. The Feed, Storefront, Courses and Content Pages sections of your dashboard manage content, posts, products, lessons and pages, while their appearance is designed in the Style Manager next to the live phone preview. If you are hunting for a "styles" tab on a feature page, this is where it moved.

Switching scope also switches the preview to the right screen automatically, pick Storefront and the phone shows your shop.

Feed scope

Three sections control your community's look:

• Feed Cards, the cards each post sits in: corner radius, spacing and framing. Profile screens inherit the same card style, so the app stays coherent.
• Like Icon, the icon members tap to react to a post.
• Spaces List, how your list of community spaces is presented.

Storefront scope

• Product Cards, the product tiles in your shop grid.
• Sale Badge, the badge shown on discounted products.
• Product Page, the layout of the individual product screen.

Courses scope

• Course Style, how your course experience is presented and laid out.

Content scope

• Content Cards, the card style for your content pages and posts.

Loyalty scope

• Loyalty Card, the rewards card showing a member's points balance.
• Rewards Layout, how the list of redeemable rewards is arranged.

Only enabled features appear

The Scope dropdown lists a feature only when it is enabled for your app. If you do not see, say, Loyalty in the list, the loyalty feature is switched off, enable it at Manage Features and the scope appears.

The workflow

1. Open the Style Manager, Styles tab.
2. Pick a feature in the Scope dropdown.
3. Open a section and adjust, the phone preview updates live as you drag sliders and pick colours.
4. Flick the preview's light/dark toggle if your app supports both themes.
5. Press Save, and your members' apps restyle within seconds.

As with all styles, Cmd-Z undoes, Reset discards unsaved changes, and the History drawer reverts to earlier saves. For the global sections themselves, see Colours, fonts and global styles.