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.
Custom Banner
The final result of a Custom Banner
Product Blocks
Use this blocks to highlight products on your home page. You can decide between carossel or grid, which is simply a design choice. They are usually used after a banner block or a collection carrousel, which you can 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. This option is just for collection content, since if you pick product, you will previously select the number you want.
Product Carrousel and Product Grid components have a maximum number of 12 products.
Product Carrousel
The final result of a Product Carrousel
Product Grid
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 and, since they are very different in design, they will offer you so much combinations with other components.
Collection carousel, circle collection, collection thin and collection grid work the same way, its just a design choice.
The Collection Text Carousel has more options, but is just text.
The Collection blocks, reuse the collection name and image if exists, but you can change it if necessary.
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.
The final result of a Circle Collection Carousel.
Collection Thin Carousel
Utilizing the Collection Thin Carousel block it’s the same as the circle collection carousel but with a different design.
The final result of a Collection Thin Carousel.
Collection Carousel
The collection carousel is the one where you might eye-catch your clients since you have a lot of options.
In the first one, named slideshow, the collections are displayed in a carousel vertically, with higher sizes and only one by one. To see the other collection, the user must slide or you should use our autoplay section.
The final result of a Collection Slideshow.
The other design option inside the collection carousel is named "carousel". It is similar to a collection thin or a circle collection but you can customize how many collections you want to see at the same time and their aspect ratio between portrait, square or landscape.
The final result of a Collection Carousel.
In this exemple, it is select 2 as the number of visible items and portrait (2:3) as the aspect ratio.
Collection Grid
Similar to a Product Grid, the Collection Grid showcases the collections similarly to a collection carousel but vertically. You can adjuste how many columns you want to display, their aspect ratio and where you want to show the collections' titles.
The final result of a Collection Grid.
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.
The final result of a Announcement Bar.
