Skip to main content

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.
Changes made directly to the default theme will be overwritten during app updates. Always duplicate the theme before making customizations.
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.

Landing Page Options

Aikeedo offers flexibility in how you manage your 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.
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.
Browse and install pre-built themes from our 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.
Create custom themes tailored to your specific needs. You can build themes yourself or have our team create them for you.For developers:For custom development:Best for: Users who need unique designs or have specific branding requirements.

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.
1

Duplicate the Theme Directory

Copy the default theme to a new location:
# From
/extra/extensions/heyaikeedo/default

# To
/extra/extensions/yourorganization/themename
Replace yourorganization and themename with your preferred names.
2

Update composer.json

In your duplicated theme directory, update the composer.json file to reflect the new theme name:
{
  "name": "yourorganization/themename"
}
The name must match the new directory structure.
3

Duplicate Theme Assets

Copy the theme assets to match your new theme:
# From
/public/e/heyaikeedo/default

# To
/public/e/yourorganization/themename
If using public_html, replace public with public_html in the paths above.
4

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
5

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
Debug mode and disabled cache should never be enabled in production as they significantly impact performance.
6

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
TWIG templates are located in the views directory of your theme. Look for .twig files to modify the HTML structure.
7

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
8

Clear Cache

If you have any caching enabled, clear the application cache from the admin panel’s Status page after making changes.
Your customizations are now protected from being overwritten during updates.

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
For best results, use WebP format for optimal performance and loading speed.

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 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:

Default Theme Repository

View the complete source code, structure, and implementation of the default landing page theme

Theme Development Resources

For in-depth information on building custom themes:

Theme Development Guide

Learn about theme architecture, available objects, and best practices for theme development

Theme Starter Kit

Minimal foundation for building custom themes from scratch - the same base we use internally

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
If you only need to change colors and logos, consider using the Branding settings instead of creating a custom theme.

Troubleshooting

Common issues and solutions:
  • 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
  • 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
  • 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
Remember to disable debug mode on production sites to ensure optimal performance and security.
I