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:Option 1: Customize the Default Landing Page
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.
Option 2: Use Third-Party Landing Page
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.Option 3: Use Marketplace Themes
Option 3: Use Marketplace Themes
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.
Option 4: Build Your Own Theme
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 - the same foundation we use internally
- Follow our comprehensive Theme Development Guide for detailed instructions
- Contact sales@aikeedo.com to have our team create custom themes for you
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:Replace
yourorganization
and themename
with your preferred names.2
Update composer.json
In your duplicated theme directory, update the The name must match the new directory structure.
composer.json
file to reflect the new theme name:3
Duplicate Theme Assets
Copy the theme assets to match your new theme:
If using
public_html
, replace public
with public_html
in the paths above.4
Activate Your Theme
- Navigate to the admin panel
- Go to Themes page
- Find your new theme in the list
- Click Activate to enable it
5
Enable Debug Mode and Disable Cache
For development, you need to enable debug mode and disable app cache:
- Navigate to the Status page in your admin panel
- Enable Debug Mode: This allows you to see changes in real-time during development
- 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:
- Navigate to the Status page in your admin panel
- Disable Debug Mode for optimal performance
- 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)
- Stylesheets (CSS)
- JavaScript files
- Images and icons
HTML View Files
Quick Customizations
Updating the Hero Image
The hero image is located at:- Replace the existing
preview.webp
file with your new image - Keep the same filename (
preview.webp
) - 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: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:- Always Duplicate: Never edit the default theme directly
- Version Control: Keep your custom theme under version control (Git)
- Test Thoroughly: Test changes across different browsers and devices
- Optimize Assets: Compress images and minify CSS/JS for better performance
- Document Changes: Keep notes on customizations for future reference
- 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:Changes not appearing after update
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
Theme not showing in admin panel
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
Styles not loading correctly
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
Related Guides
- Branding - Configure logos and colors
- General Settings - Set site name and SEO
- Localization - Manage translations
- Theme Development Guide - Advanced theme development
Remember to disable debug mode on production sites to ensure optimal performance and security.