All Collections
Build Your App
Getting started with Pages: Crafting Seamless App Experiences
Getting started with Pages: Crafting Seamless App Experiences

Your A-Z guide to creating a visually appealing and engaging user experience using pages.

Saif avatar
Written by Saif
Updated over a week ago

What are Pages on Apptile?

Pages refer to the individual screens or pages within apps built on Apptile that serve a specific function or display specific information.

In the Apptile platform, Pages can be accessed through the navigation menu on the left panel. For instance, an e-commerce app may have pages like homepage, product display page, cart page, wish list page, etc. for browsing products, adding items to a shopping cart, and completing a purchase.

Each page is designed to serve a specific purpose and may contain different user

interface elements, such as buttons, menus, forms, images, and text. Collectively, Apptile pages create the overall user experience within the app and enable users to interact with the app's functionality and content.

Different types of Pages

Home Page

The main view (also known as the home screen or landing page) is the first screen that users see when they launch your app. It typically contains a navigation menu, search bar, and featured or popular content that you want to highlight. Here, you can leverage our extensive range of pre-built templates or customise your app design to make your app’s main view visually appealing and easy to navigate that encourages users to explore the app further.

Collections Page

A collection page displays a group of related items or content. It is typically used to showcase a set of products, photos, or other types of content that share a common theme or category. It displays items in a grid or list format, with each item including an image or thumbnail, title, and other relevant information. Users can typically scroll through the collection view to browse through the items and select those that they are interested in.

Collection pages can be useful in organising and displaying content within a mobile app, allowing users to quickly and easily browse through related items and discover new content.

Pro-Tips:

  • Customise your collection menu with banners to create an aesthetically dynamic experience.

  • We recommend labelling your collection menu as ‘Shop All’ or ‘Collections’ to clearly explain where the menu item will navigate the user.

Cart Page

Cart page provides users with a clear overview of the items a user has selected for purchase in their shopping cart. It provides users with a quick and easy way to manage the items they have added to their cart before proceeding to checkout. Typically, the cart page displays the name, image, quantity, price, estimated shipping time and total cost of each item in the cart.

Wishlist Page

The wishlist page allows users to save products they are interested in for future reference and create a list of items they may want to buy later or keep track of items they like.

Account Page

Account page helps users to manage their purchases and account information in one central location. It allows your users to manage their account information and preferences. It typically includes features such as viewing and editing user profile information, managing billing and shipping information, and tracking order history.

  • Important Notes:

    • The rewards and favourite options will only appear within the account view if you have the loyalty and/or wishlist integration enabled.

Orders

The orders page displays a user's order history, including details such as the order date, order status, and order total. It allows users to track the status of their orders and review their purchase history.

Notifications Page

The notifications page is where you can provide users with timely and relevant information, keeping them engaged with the app and informed about their activity. It can include notifications for various activities such as new messages, completed orders, shipping updates, or other account-related activities.

Product Page

The product page is typically a virtual storefront for a specific product that helps users learn more about it before making a purchase. It mainly includes product images, descriptions, features, specifications, pricing, reviews, and other relevant information that can help users make informed decisions about purchasing the product. The product page may also provide options for users to add the product to their cart, wishlist, or favorites, as well as to share or recommend the product to others.

How to use Pages?

1. Under the design section of your Apptile dashboard, you can find ‘Pages’.

2. On the ‘Pages’ section, you would find all the types of editable pages on your app listed down in the left navigation panel.

3. You can click on any page and customise it however you want by rearranging the tiles, editing the content, logos or images. For instance, click on the 'Collections Image' to start editing.

It’s important to note that there are a few other ways to access pages as well. One way is using the preview button on the top right. You can click on any page during the preview and start editing the page from thereon. Another way is to use the dropdown bar placed at the top of your design dashboard and select the respective page you’d like to view or edit.

How to add a custom page on your app?

  1. If you wish to add a custom landing page on your mobile app apart from the available pre-configured pages, just click on the ‘+Add’ button’ on the top left navigation bar. Next, add your new screen name and click on the ‘Add Page’ button.

2. Now, you will see a blank page on your screen with a drag and drop button on the top. First, go to Tiles and select the images, banners and then add some products. Ultimately, you can completely customise it however you want your new page to be.

3. Click anywhere on the page to drag and drop your selected tiles from the left navigation menu.

Important Note:

Some tiles will only be available to be used on certain pages for e.g. PDP tiles can only be accessed on the PDP page by simply clicking on the "PDP" button in the top left menu.

A PDP tile is a design element or component that is used on a product detail page (PDP) of your app. It typically contains specific information related to a product such as the product title, description, price, images, product variants, and customer reviews. PDP tiles are usually arranged in a structured manner and may also include call-to-action buttons such as "Add to cart" or "Buy now".

More Questions

If you require any further assistance or have additional questions, don't hesitate to reach out to us. Our team is always here to help, write to us at [email protected].

Did this answer your question?