Skip to main content

Kin: More Menu & Navigation

Kin app

This article applies to the Kin app (now part of Reactiv). If your app was built with Reactiv, see the Reactiv support docs instead.

Shoppers move around your Kin app using the tabs, the top bar, the More menu and the navigation header.

App layout​

  • Tabs: For You shows your brand content and Shop shows your store. You choose whether For You is shown and which tab opens first. See What You Can Change Without an App Update.
  • Top bar:
    • Search.
    • Cart: opens the cart as a sheet. The badge shows the number of items in the cart.
    • Menu: opens the full-screen More menu.

More menu​

The More menu always shows Notifications at the top and Sign in or Sign out for the shopper. Below that are the sections you configure.

Sections:

  • Each section has a title.
  • Each section starts either expanded or collapsed.

Items: each item in a section has:

  • A title.
  • An icon, chosen from the app's built-in icon set. Custom icon uploads aren't supported, which keeps the menu consistent.
  • A destination: a page on your website or a screen in the app. See Deep Links & Universal Links.

Example layout:

  • Account: Account Settings, Manage Notifications, Orders & Returns.
  • Support.
  • About Us.

Edit the menu in Build → Navigation → Menu. A wishlist link can be added in Build → Navigation → Wishlist. Menu changes don't need an app update.

The navigation header is a horizontal row of shortcut "pills" at the top of the Shop tab. Use it for your main categories, for example New Arrivals, Women or Sale.

  • A plain pill opens a page.
  • A pill with a ⌄ arrow opens a sheet with more options.
  • Items with a › arrow open a further level, so you can nest categories such as Women › Shoes › Boots.

The header's colors come from the primary pill, secondary pill, and pill container colors in Branding, Colors & Fonts. Edit the items in Build → Navigation → Shortcuts.

Was this page helpful?