> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aikeedo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Landing Page Customization

> Customize your Aikeedo landing page including hero images, text content, and theme files while preserving changes through updates.

## Overview

The landing page is the first impression visitors get of your Aikeedo platform. This guide covers how to customize images, text, and theme files safely.

<Warning>
  Changes made directly to the default theme will be overwritten during app updates. Always duplicate the theme before making customizations.
</Warning>

<Note>
  **Directory Note**: If you've replaced the default `public` directory with `public_html` (common in cPanel environments), replace `public` with `public_html` in all file paths throughout this guide.
</Note>

## Landing Page Options

Aikeedo offers flexibility in how you manage your landing page:

<AccordionGroup>
  <Accordion title="Option 1: Customize the Default Landing Page">
    Use Aikeedo's built-in landing page and customize it to match your brand. This option gives you full control while staying within the Aikeedo ecosystem.

    **Best for:** Users who want to customize the existing design without external tools.
  </Accordion>

  <Accordion title="Option 2: Use Third-Party Landing Page">
    Install Aikeedo on a subdomain (`app.yourdomain.com`) and disable the default landing page. Create your main landing page using external services like Framer, WordPress, Webflow, or Squarespace, then point your main domain (`yourdomain.com`) to your third-party landing page.

    **How it works:** Main domain shows your custom landing page, while the subdomain handles Aikeedo functionality (authorized users go to dashboard, unauthorized visitors see login page).

    **Best for:** Users who want complete design freedom with specialized landing page builders.

    <Tip>
      Set the **Detailed pricing page URL** in [Billing settings](/billing/overview#detailed-pricing-page-url) so the in-app Plans page button links to your external pricing page instead of the default `/#pricing` anchor.
    </Tip>
  </Accordion>

  <Accordion title="Option 3: Use Marketplace Themes">
    Browse and install pre-built themes from our [Marketplace](https://aikeedo.com/marketplace/). These professionally designed themes are ready to use and can be customized to match your brand.

    **Best for:** Users who want professional designs without starting from scratch.
  </Accordion>

  <Accordion title="Option 4: Build Your Own Theme">
    Create custom themes tailored to your specific needs. You can build themes yourself or have our team create them for you.

    **For developers:**

    * Start with our minimal [Theme Starter Kit](https://github.com/heyaikeedo/themes-starter) - the same foundation we use internally
    * Follow our comprehensive [Theme Development Guide](/development/themes/development-guide) for detailed instructions

    **For custom development:**

    * Contact [sales@aikeedo.com](mailto:sales@aikeedo.com) to have our team create custom themes for you

    **Best for:** Users who need unique designs or have specific branding requirements.
  </Accordion>
</AccordionGroup>

## Customize the Default Landing Page

To customize Aikeedo's default landing page, you'll need to duplicate the theme first to protect your changes from being overwritten during updates.

<Steps>
  <Step title="Duplicate the Theme Directory">
    Copy the default theme to a new location:

    ```bash theme={null}
    # From
    /extra/extensions/heyaikeedo/default

    # To
    /extra/extensions/yourorganization/themename
    ```

    Replace `yourorganization` and `themename` with your preferred names.
  </Step>

  <Step title="Update composer.json">
    In your duplicated theme directory, update the `composer.json` file to reflect the new theme name:

    ```json theme={null}
    {
      "name": "yourorganization/themename"
    }
    ```

    The name must match the new directory structure.
  </Step>

  <Step title="Duplicate Theme Assets">
    Copy the theme assets to match your new theme:

    ```bash theme={null}
    # From
    /public/e/heyaikeedo/default

    # To
    /public/e/yourorganization/themename
    ```

    <Note>
      If using `public_html`, replace `public` with `public_html` in the paths above.
    </Note>
  </Step>

  <Step title="Activate Your Theme">
    1. Navigate to the admin panel
    2. Go to **Themes** page
    3. Find your new theme in the list
    4. Click **Activate** to enable it
  </Step>

  <Step title="Enable Debug Mode and Disable Cache">
    For development, you need to enable debug mode and disable app cache:

    1. Navigate to the **Status** page in your admin panel
    2. **Enable Debug Mode**: This allows you to see changes in real-time during development
    3. **Disable App Cache**: Disable all caching options on the same page

    <Warning>
      Debug mode and disabled cache should never be enabled in production as they significantly impact performance.
    </Warning>
  </Step>

  <Step title="Make Your Changes">
    Edit files in your custom theme directory:

    * **Modify TWIG templates**: Aikeedo uses TWIG for HTML views (`.twig` files)
    * Update CSS styles
    * Add custom JavaScript
    * Replace images

    <Tip>
      TWIG templates are located in the `views` directory of your theme. Look for `.twig` files to modify the HTML structure.
    </Tip>
  </Step>

  <Step title="Disable Debug Mode and Re-enable Cache">
    Once you've completed and tested your changes:

    1. Navigate to the **Status** page in your admin panel
    2. **Disable Debug Mode** for optimal performance
    3. **Re-enable App Cache** for production
  </Step>

  <Step title="Clear Cache">
    If you have any caching enabled, clear the application cache from the admin panel's Status page after making changes.

    <Check>
      Your customizations are now protected from being overwritten during updates.
    </Check>
  </Step>
</Steps>

## Theme File Locations

Understanding where theme files are located helps you customize effectively:

### Asset Files (CSS, JS, Images)

```
/public/e/heyaikeedo/default/
```

Contains all frontend assets including:

* Stylesheets (CSS)
* JavaScript files
* Images and icons

### HTML View Files

```
/extra/extensions/heyaikeedo/default/
```

Contains template files that generate the HTML structure.

## Quick Customizations

### Updating the Hero Image

The hero image is located at:

```
/public/e/heyaikeedo/default/assets/preview.webp
```

To update the hero image:

1. Replace the existing `preview.webp` file with your new image
2. Keep the same filename (`preview.webp`)
3. Clear your browser cache to see the changes

<Tip>
  For best results, use WebP format for optimal performance and loading speed.
</Tip>

### Updating Text Content

Text content should be updated through localization files for proper multilingual support.

Localization files are located at:

```
/extra/extensions/heyaikeedo/default/locale
```

See the [Localization guide](/advanced/localization) for detailed instructions on managing text translations.

## Advanced Theme Development

For comprehensive theme customization and development:

### Default Theme Source Code

Access the default theme source code and documentation:

<Card title="Default Theme Repository" icon="github" href="https://github.com/heyaikeedo/themes-default">
  View the complete source code, structure, and implementation of the default landing page theme
</Card>

### Theme Development Resources

For in-depth information on building custom themes:

<Card title="Theme Development Guide" icon="code" href="/development/themes/development-guide">
  Learn about theme architecture, available objects, and best practices for theme development
</Card>

<Card title="Theme Starter Kit" icon="rocket" href="https://github.com/heyaikeedo/themes-starter">
  Minimal foundation for building custom themes from scratch - the same base we use internally
</Card>

## Best Practices

Follow these guidelines for successful landing page customization:

1. **Always Duplicate**: Never edit the default theme directly
2. **Version Control**: Keep your custom theme under version control (Git)
3. **Test Thoroughly**: Test changes across different browsers and devices
4. **Optimize Assets**: Compress images and minify CSS/JS for better performance
5. **Document Changes**: Keep notes on customizations for future reference
6. **Regular Backups**: Backup your custom theme before major changes

<Tip>
  If you only need to change colors and logos, consider using the [Branding settings](/website-basics/branding) instead of creating a custom theme.
</Tip>

## Troubleshooting

Common issues and solutions:

<AccordionGroup>
  <Accordion title="Changes not appearing after update">
    * Clear your browser cache (hard refresh: Ctrl+Shift+R or Cmd+Shift+R)
    * Clear the application cache from the admin panel
    * Verify you're editing the active theme, not the default theme
  </Accordion>

  <Accordion title="Theme not showing in admin panel">
    * Verify the `composer.json` file has the correct name format
    * Ensure the directory structure matches the name in `composer.json`
    * Check file permissions on the theme directories
  </Accordion>

  <Accordion title="Styles not loading correctly">
    * Verify asset files are in the correct `/public/e/` directory
    * Clear browser cache and application cache
    * Check browser console for 404 errors on asset files
  </Accordion>
</AccordionGroup>

## Related Guides

* [Branding](/website-basics/branding) - Configure logos and colors
* [General Settings](/website-basics/essentials) - Set site name and SEO
* [Localization](/advanced/localization) - Manage translations
* [Theme Development Guide](/development/themes/development-guide) - Advanced theme development

<Warning>
  Remember to disable debug mode on production sites to ensure optimal performance and security.
</Warning>