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 start 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 Page”. 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 click "Add Blocks" and select the desired component.
​

Once you've added a component, you'll notice a new sidebar appear on the right side of the dashboard. This is the 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.

So, let's dive into every component:

​

Those are the most creative and most used components. Both of them allow you to upload your brand content, to setup and action, as you can see on the image bellow:

Since we are fully integrated with Shopify, you can select one of your products or collection directly from our dashboard. When customer click on the "Custom Banner" or "Video Banner" you added they will be redirect to the action selected.

Final result of a Custom Banner

Use these blocks to highlight products on your Home page. You can choose between a Carousel or a Grid layout, depending on your design preference, as both display products in a similar way.

These blocks are typically placed below a banner or a collection carousel to create a visually engaging layout. You can find collection carousel options in the Collection Blocks section.

The headline for this component is optional. If you want to use a custom headline, simply enter your preferred text. Otherwise, if all products belong to the same collection, the collection name will be displayed automatically as the headline.

With these blocks, you can choose how to display products. If you want to feature products from different collections, select each product individually. If all the products belong to the same collection, simply select the collection and the products will be displayed automatically.

After selecting a collection, you can define how many products will be displayed in the component. This option is available only when using a collection as the content source. If you choose individual products instead, the number of displayed items is determined by the products you select.

Final result of a Product Carrousel.

Final result of a Product Grid.

Use these blocks to showcase your collections on the Home Page. Each layout offers a unique design, allowing you to choose the one that best matches your app's style. Their visual variety also makes them easy to combine with other components, giving you greater flexibility when creating engaging page layouts.

Collection blocks automatically use each collection's name and image, if available. You can customize these values at any time if you want to display different content.

To configure the block, simply choose the desired collections into the preview.

If a collection does not have the desired name or image, you can update or add them at any time choosing Custom option. These fields are optional and can be used whenever you need to customize the collection information displayed in your app instead of using the default Shopify collection details.

By selecting each collection, you will find the Collection Title and Collection Image fields, which allow you to override the existing information from Shopify.

With our Circle Collection Carousel block, you can showcase your collections in a visually engaging way. Adding and editing collections is simple: just add the block and select the desired collections from the right-side panel.

You can reorder the selected collections at any time or remove any collections you no longer want to display.

You can also toggle collection titles ON or OFF. When enabled, the title will appear below each collection circle.

Final result of a Circle Collection Carousel.

This block works the same way as the Circle Collection Carousel, with the only difference being its visual design. Choose between them based on the layout style that best fits your app’s design.

Final result of a Collection Thin Carousel.

The Collection Carousel is a great option for capturing your customers’ attention, as it offers a wide range of customization possibilities.

The first layout, called Slideshow, displays collections in a vertical carousel with larger visuals, showing one collection at a time. Users can browse through the collections by swiping, or you can enable the Autoplay option to automatically rotate between them.

Final result of a Collection Slideshow.

The second design option is called Carousel. It works similarly to the Collection Thin Carousel or Circle Collection Carousel, while offering additional customization options.

You can choose how many collections are displayed at the same time and adjust their aspect ratio between Portrait, Square, or Landscape to better match your desired layout and visual style.

Final result of a Collection Carousel.

In this example, 2.1 is selected as the number of visible items, with a Portrait (2:3) aspect ratio. This means two collection cards will be displayed at the same time, using a vertical image format.

The Collection Grid works similarly to a Product Grid, displaying collections in a vertical layout instead of a carousel format.

You can customize the grid by adjusting the number of columns displayed, selecting the desired image aspect ratio, and choosing whether or not to show collection titles.

Final result of a Collection Grid.

The Collection Text Carousel allows you to showcase your collections using a text-focused layout. Unlike other collection components that rely on images, this option highlights collection names in a clean and minimal design.

Final result of a Collection Text Carousel.

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.

The Blog Posts feature allows you to showcase your latest articles and content directly within your app. It is a great way to share brand updates, product stories, guides, and other relevant information with your customers.

Final result of Blog Posts.

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.

Final result of an Announcement Bar.

The Text Blocks feature allows you to add custom text sections throughout your app. These blocks can be used to provide additional information, highlight important messages, introduce collections, share brand content, or create visual breaks between other components.

The FAQs feature allows you to add frequently asked questions and answers directly within your app. It helps customers quickly find important information about your products, services, policies, or brand without needing additional support.

Final result of FAQs.

The Integration Block allows you to connect and display content from external services or third-party integrations directly within your app. This helps extend your app’s functionality by adding features and experiences that are not available through the default components.

Example of an Integration Block (Growave).