Homescreen

The homescreen is the first screen you see when you open your app. You can design and customize it to display products, blogs, categories, banners, and more from your WordPress website.

Steps to follow

Step 1: Navigate to the homescreen

• Log in to your AppMySite account.

• From the app dashboard, go to Appearance > Homescreen.

Step 2: Configure home header and section colors

• Home header - The home header will displayed will appear consistently across the app header.

  • Add a header title.

  • Enable product search in header

  • Enable post search in header.

You can enable either product search or post search in the home header.

• Section colors: The section colors will apply to all sections on the homescreen.

  • Background color

  • Heading color

  • Icon background color

  • Icon arrow color

Step 3: Design or upload the homescreen banner

Design a banner or upload a predesigned image to highlight promotions or featured content. Elements you can configure include:

• Select banner image or solid image

• Add banner text that will be displayed on the banner

• Select the font style

• Select the font size

• Select the color of the banner text

• Align the banner text to left, right or center

Step 4: Display and manage WooCommerce products and categories

• Product categories – Showcase categories from your WordPress site. Elements you can configure include:

  • Columns: Set up the number of coloumns. The number of columns you select will decide the appearance of the category tiles on the homescreen.

  • Category image: Import category image from the website or style with an attractive color.

Product categories will only show images if you’ve added them on your WordPress website.

• Show product category name: Use the toggle to show or hide product category names.

• Shapes: Select the shape of the category tiles

• Text color: Select the color of the category name text color

• Show categories: Select whether you would like to show the parent category, the most populated category or select from list imported from your website.

• Sort categories by: Sort catgories by most populated or in alphabetical strings

• New products – Highlights all latest products added to your WordPress website.

• Featured products – Displays products marked as featured on your website.

Read this article to learn how to mark products as featured: Mark products featured

• Recently viewed products – Shows products users have recently browsed in the app.

• Sale products – Displays products available at discounted prices.

Step 5: Add and manage blog content

• Blog banner – Enable the blog banner to showcase popular blogs from your website in a carousel format. Popular blogs are those marked as sticky on your WordPress website.

Read this article to learn how to make blogs sticky: Mark blogs sticky

• Blog categories: Display blog categories from your WordPress site. Elements you can configure include:

  • Columns: Set the number of columns. The number of columns you select will decide the appearance of the category tiles on the homescreen.

  • Shapes: Choose the shape of the category tiles.

  • Background color: Select the background color of the category tiles.

  • Text color: Choose the color for category name text.

  • Show categories: Show the parent category, the most populated categories, or select from a list imported from your site.

  • Sort categories by: Sort by most populated or alphabetically.

• Popular blogs – Show blogs marked as sticky or spotlighted on your WordPress website.

• Recent blogs – Highlights the latest blog posts from your site.

• Web view – Embed a webpage directly into your homescreen by entering the desired web address.

If your web view does not appear as expected in the app, we recommend turning off all other features on the Home Screen for a better browsing experience.

• Cart – Add a cart section for quick checkout access.

• Pages – Add pages from your WordPress site using the "Select Pages" setting.

Step 6: Preview changes

• As you add or edit sections, use the device preview to see how your homescreen looks on iOS and Android.

Step 7: Save your homescreen

• Click Save to apply changes.

• Preview your homescreen using this guide.

You can reorder sections by dragging and dropping them to control the flow of content on your homescreen.