Customize Your App Design

The App Design section helps you create and customize the customer-facing experience of your mobile app without coding.

You can:

• Apply a ready-made design from the Themes Library.

• Customize essential and custom app screens.

• Add, remove, and reorder supported components.

• Update images, text, products, collections, colors, and display settings.

• Preview changes instantly in the editor.

• Test the complete experience on a mobile device using Ego Live Preview.

Go to Ego Mobile Builder → App Design.

You can start in one of two ways:

Apply a theme template

Open the Themes Library and select a ready-made design that matches your store.

1. Browse the available themes.

2. Click View Detail to preview a theme.

3. Click Apply Theme.

4. Customize the applied design with your own branding and store content.

Theme templates provide pre-built layouts and component arrangements, so you do not need to design every screen from scratch.

Start with your current design

Open an existing design when you only need to update its content, layout, or branding.

Applying a new theme may replace the current layout. Review your existing design before confirming.

Choose the screen you want to customize.

Supported screens may include:

• Home

• Product List

• Product Detail

• Collection List

• Search

• Cart

• Wishlist

• Custom screens

Available components depend on the selected screen.

For each screen, you can:

• Add supported components.

• Drag and drop components to reorder them.

• Edit images, videos, text, products, and collections.

• Configure layout, spacing, buttons, and navigation.

• Show, hide, or remove components.

Common components include banners, image carousels, product grids, product sliders, shoppable videos, countdown timers, search elements, product details, cart sections, and review widgets.

Some components may require a supported plan, feature, or integration.

Changes are reflected immediately in the mobile preview while you edit the settings.

Use the editor preview to check:

• Text readability

• Image proportions

• Component order

• Button placement

• Spacing

• Overall visual balance

The editor preview is intended for quick visual checks. The final display may vary slightly depending on the device size and available store data.

Click Save after completing your changes.

For a more accurate mobile experience, use Ego Live Preview:

1. Install Ego Live Preview on your mobile device.

2. Open the app preview section in Ego Mobile Builder.

3. Select the design you want to test.

4. Scan the QR code.

5. Review the screens, navigation, scrolling, and interactive elements on your device.

Don’t have Ego Live Preview yet? Download Ego Live Preview.

After testing your design, choose the appropriate next step:

• Save keeps the latest changes in the editor.

• Publish makes supported design and content updates available in your app.

• Submit App sends a new app or app version to Apple and Google when marketplace review is required.

Not every design update requires a new App Store or Google Play submission.

For the best results:

1. Apply a theme or start with an existing design.

2. Configure your branding.

3. Customize the essential screens.

4. Set up navigation.

5. Review changes in the editor preview.

6. Test the complete experience with Ego Live Preview.

7. Save and publish the design.

8. Submit the app when it is ready for launch.

• Keep each screen focused and easy to scan.

• Use consistent colors, typography, and button styles.

• Place important content near the top of the screen.

• Avoid adding too many sections to one page.

• Keep banner text short and readable on mobile.

• Test important screens before publishing.

• Prioritize usability over decorative elements.

Changes do not appear

Save the design, refresh the editor, and confirm that the component is visible. If checking the live app, make sure the changes have also been published.

A component is unavailable

Confirm that the component supports the selected screen and that any required integration is enabled.

Images appear cropped or blurry

Use high-quality images with the recommended dimensions and avoid placing important content near the edges.

Changes do not appear in Ego Live Preview

Confirm that the latest design is saved and that Ego Live Preview is connected to the correct store and design.