Designing Your App Homepage

Shopper App streamlines your app-building process with a flexible user interface and a selection of generic templates. Theme updates are seamlessly integrated with the app through real-time synchronization.

This article guides you on how to leverage Shopper App's pre-built components to design an engaging and visually appealing homepage for your customers.

Top Navigation

In your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to open the design editor. From the top dropdown menu, select Home page.

You can configure the following settings for your top navigation bar, which will apply to every page within your app:

1. Store Logo: In the left sidebar, select Top navigation, then click Change to upload your store logo. We recommend using an image with a 4:1 aspect ratio or 384px × 96px dimensions.
   
2. Left/Right Navigation Icons: Click the triangle icon on the left side of Top navigation to expand the menu. Then, select the left and right navigation icons and their corresponding destination pages.
   

Announcement Bar

The Announcement Bar is situated beneath the top navigation bar. You can only have one announcement bar on the homepage, and it cannot be deleted or reordered. There are four display styles to choose from: Slide horizontally, Slide vertically, Flashing switch, and Spaced and centered. You can also customize the background and text color of the board and schedule announcements.

You can add up to three announcements to the bar. While announcements cannot be deleted, you can hide or edit them as needed.

Pagination Component

The Pagination Component is located below the announcement bar and cannot be deleted or reordered. To configure different tabs for your website's homepage, follow these steps:

1. By default, the pagination component is disabled. Click Pagination Component to enable it.
2. Click on each section to edit the tab's name. To add up to 10 tabs, click Add Pagination Component.
3. Select the page you want to design, add the desired components to each tab, and configure the settings as needed. The preview panel on the right will dynamically switch tabs and display the applied effects in real time.

Body Part

Click Add component to add one. Four types of components are provided for the body part: 

Basic Components

• Carousel: You can set the auto-switch interval, the dimension, and schedule the release time according to your own preferences. You can choose to add images or videos here. 
  • Image: Supported file types are png, jpg, jpeg, and gif. You can optionally insert links that lead customers to a collection page, a product details page,  a custom page, and any web page.
  • Video: YouTube and Vimeo links are supported.
    
• Custom Image Banner: Supported file types are png, jpg, jpeg, and gif. The width of the image should be at least 1123px. Schedule the release time based on your needs.
  
• Custom Video Banner: Upload a video locally. The size of the video can’t exceed 10 MB. A cover image for the video will be automatically generated if you don’t upload one. You can choose your desired aspect ratio, insert redirect links, and schedule the release time based on your needs.
  
• Countdown: A countdown creates a sense of emergency if you are running a timed promotion. You can give it a title, schedule the end time, and choose the text color. If needed, turn on the Image after countdown toggle and upload an image that will be displayed when the countdown is over.
  

Product Components

You can display your products in the following ways.

• Product list: Select the collection containing the products you want to display. The products will be displayed in grids. You can give the component a title, decide how you want to sort the products, and schedule the release time. You can also display a button like “View all” if needed. The text and redirect link of the button can be customized.
  
• Product Grid: You can give the component a title, decide how many products you want to display in it , and schedule the release time. You can also display a button like “View all” if needed. The text and redirect link of the button can be customized. You can add up to 5 collections to the component as sub-components. Reposition them by dragging and dropping. Click each sub-component to choose the collection, modify the collection title and decide how you want to sort the products.
  
• Product Carousel: Select the collection containing the products you want to display. The products will be displayed in a carousel. You can give the component a title, decide how you want to sort the products, choose the product card style (Frame or Regular) and alignment, and schedule the release time. You can also display a button like “View all” if needed. The text and redirect link of the button can be customized.
  
  
  
• Product Showcase: Select the collection containing the products you want to display. The products will be displayed in a collage. You can give the component a title, decide how you want to sort the products, and schedule the release time. You can also display a button like “View all” if needed. The text and redirect link of the button can be customized.
  
  

  Note: The first 6 products in the collection, excluding invalid products, will be displayed in the component according to your chosen sorting method. The number tags in the preview are only visible to you and won’t be displayed on your App homepage.

• Product Collection Display: Select the collection containing the products you want to display. The products will be displayed in front of a backdrop. This component is suitable for featuring a collection. You can decide how you want to sort the products, and schedule the release time if needed. For the backdrop, upload an image and optionally give it a title and subtitle, customize the text color, and set up the redirect link.
  

Collection Components

You can display your collections in the following ways.

• Collections: You can choose the desired image style (Round or Square), number of columns, title and its alignment, and release schedule for the entire component. For individual collections, click into each sub-component to specify the collection, upload an image, and schedule the release time.
  
• Collection showcase A and Collection showcase B: The collections will be displayed in a collage. Collection showcase A supports up to 4 collections, while Collection showcase B supports up to 7 collections. You must use up all the slots or there will be empty placeholders. For the entire component, you can give it a title, choose the desired alignment, and schedule the release time. For individual collections, click into each sub-component to specify the collection and upload an image. Drag and drop to adjust their display order.
  
  
  
• Collection Carousel: The collections will be displayed in a carousel. Specify at least 4 collections. You can add up to 12 collections in the component. For the entire component, you can give it a title, choose the desired alignment and color of the background and text, and schedule the release time. For individual collections, click into each sub-component to specify the collection, upload an image, and schedule the release time. Drag and drop to adjust their display order.
  
• Collection Grid: The collections will be displayed in a grid. Specify at least 1 collection. You can add up to 4 collections in the component. For the entire component, you can give it a title, choose the desired alignment and image proportion, and schedule the release time. For individual collections, click into each sub-component to specify the collection and upload an image. Drag and drop to adjust their display order.
  

App

Flash sales: The campaigns you configure in the Flash Sales app will be showcased on your App. Learn more.

Bottom Navigation

The bottom navigation will also be displayed on all pages while customers are browsing the app. You can choose to display default components or make custom ones.

Default Components

In the editor,  click on the dropdown icon beside Bottom navigation to expand available components. You can make the following changes to the components:

Custom Components

Click Add Navigation to add a custom component. Give it a title, choose the icons, and set up the redirect link. The link can only go to a custom page.

Hiding Text

You can choose whether to display text on the button navigation icons. For example, the Shop component will just display its icon without “Shop” when turned on.

Publishing Your Design

After completing the edits and confirming that everything looks right in the preview, click the Apply button in the upper right corner to publish your design to the app. If you want to hold the publishing, you can click Save to retain your edits.