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 "Builder" section and select "Home Page". 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 and click on the "Edit Home" link. 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 left 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.
Search Bar
Our simplest component enables your shoppers to quickly access any product in your store.
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 the ‘Edit Content’ button and choose the collection in the pop-up, 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.
To update the featured collection image, check out this guide!
Collection Thin Carousel
Utilizing the Collection Thin Carousel block it’s the same as the circle collection carousel but with a different design.
To update the featured collection image, check out this guide!
Collection Slider Carousel
Utilizing the Collection Slider Carousel block it’s the same as the circle collection carousel but with a different design.
To update the featured collection image, check out this guide!
Product Block Type
Product blocks allow you to showcase your products in different designs. Here's a step-by-step guide on how to use them:
Choose which products to display:
- Product: Add each product individually and re-order them as you like.
- Collection: Select a collection and the block will automatically show the products, starting with the most recent.
Customize the title:
- Custom title: Turn on the switch in the editing bar and enter your own title.
- Automatic title: Leave the switch off and the title will be based on the collection of the products you've selected. If they don't have a common collection, no title will appear.
View More button:
- Only appears if all the selected products belong to the same collection.
- Clicking the button will take you to the collection page.
Remember, these instructions apply to all three product block types. And don't forget to check the images that provide an illustration of the steps.
Product Grid
Highlight products in a specific collection with the Product Grid component. Display up to 8 products in a two-column, grid layout.
Product Carousel
Utilizing the Product Carousel, your customers can easily swipe through products. Display up to 12 products in this component.
Swipeable Products
Utilizing the Swipeable Products, your customers can swipe in a fun and engaging way! You can feature up to 12 products in this component.
Custom Banner
Upload a custom image or banner using the Custom Banner Component. You can link this block to a product, collection, or web page, or keep it as a static image for brand announcements or promos! Web pages will open inside the app for a seamless user experience.
Video Banner
Create a more dynamic experience in-app by using the Video Block! Use this block to highlight a product or lookbook sneak peek. We recommend square videos under 10 MB for optimized load times when using LTE/device data.
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.
