> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.bitbybit.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Design Your Homepage

Creating a visually compelling and functional homepage is crucial for user experience. With bitApp, you can easily customize elements like image sliders, product collections, and more using drag-and-drop features. Follow this guide to build a captivating homepage for your mobile app:

## **Step 1:** Log in to your [bitApp dashboard](https://app.bitbybit.studio/bitapp/design)

## **Step 2:** Customize your Image Slider

* Drag and drop the “Image Slider” into your mobile mockup and click "+" to add an image.

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66fd1b4971d939975d57426d_AD_4nXc9MPXFkV0gY7Dsn0kN6Ds7uW9vM_eXH29J_0JY8Br0DKP5ZPDKbHvdHREO3Vz2guIelm9Dcl-Xa9ngpIvHmuRbb9M-nruhk-YeIOHwMK-e_Vy_F4LQGNzQ7Sr7JzXV_N6fNqA5zHh-1fsIYAuT7eFAkIxJ.png)

* Drag and drop the “Image Slider” in your mobile mockup and click "+".
* Adjust "Scale" and "Rotate," then click “Save Changes.”

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66d9518c1760d25efe5b215f_AD_4nXd5RC7DrUhD6XTpbz-J2kZdH6Soe-RMTM_HIDIbzC9LOt2kOHA2pgQkApsmR5kXDLcHB-zV1_FLJL4FrYFkt2vjY0LZ70NtlPzJwEIDAkK3fCIJCmTnY6fZMSfyz0w-8y_2q7XMAbK9TajaF6TS0LumsUoP.png)

* Adjust "Scale" and "Rotate," then click “Save Changes.”
* Select the "Destination Page".

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66fd1b4941cb2e93b0b6d2a7_AD_4nXcoZjKVR5bMJGnkVhYtN6-Mf16YIzpzH_SgiPuJX4FIfKwNGun9-K4YNh3Q6OX6PHN0uq3HLx7URI5861t3xJkOPzTe0qlp_PmRa2hCEgsGFp8SvYM_CF_P_GQ4nu0OoekgZ_d_MGBKrzJ0TZ1OcBkiHBw.png)

* Select the "Destination Page".

## **Step 3:** Customize Your Circle Image Grid

* Drag and drop the “Circle Image Grid” into your mobile mockup and fill in the “Grid Title,” then click "+".

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66d8233b665df650f7a2dfd4_AD_4nXcsQlWYl1r7OQ3qDMw6vnr1VhgD8SiFLDF-IyR8jTOIsqEYIYmMN_g4xv0qTDRZgvhHtmDqin1nHGRlEUUC_6W48hPBQNiQXZsilVdN54JvqiK6vYFlDpAdc_ADy6gN3w10j-T7Tp7csf-3jtiO0IHez2Du.png)

* Drag and drop the “Circle Image Grid”, fill in the “Grid Title,” then click "+".
* Adjust "Scale" and "Rotate," then click “Save Changes.”

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66d8233f59b33a09de6f053a_AD_4nXeTpwEB7JVpkcQDh5SthOM-rWUEmtkrzUexyohUI3pdoWB1ohpSLZ-R90U6rpK-56OFV48fIP_DauZaiUbXCzMHZS0Un9uoUYrw7Hrm55Rr78A7U18_nyTUYjKs_6sB3d8JWjyaqMn84_wW7rYU-gOqM6JS.png)

* Adjust "Scale" and "Rotate," then click “Save Changes.”
* Add an "Image Title" and choose the "Destination Page".

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66fd1b497d26f2b12f6d5f3d_AD_4nXc2EePpRad-Pfl0wgvi-slXbsWEB-uJeSNWTZyN4X3KKbiGoMbwItTFkGaxH7w045hk6yiPT9STEj6TvLU4-tfZPI34ZQ1pD6XWwkpJSQyw4-llomxqnJ1TMVwzOk5cE3TXpIfwPnupDh1_EZ1-PPAmEZee.png)

* Add an "Image Title" and choose the "Destination Page".

## **Step 4:** Customize Your Product Collections

* Drag and drop “Collections” into your mobile mockup.
* Fill in the “Collections Title” and "Choose collection" dropdown then set the number of products to display.

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66fd1b497a3565f0220a3c18_AD_4nXc7Q2Do3EW0FkXhBhQ86Vpyp3A6v3v3bv5gQ02mL5noa297M_915maGlcvJlQMEQ1nptYWb5m8Rktu94-Qn2gkKCCLGkk5td4fpBZmQD8ENa4PLp4RIzZEhgWNFO_Z9CMqC9TmgMEcuIPS3Hc1l-QD-1Yqy.png)

* Fill in the “Collections Title”, "Choose collection", and set the number of products to display.

## **Step 5:** Save Your Contents

* Once done, click “Save” to apply changes.

![](https://cdn.prod.website-files.com/659655f5b20d395a5c69efcf/66fd1b498a469d60e9d919c8_AD_4nXd3qKeo_vmIRWHJhqIgDQOQwkDb4ofn4npFo8ed1o2_hV-ZCot4xFnmJBiNYLgDc-5FSakw6DqZAEaVy467xBjaAWSMe1iZCUAbbrcDcnkaBUIyiN6WPWMJx34TYdsL_khKVx0Y38sRkHXiga4Ed_xPAjTG.png)

* Click "Save".