Napps is a user-friendly mobile app builder that lets anyone create their own mobile app, without needing any prior coding or design experience. In this article, we're going to give you a detailed look at our home screen building blocks.
Before diving into each component, let's take a moment to understand how our drag-and-drop system works.
When you log into our dashboard, head over to the "Pages Manager" section and select "Home Pages" tab. Here, you'll find a table that lists all the home pages you've built in the past.
To get started building your home page, select an existing one or create a new one, by clicking on the title of your previous one or in “Create App”. You will be directed to the building section of the dashboard.
In the building section, you will see a list of available components on the left and a preview of your home page in the middle, simulating a smartphone screen. To add a component to your home page, simply drag the desired component from the left to your preferred location on the preview screen and drop it in place.
Once you've added a component, you'll notice a new sidebar appear on the right of the dashboard. This is the component editing section, where you can customize each component to fit your home and brand.
Before you start customizing, take a moment to familiarize yourself with each component and how they can improve the user experience for your customers. Each component offers a different way for customers to engage with your app.
After entering on the builder by clicking on the home title or created a new one, you will have components on the left side, the preview on the middle and you will edit each component on the right side.
So, lets dive into every component:
Banner Blocks
Those are the most creative and most used components. Both of them allow you to upload your brand content.
Both components allow you to setup and action, as you can see on the image bellow:
Since we are full integrated with Shopify, you can select one of your products or collection directly from our dashboard. When customer click on "Custom Banner" or "Video Banner" they will be redirect to the action you select.
The final result of a Custom Banner
Product Blocks
Use this blocks to highlight products on your home page. You can decide between both of them. Its a design choice. They are usually used after a banner block or a collection carrousel - find it on collection blocks section.
Both Product blocks works the same, so picking up one or another is just a design choice.
The headline on this components is optional. If you want to give a custom, you just need to write one, but if every product on them is from the same collection we will give the collection name as headline.
You can add a space to eliminate the headline completely.
Using this type of blocks you should decide if you will add products from different collections and you need to pick one by one, or if they are from the same collection you can just pick the collection.
After picking collection you will be able to define the number of products you will show on this component - obviously this option is just for collection content, since if you pick product, you will select the number you want.
Product Carrousel component have a maximum number of 12 products, meanwhile Product Grid component have a maximum number of 8 products.
The final result of a Product Carrousel
The final result of a Product Grid
Collection Blocks
Use this blocks to highlight your collections on your home page. You can decide between any of them, since they are very different in design, they will offer you so much combinations with other components.
The first 4 components works the same way, its just a design choice.
The Collection Text Carousel have more options, but is just text.
The Collection blocks, since are collections that you have on your online store, they were created to be easy to use. They reuse the collection name and image if exists.
You just need to add collections after drag them to the preview.
In case that you don't have proper name or the image you want, you are always in time to change or add it. It's optional, so its just in case you need to do some
changes over your Shopify Collection information.
Selecting each collection you chosen, you will see the Collection Title and Collection Image as optional, to rewrite over the ones in Shopify.
Circle Collection Carousel
Utilizing our Circle Collection Carousel block you can feature your collections. Editing the collections is pretty simple you just need to click in any part of the block and choose the collection in the right side “Edit Collection”. You can also re-order the collection added on the right or remove collections if you no longer want to showcase it.
You can toggle the titles ON or OFF. The title will show under each collection circle.
Collection Thin Carousel
Utilizing the Collection Thin Carousel block it’s the same as the circle collection carousel but with a different design.
Collection Carousel
Utilizing the Collection Slider Carousel block it’s the same as the circle collection carousel but with a different design.
Countdown
Maximize conversions with the Countdown Component! This dynamic countdown timer creates a sense of urgency for your customers, encouraging them to act quickly. Use it for flash sales, new product releases, limited-time app deals, and more. The Countdown Block is a powerful tool for boosting engagement and driving results.
Announcement Bar
Keep your customers informed about important updates, special offers, or promotions by using our Announcement Bar.
With this feature, you can highlight up to four rotating headlines to showcase key messages. Choose between a simple slide transition for smooth headline changes or a marquee-style scrolling effect to create a dynamic, continuous flow of announcements.
This flexible tool helps ensure that your most critical announcements are easily visible, drawing attention without disrupting the browsing experience. Make your headlines stand out and keep your customers engaged with the latest news, sales, or limited-time deals.
