TutorialsCustomize Landing Page

Customize Landing Page

The Landing Page is one of ShipAny’s distinctive features. You can customize its style and content through simple configurations.

Modifying Landing Page Content

ShipAny comes with a built-in Landing Page where all content is defined through JSON files.

Multi-language support is enabled by default. The English Landing Page file is located in i18n/pages/landing/en.json.

The Chinese Landing Page file is located in i18n/pages/landing/zh.json.

You can add Landing Page files for other languages in the i18n/pages/landing directory.

The Landing Page file includes the following sections, which you can modify according to your needs:

i18n/pages/landing/en.json
{
  "template": "shipany-template-one",
  "theme": "light",
  "header": {},
  "hero": {},
  "branding": {},
  "introduce": {},
  "benefit": {},
  "usage": {},
  "feature": {},
  "showcase": {},
  "stats": {},
  "pricing": {},
  "testimonial": {},
  "faq": {},
  "cta": {},
  "footer": {}
}

Using AI Editor to Generate New Landing Page Content

You can use the AI editor Cursor to input your new website theme and generate new Landing Page content through AI dialogue by specifying reference materials.

Reference Prompt:

Prompt
I want to build a landing page for my product named "Flux AI Image Generator", please update the landing page json file, content reference @Web @https://www.flux.ai/

update-landing

Using AI Chat Products to Generate New Landing Page Content

You can copy the default Landing Page content and use AI chat products like ThinkAny / v0 / Claude / ChatGPT / Kimi etc., to generate new Landing Page content.

Reference Prompt:

Prompt
rewrite this json file with new content for my product, focus on topic "Flux AI Image Generator"

claude-landing

Modifying Landing Page Structure

The default Landing Page layout file is located in app/[locale]/(default)/layout.tsx.

app/[locale]/(default)/layout.tsx
export default async function DefaultLayout({
  children,
  params: { locale },
}: {
  children: ReactNode;
  params: { locale: string };
}) {
  const page = await getLandingPage(locale);
 
  return (
    <>
      {page.header && <Header header={page.header} />}
      <main className="overflow-x-hidden">{children}</main>
      {page.footer && <Footer footer={page.footer} />}
    </>
  );
}

The homepage content structure is located in app/[locale]/(default)/page.tsx.

app/[locale]/(default)/page.tsx
export default async function LandingPage({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const page = await getLandingPage(locale);
 
  return (
    <>
      {page.hero && <Hero hero={page.hero} />}
      {page.branding && <Branding section={page.branding} />}
      {page.introduce && <Feature1 section={page.introduce} />}
      {page.benefit && <Feature2 section={page.benefit} />}
      {page.usage && <Feature3 section={page.usage} />}
      {page.feature && <Feature section={page.feature} />}
      {page.showcase && <Showcase section={page.showcase} />}
      {page.stats && <Stats section={page.stats} />}
      {page.pricing && <Pricing pricing={page.pricing} />}
      {page.testimonial && <Testimonial section={page.testimonial} />}
      {page.faq && <FAQ section={page.faq} />}
      {page.cta && <CTA section={page.cta} />}
    </>
  );
}

You can modify these according to your new website’s requirements. For example, you can remove certain components or add new ones.

For the parameters supported by each component, please refer to the component documentation section.

Get StartedNew Page