> For the complete documentation index, see [llms.txt](https://opusecom.gitbook.io/opus-mobile-builder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://opusecom.gitbook.io/opus-mobile-builder/design-customize/quickstart-1.md). # How to Customize Your App Design? ### Step 1: Open the Design Editor Go to App Design and choose the screen or section you want to customize. ![](/files/xoIvj0REleCNFHr0QHqU) ### Step 2: Update Design Settings Modify the available settings such as: * Colors * Fonts * Images * Section order * Visibility * Spacing or content ![](/files/Cvaa4aueqhd2akAOrYyb) ### Step 3: Previewing Design Changes When you update any settings in the configuration panel on the right (such as text, colors, buttons, or image attributes), the changes will be instantly reflected in the mobile preview on the left. This allows you to see how your design appears on a real mobile layout in real time while adjusting the settings. Tip:\ Use the mobile preview to quickly verify: * Text readability * Image appearance * Button placement * Overall layout and visual balance ![](/files/ERoZcmqHLkskXAarfCeQ) ### Step 4: Save Your Changes Once your edits are complete, click Save to keep your updates. ![](/files/TYMWsXTVtDVQ7tUhgwTI) ### Step 5: Continue to App Preview or Submission After finishing the design customization, you can move to: * Scan the QR code on Ego Live Preview to view the app interface directly on your mobile device. If you don’t have the app installed yet, please click here to download the app. (attach the download link) ![](/files/1cNufctsjbnO6PjWf4I0) * Submit App when your design is ready for publishing ![](/files/QK5BEtsQVvHPaVhZUAmR) *** ### Recommended Design Workflow For the best results, follow this order: * Set up the app branding * Customize the layout of the pages * Preview the full design in the app preview * Configure app notifications * Make final refinements before submission This workflow helps keep your design process organized and reduces rework later. *** ### Tips for a Better Mobile App Design * Keep the design clean * Use consistent brand colors throughout the app * Avoid overcrowding screens with too many sections * Make key actions stand out clearly * Test banners and text on mobile preview before publishing * Prioritize usability over decoration A good app design should not only look attractive but also help customers browse and shop more easily. *** ### Common Issues and How to Fix Them #### Design changes do not appear in preview * Make sure you clicked Save * Refresh the preview * Check whether the section is currently hidden #### Text is hard to read * Improve contrast between text and background colors * Reduce the use of overly light or bright colors * Use simpler typography settings #### Images look cropped or blurry * Upload higher-quality images * Use recommended image dimensions * Avoid adding too much text inside banners #### App feels visually inconsistent * Recheck your primary colors, fonts, and button styles * Use the same design rules across all screens * Remove unnecessary visual variations *** ### Need Help? If you continue to experience issues while customizing your design, please contact our support team. * Email: Our team will help you resolve the issue as quickly as possible. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://opusecom.gitbook.io/opus-mobile-builder/design-customize/quickstart-1.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.