--- title: Step 5 - Modify mobile app slug: docs/step-5-modify-mobile-app docTags: createdAt: 2024-11-22T13:33:16.646Z --- The mobile project templates can only be a base for your demo. You can modify each screen, add, and remove them to make your demonstration as real as possible For this exercise, we will modify the Retail/Luma home screen, but the same steps can be done with any other mobile project. ### MODIFY SCREEN CONTENT The mobile app content can be modified to match your needs. You can add, modify, and remove screens, reorganize navigation, and update branding. ## How to modify screens in the mobile app? 1. Go to [https://dsn.adobe.com/](https://dsn.adobe.com/) . Open your Workspace project and open your mobile project. Click "Edit" ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/YdO7EibbnbtiPQpPSXeMp_image.png" size="82" width="3408" height="1464" position="center" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Nu5AzCMT227aboKiIBT-q_image.png" size="54" width="690" height="282" position="center" showCaption="false"} Click on some of them to see what they look like. As an example, we will first open the "Home" Screen. Click on it and click "Edit content" from the panel on the right: ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/XimfiS8TE49aMUbhzlwUK_image.png) The screen is built from multiple components. You can edit them, delete them, or move them around. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/z2Pvgsh15wtJ0q0CFhp5a_image.png" size="64" width="1008" height="1480" position="center" showCaption="false"} Each component has its properties. You can learn more about them here: [Components for mobile project](docId\:JJWA3PsCrCuR3MJdCMmfK) ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Wi8Q61D82bTfo0BNgCDPS_image.png) As an example, move the banner lower in the hierarchy and update the text and image,e.g,. like that: Image: [https://demo-system-next.s3.amazonaws.com/assets/luma/AdobeStock\_123.jpeg](https://demo-system-next.s3.amazonaws.com/assets/luma/AdobeStock_123.jpeg) Title: MOVE WITH STYLE Subtitle: New Yoga Collection ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/MYZWBB32RxAYb2ZXZ2kwa_image.png) Open the app, if you haven't done it before (Make sure you are connected to the right project). **How to connect to a custom mobile project in the app?** Go to the mobile project in the builder, the project that we are editing. Click on Run. It will show a QR code. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/5XuTbzuVDDuMxpikn3hfM_image.png" size="60" width="3400" height="1632" position="center" showCaption="false"} Open the settings screen in the app. Click on on **Custom** tab. Click on the QR code to scan the QR code above. The project will be loaded in the app. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/6k24fWGt9ofmbTKn7fxNz_image.png" size="26" width="786" height="1638" position="center" showCaption="false"} If you are already connected to the project in the app, pull down on the screen to refresh. The home screen should be updated. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/XMofOtkH4Gnd1utp2l8e3_image.png" size="46" width="812" height="1634" position="center" showCaption="false"} ### MODIFY THE BRANDING It is possible to change the app branding, e.g., logo, header, footer, colors, and fonts. Switch to the branding page of your project to make the changes. ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/E2Pn88Yu8-nhnv21foBSe_image.png) Modify the logo: [https://companieslogo.com/img/orig/ADBE-fb158b30.png](https://companieslogo.com/img/orig/ADBE-fb158b30.png) **Upload or update logos** - You can set a **primary logo** (for light mode) by uploading an image or pasting a logo URL. - For **dark mode**, upload an alternate version of your logo to ensure visibility against dark backgrounds. **Adjust logo properties** - Use the **Logo width** field to set a specific size, or leave it blank for automatic scaling. - Set the **Border radius** to adjust how rounded the logo’s edges appear. **Choose color theming** You have two color theming types you can choose from: - **Advanced color theming** is the more customizable option, where you can choose colors for various different elements of the application, such as different types of background colors, text colors, etc. - **Simple color theming** allows you to specify only the **Primary color. **The rest of the colors of the app will be auto-generated. For this tutorial, choose **advanced color theming**. **Customize theme colors** - Define the **Primary color **(mandatory) - Optionally, adjust Secondary, Tertiary, Background, Text, and bar colors (Top/Bottom bar background, text, and accents). - Switch between **Light mode** and **Dark mode** to customize each separately. The app looks right now like this: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/XTKPibmkBXXeTy_m3ZsPH_image.png" size="50" width="816" height="1644" position="center" showCaption="false"} ### MODIFY THE PRODUCTS You can add or remove products by switching to the **Products** tab. ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/hVlYgBwepSPsIOgIDPBH__image.png) Click on the **+Add** to add a new product. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1kqnVXd2_CV_w1VkgTb3Y_image.png" size="68" width="3356" height="72" position="center" showCaption="false"} Click on the newly added row to make changes to the product. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/HhHAQw0_bEAdT7ianGioI_image.png" size="78" width="3350" height="180" position="center" showCaption="false"} ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/j09LXM8Fr-Fv22aOvH7ft_image.png) Provide product details as below: **Name:** **Velocity DryFit Tee** **Description:** The Velocity DryFit Tee is an ultra-light, breathable running top designed to wick sweat, keep you cool, and move with your body for peak performance. **Category**: Men/Tops **Price**:29 **Property**: **sku**:MST07 **thumbnail**: [https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png](https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png) **Image**: [https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png](https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png) It will look like below: ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/mcZ4rOcxFirMB-q6vM-zo_image.png) On the app, open the Men page. You should see all products listed along with the new product added. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/qlFySFCinorAAeDO10GQN_image.png" size="50" width="822" height="1566" position="center" showCaption="false"} You can use the **Export to File **option to download all products and reuse them in another project. ::Image[]{src="https://images.archbee.com/bAgVaanSi1tFmfc8PghaH/VuR-QBpWENxE5wB1mvtWy_image.png?format=webp" size="52" width="296" height="102" position="center" showCaption="false"} Learn more about mobile app modification. Check this section: [Mobile App Overview](docId\:OF9SLIJWsGcA2mh-2gQlP) Learn more about mobile components: [Components for mobile project](docId\:JJWA3PsCrCuR3MJdCMmfK)