Skip to main content

Customize Landing Page

ShipNowKit provides multiple customizable landing page templates that you can tailor to your needs using AI-powered configuration. This guide will walk you through the process of creating an effective landing page quickly and efficiently.

📑 Selecting A Template​

ShipNowKit offers two distinct template styles in the app/_templates directory: NotionLike and ShipNowLike.

To get started, copy your preferred template to your app directory:

# For example, select the NotionLike template
cp app/_templates/notion/page.tsx app/page.tsx

🧩 Customizing Page Modules​

A typical landing page template includes these key modules:

  • Header - Navigation and branding
  • Hero - Main banner section
  • Features - Product highlights
  • Pricing - Plan options
  • FAQ - Common questions
  • CTA - Call-to-action sections
  • Footer - Bottom navigation and links

Each module is fully configurable. You can easily remove unnecessary modules by deleting their configuration and component references.

🤖 Generating Configuration with AI​

Leverage AI tools like Cursor or Claude to generate module configurations. Here's a sample prompt to get started:

I need to create a landing page for my product. Please help generate the configuration based on page.tsx.

## Product Details:
- Name: [YOUR PRODUCT NAME]
- Description: [YOUR PRODUCT DESCRIPTION]
- Key Features: [YOUR PRODUCT FEATURES]
- Pricing Plans: [YOUR PRODUCT PRICING]
...

Tips:

  • Provide detailed product information for more accurate AI-generated configurations
  • Check the Components section for module-specific prompts
  • Use AI suggestions as a starting point and customize as needed

Example using Cursor: image.png

❓FAQ​

How do I modify component styles?

All components are located in the components directory. You can customize styles by modifying the component files directly.

How should I handle image assets?

Store images in the public directory and reference them using relative paths in your configuration.