Customize Page Display

Configure General Display Content

The general display content of the project corresponds to the configuration file src/config/locale/messages/{locale}/common.json

This includes website metadata information, sign login/registration copy, locale_detector language detection copy, etc.

You can modify the configuration file content according to your project's actual needs.

The metadata information is used for search engine indexing. Please make sure to modify it before deploying your project.

Default content:

{
  "metadata": {
    "title": "ShipAny Template Two",
    "description": "ShipAny is a NextJS boilerplate for building AI SaaS startups. Ship Fast with a variety of templates and components.",
    "keywords": "shipany, shipany-boilerplate, shipany-template-two-demo"
  }
}

You can use AI to assist in generating configuration file content. Reference prompt:

The project I am developing is an AI image generator based on Nano Banana Pro model,
please refer to the content on the webpage: https://gemini.google/overview/image-generation/,
help me modify the metadata information in the common configuration file under src/config/locale/messages/{locale}/common.json.
My project name is: Nano Banana Pro,
Keywords contains: nano banana pro, nano banana, nano banana 2, gemini 3 pro image.

After modification, refresh the project page and use the AITDK extension to verify that the website's metadata information is correct.

You can continue to manually adjust the metadata content in the configuration file based on the detection results.

Configure Landing Page Content

The landing page content corresponds to the configuration file src/config/locale/messages/{locale}/landing.json

The default configuration defines the display content for landing page blocks such as header / hero / features / testimonials / faq / cta. You can partially or completely replace the default content according to your project needs.

Use AI to assist in generating configuration file content. Reference prompt:

The project I am developing is an AI image generator based on Nano Banana Pro model,
please refer to the content on the webpage: https://gemini.google/overview/image-generation/,
help me modify the landing page content in the configuration file under src/config/locale/messages/{locale}/landing.json.
My project title is: Nano Banana Pro,
Keywords contains: nano banana pro, nano banana, nano banana 2, gemini 3 pro image.

After modification, refresh the project page and use the AITDK extension to verify that the landing page content is correct.

You can see that the landing page content has been updated to your settings, including the specified keywords.

You can continue to manually adjust the landing page content in the configuration file according to your project needs.

Customize Landing Page Display

After setting the landing page content with AI assistance, you can manually adjust the configuration file content to fine-tune the landing page display.

Customize Header

{
  "header": {
    "id": "header",
    "brand": {
      "title": "Nano Banana Pro",
      "logo": {
        "src": "/imgs/logos/banana.png",
        "alt": "Nano Banana Pro"
      },
      "url": "/"
    },
    "nav": {
      "items": [
        {
          "title": "Features",
          "url": "/#features",
          "icon": "Sparkles"
        }
      ]
    },
    "buttons": [
      {
        "title": "Quick Start",
        "url": "/docs/quick-start",
        "icon": "BookOpenText",
        "target": "_self",
        "variant": "outline"
      }
    ],
    "user_nav": {},
    "show_sign": false,
    "show_theme": false,
    "show_locale": false
  }
}

brand: Brand information to display. Includes Logo, name, link, etc.
nav: Top navigation menu to display.
buttons: Buttons displayed on the top right.
user_nav: Navigation menu displayed in the user avatar dropdown after login.
show_sign: Whether to show login/registration buttons.
show_theme: Whether to show light / dark theme toggle button.
show_locale: Whether to show language toggle button.

Based on the above configuration, the Header effect is as follows:

Other blocks, such as Hero / Footer, etc., can be customized similarly to Header. You can refer to the above configuration content.

Customize Blocks

The default landing page configuration displays the following blocks on the homepage:

header: Top block
hero: Main block
logos: Logo list block
introduce: Introduction information block
benefits: Benefits and features block
usage: Use cases block
features: Features block
stats: Statistics block
testimonials: User testimonials block
faq: FAQ block
cta: Call-to-action block
subscribe: Subscription block
footer: Footer block

You have three ways to customize the blocks displayed on the homepage.

In the src/config/locale/messages/{locale}/landing.json configuration file, delete unwanted blocks or add custom blocks.

{
  "header": {},
  "hero": {},
  "features": {},
  "faq": {},
  "cta": {},
  "footer": {}
}

In the src/themes/default/pages/landing.tsx file, delete unwanted blocks or add custom blocks.

import { Landing } from '@/shared/types/blocks/landing';
import { CTA, FAQ, Features, Hero } from '@/themes/default/blocks';

export default async function LandingPage({
  locale,
  page,
}: {
  locale?: string;
  page: Landing;
}) {
  return (
    <>
      {page.hero && <Hero hero={page.hero} />}
      {page.features && <Features features={page.features} />}
      {page.faq && <FAQ faq={page.faq} />}
      {page.cta && <CTA cta={page.cta} className="bg-muted" />}
    </>
  );
}

The default page layout file is defined in src/themes/default/layouts/landing.tsx.

It includes Header and Footer blocks.

import { ReactNode } from 'react';

import {
  Footer as FooterType,
  Header as HeaderType,
} from '@/shared/types/blocks/landing';
import { Footer, Header } from '@/themes/default/blocks';

export default async function LandingLayout({
  children,
  header,
  footer,
}: {
  children: ReactNode;
  header: HeaderType;
  footer: FooterType;
}) {
  return (
    <div className="h-screen w-screen">
      <Header header={header} />
      {children}
      <Footer footer={footer} />
    </div>
  );
}

Use a custom theme folder to implement custom page layouts.

Refer to the Customize Theme documentation to create a custom theme folder and implement a custom theme within it.

For example, the custom landing page file is located at src/themes/shipany/pages/landing.tsx, with the following implementation:

import { Landing } from '@/shared/types/blocks/landing';
import { CTA, FAQ, Features, Hero } from '@/themes/shipany/blocks';

export default async function LandingPage({
  locale,
  page,
}: {
  locale?: string;
  page: Landing;
}) {
  return (
    <>
      {page.hero && <Hero hero={page.hero} />}
      {page.features && <Features features={page.features} />}
      {page.faq && <FAQ faq={page.faq} />}
      {page.cta && <CTA cta={page.cta} className="bg-muted" />}
    </>
  );
}

It is recommended to use a custom theme folder to customize the landing page display, as it offers more flexibility and avoids conflicts with the system's default theme files.

Customize Admin Display

You can customize the admin display by modifying the src/config/locale/messages/{locale}/admin/sidebar.json configuration file.

For example, change it to the following configuration:

{
  "header": {
    "brand": {
      "title": "Nano Banana Pro",
      "logo": {
        "src": "/imgs/logos/banana.png",
        "alt": "Nano Banana Pro"
      },
      "url": "/admin"
    },
    "show_trigger": true
  },
  "main_navs": [
    {
      "title": "System",
      "items": [
        {
          "title": "Users & Permissions",
          "icon": "User",
          "is_expand": true,
          "children": [
            {
              "title": "Users",
              "url": "/admin/users",
              "icon": "User"
            }
          ]
        }
      ]
    },
    {
      "title": "Business",
      "items": [
        {
          "title": "Images",
          "url": "/admin/ai-tasks",
          "icon": "Brain"
        }
      ]
    }
  ],
  "bottom_nav": {
    "items": [
      {
        "title": "Settings",
        "url": "/admin/settings/auth",
        "icon": "Settings"
      }
    ]
  },
  "user": {
    "nav": {
      "items": [
        {
          "title": "Profile",
          "url": "/settings/profile",
          "icon": "User",
          "target": "_blank"
        }
      ]
    },
    "show_email": true,
    "show_signout": true,
    "signout_callback": "/"
  },
  "footer": {
    "nav": {
      "items": [
        {
          "title": "Home",
          "url": "/",
          "icon": "Home",
          "target": "_blank"
        }
      ]
    },
    "show_theme": true,
    "show_locale": true
  },
  "variant": "floating"
}

header: Brand information at the top of the sidebar.
main_navs: Main menu in the sidebar.
bottom_nav: Bottom menu in the sidebar.
user: User login settings.
footer: Footer information in the sidebar.
variant: Sidebar layout style. Options are inset / sidebar / floating.

Based on the above configuration, the admin display effect is as follows: