Skip to Content
TutorialCustomizing metadata

Title and description

Your site’s title and description are picked up and displayed by search engines and AI bots when they index your site. Make sure to keep them within recommended lengths:

  • Title: up to 60 characters
  • Description: up to 160 characters

Open app/(main)/layout.tsx, find the metadata constant at the top and change the title and description properties:

export const metadata: Metadata = {
  title: "Website title",
  description: "Website description",
  ...
};

App Store app ID

Your app’s App Store ID will be used throughout the website in places like download links and Safari app banner.

First, copy your App Store ID from App Store Connect:

  1. Log in to App Store Connect .
  2. Go to “My Apps” and select your app.
  3. In the “App Information” section, find the “Apple ID” field and copy the value.

Then, open the src/constants.ts file, find the APP_ID constant and paste the value you just copied:

export const APP_ID = "1234567890";

Choosing color theme

Your site supports light and dark themes out of the box, and it will automatically adjust to the user’s system preferences.

But you can also lock the theme to always be either light or dark.

This behavior is controlled by the THEME constant in the src/constants.ts. By default it’s set to system, but if you prefer, you can change it to light or dark:

export const THEME: "system" | "light" | "dark" = "system";

AppView comes by default with a neutral color scheme that plays well with the style of iOS UI. However, there 15 other themes to choose from, or you can even build a custom one. Check out the Color Themes guide to learn more.

Next, you will set up the hero section of your app’s homepage.

Getting startedHero Section